@charset "UTF-8";

/* 基础样式 */
.label-list,.tui-label{font-size: 0;}
.tui-label span,.tui-label a,.tui-label-del,a.tui-label,span.tui-label,
.tui-label-add
{line-height: 22px;height: 24px;border: 1px solid #d8d8d8;color: #3c3c3c;cursor: pointer;
    display: inline-block;text-align: center;padding: 0 5px;border-radius: 2px;font-size: 12px;margin: 0 4px 0 0;
    -webkit-transition: all .2s linear;transition: all .2s linear;overflow: hidden;vertical-align: top;}

/* hover效果 */
.tui-label span:hover,.tui-label a:hover,.tui-label-del:hover,a.tui-label:hover,span.tui-label:hover,
.tui-label-add:hover
{background-color: rgba(164,164,164,0.12);border-color: rgba(164,164,164,1);color: #3c3c3c;}

a.tui-label span:hover,a.tui-label-add span:hover,
a.tui-label-del span:hover
{background: transparent;}

/* 删除 */
.tui-label-del,.tui-label .tui-label-del{position: relative;padding-right: 22px;}
.tui-label-del .icon-del,.tui-label-del i{
   font-size: 12px;line-height: 22px;width: 22px;height: 22px;color: #333;cursor: pointer;text-align: center;
   position: absolute;right: 0;top: 1px;font-family:"simsun"}
.tui-label-del.cur .icon-del,.tui-label-del.cur i,
.tui-label.tui-label--em .icon-del,.tui-label.tui-label--em i{top: 2px;}
.tui-label-del span,
.tui-label .label-em span,
.tui-label .tui-label-add span{border: none;padding: 0;margin: 0;}
.tui-label .label-em,.tui-label .label-em span{line-height: 26px;}

/* 已添加--删除 */
.tui-label-del.cur,.tui-label.tui-label--em,a.tui-label.cur,span.tui-label.cur,
.tui-label .label-em,.tui-label .label-em:hover
{background-color: #ffc800;border:none;line-height: 26px;padding: 0 6px 0 6px;}
.tui-label-del.cur,.tui-label-del.tui-label--em{padding-right: 23px;}
.tui-label-del.cur span,.tui-label.tui-label--em span{line-height: 26px;}
.tui-label-del.cur:hover,.tui-label.tui-label--em:hover,
a.tui-label.cur:hover,span.tui-label.cur:hover
{background-color: #e6b400;}

/* 添加 */
.tui-label-add,.tui-label .tui-label-add{position: relative;padding-right: 22px;}
.tui-label-add .icon-add,.tui-label-add i{width: 22px;height: 22px;position: absolute;right: 0;top: 0;font-size: 0;}
.tui-label-add .icon-add:before,.tui-label-add .icon-add:after,
.tui-label-add i:before,.tui-label-add i:after{
    content:"";width: 9px;height: 1px;background-color: #3c3c3c;position: absolute;left: 50%;top: 50%;margin: 0 0 0 -5px;
}
.tui-label-add .icon-add:after,.tui-label-add i:after{
    height: 9px;width: 1px;margin: -4px 0 0 -1px;}











/* 禁用状态 */
.tui-label.disabled,.tui-label.disabled:hover{border:1px solid rgba(164,164,164,0.3);color:#adadad;background: transparent;cursor: default;}

/* 截字处理 */
.tui-label span.ellipsis{border: none;}
.tui-label .ellipsis,.tui-label-add .ellipsis,.tui-label-del .ellipsis
{overflow: hidden;white-space: nowrap;text-overflow: ellipsis;max-width: 160px;display: inline-block;height: 24px;
text-align: left;}










/* 添加交互 */
.tui-label-del.show{
    -webkit-animation: labelShowAnim .3s ease-out 0s 1 both;
    -ms-animation: labelShowAnim .3s ease-out 0s 1 both;
}
@-webkit-keyframes labelShowAnim{
    0%{
        transform: scale(0);
        -webkit-transform-origin:0 50%;
        opacity: 0;
    }
    100%{
        transform: scale(1);
        -webkit-transform-origin:0 50%;
        opacity: 1;
    }
}
@-ms-keyframes labelShowAnim{
    0%{
        transform: scale(0);
        -ms-transform-origin:0 50%;
        opacity: 0;
    }
    100%{
        transform: scale(1);
        -ms-transform-origin:0 50%;
        opacity: 1;
    }
}

/* 删除交互 */
.tui-label-del.hide{
    display: inline-block !important;
    -webkit-animation: labelDelAnim .3s ease-out .2s 1 both;
    -ms-animation: labelDelAnim .3s ease-out .2s 1 both;
}
.tui-label-del.hide i{
    -webkit-animation: labelDelIconAnim 1s ease-out 0s 1 both;
    -ms-animation: labelDelIconAnim 1s ease-out 0s 1 both;
}
.tui-label-del.hide span{
    -webkit-animation: labelDelTxtAnim .3s ease-out 0s 1 both;
    -ms-animation: labelDelTxtAnim .3s ease-out 0s 1 both;
}
@-webkit-keyframes labelDelAnim{
    0%{
        max-width: 200px;
        opacity: 1;
    }
    30%{
        opacity: 0;
    }
    100%{
        border: 0;
        max-width: 0;
        padding: 0;
        margin: 0;
        opacity: 0;
    }
}
@-ms-keyframes labelDelAnim{
    0%{
        max-width: 200px;
        opacity: 1;
    }
    30%{
        opacity: 0;
    }
    100%{
        border: 0;
        max-width: 0;
        padding: 0;
        margin: 0;
        opacity: 0;
    }
}
@-webkit-keyframes labelDelTxtAnim{
    0%{
        max-width: 160px;
        opacity: 1;
    }
    100%{
        max-width: 0;
        opacity: 0;
    }
}
@-webkit-keyframes labelDelIconAnim{
    0%{
        transform: scale(1);
    }
    100%{
        transform: scale(0);
    }
}
@-ms-keyframes labelDelTxtAnim{
    0%{
        max-width: 160px;
        opacity: 1;
    }
    100%{
        max-width: 0;
        opacity: 0;
    }
}
@-ms-keyframes labelDelIconAnim{
    0%{
        transform: scale(1);
    }
    100%{
        transform: scale(0);
    }
}