@import "../../../style/theme/default/index";
@import "../../../style/mixins/index";

@tag-prefix-cls: ~"@{idoll-prefix}-tag";

.@{tag-prefix-cls} {
    display: inline-block;
    border-color: @primary-color;
    color: @text-color;
    border: @border-width-base @border-style-base @border;
    border-radius:  @border-radius-base;
    font-size: @font-size-sm;
    padding: 0 @padding-xs;
    box-sizing: border-box;
    text-align: center;
    margin-right: 8px;
    margin-bottom: 8px;

    div {
        display: inline-block;
        min-width: @tag-min-width;
        max-height: @tag-max-height;
        line-height: @tag-line-height;
    }
    
    i {
        transform: translateY(-5%);
        color: @text-color-disable;
    }

    i:hover {
        color: @text-color-secondary;
        cursor: pointer;
        transition: all @animation-duration-slow;
    }

    &-close{
        cursor: pointer;
        font-size: @font-size-sm;
        padding: 0 @padding-xs;
    }
      //hot
    &-hot {
    border:@border-width-base @border-style-base transparent;
    border-radius: none;
    cursor: pointer;
    &-checked {
        border-radius: @border-radius-base ;
        background-color: @primary-color;
        color: hsv(0, 0, 96%);
        border:@border-width-base @border-style-base @primary-color;
    }
    &-checked:hover {
        background-color: @primary-hover;
        border-color: @primary-hover;
        border:@border-width-base @border-style-base @primary-hover;
        color: @white !important;
    }
    }
    &-hot:hover {
        color: @primary-color;
    }
    &-peru {
        border:@border-width-base @border-style-base RGBA(205, 133, 63, 0.3) !important;
    }
    &-coral {
        border:@border-width-base @border-style-base RGBA(255, 127, 80, 0.3) !important;
    }&-hotpink {
        border:@border-width-base @border-style-base RGBA(255, 105, 180, 0.3) !important;
    }&-orange {
        border:@border-width-base @border-style-base RGBA(255, 165, 0, 0.3) !important;
    }&-limegreen {
        border:@border-width-base @border-style-base RGBA(50, 205, 50, 0.3) !important;
    }&-deepskyblue {
        border:@border-width-base @border-style-base RGBA(0, 191, 255, 0.3) !important;
    }&-mediumslateblue {
        border:@border-width-base @border-style-base RGBA(123, 104, 238, 0.3) !important;
    }&-turquoise {
        border:@border-width-base @border-style-base RGBA(64, 224, 208, 0.3) !important;
    }
}
a.@{tag-prefix-cls} {
    line-height: @tag-line-height;
    color: @text-color;
}
a.@{tag-prefix-cls}:active {
    border-color: @primary-color;
    color: @primary-color;
    transition: none;
    text-decoration: none;
}
a.@{tag-prefix-cls}:hover {
    border-color: @primary-color;
    color: @primary-color;
    transition: none;
    text-decoration: none;
}
a.@{tag-prefix-cls}:visited {
    border-color: @primary-color;
    color: @primary-color;
    transition: none;
    text-decoration: none;
}
a.@{tag-prefix-cls}:focus {
    border-color: @primary-color;
    color: @primary-color;
    transition: none;
    text-decoration: none;
}

.group {
    .@{tag-prefix-cls}:last-child {
        border-style: dashed !important;
        cursor: pointer;
    }
}