@alifd/next/es/tag/scss/mixin.scss

@charset "UTF-8";
// tag mixins
// --------------------------------------------------

@mixin tag-group-margin($margin) {
    margin-right: $margin;
    margin-bottom: $margin;
}

@mixin tag-size(
    $height,
    $lineHeight,
    $borderWidth,
    $paddingLr,
    $fontSize,
    $iconSize,
    $minWidth,
    $spacing
) {
    height: $height;
    padding: 0;
    line-height: calc(#{$height} - #{$borderWidth} * 2);
    font-size: 0;

    > .#{$css-prefix}tag-body {
        font-size: $fontSize;
        padding: 0 $paddingLr;
        min-width: $minWidth;
    }

    &.#{$css-prefix}tag-closable > .#{$css-prefix}tag-body {
        padding: 0 0 0 $paddingLr;
        max-width: calc(100% - (#{$spacing} + #{$iconSize} + #{$paddingLr}));
    }
    &[dir=rtl].#{$css-prefix}tag-closable > .#{$css-prefix}tag-body {
        padding: 0 $paddingLr 0 0;
    }

    &.#{$css-prefix}tag-closable > .#{$css-prefix}tag-close-btn {
        margin-left: $spacing;
        padding-right: $paddingLr;
        .#{$css-prefix}icon {
            @include icon-size($iconSize);
        }
    }
    &[dir=rtl] > .#{$css-prefix}tag-close-btn {
        margin-right: $spacing;
        margin-left: 0;
        padding-right: 0;
        padding-left: $paddingLr;
    }
}

@mixin tag-statement(
    $textColor,
    $borderColor,
    $bgColor,
    $textColorHover,
    $borderColorHover: "",
    $bgColorHover: "",
    $tailColor: "",
    $tailColorHover: "",
    $tailColorDisabled: "",
    $textColorDisabled: "",
    $borderColorDisabled: "",
    $bgColorDisabled: ""
) {
    color: $textColor;
    border-color: $borderColor;
    background-color: $bgColor;

    &:not(.disabled):not([disabled]):hover,
    &:not(.disabled):not([disabled]).hover {
        color: $textColorHover;

        @if get-compiling-value($borderColorHover) != "" {
            border-color: $borderColorHover;
        }
        @if get-compiling-value($bgColorHover) != "" {
            background-color: $bgColorHover;
        }

        @if get-compiling-value($tailColorHover) != "" {
            > .#{$css-prefix}tag-close-btn {
                color: $tailColorHover;
            }
        }
    }

    &[disabled],
    &.disabled {
        @if get-compiling-value($tailColorDisabled) != "" {
            > .#{$css-prefix}tag-close-btn {
                color: $tailColorDisabled;
            }
        }

        @if get-compiling-value($textColorDisabled) != "" {
            color: $textColorDisabled;
        }

        @if get-compiling-value($borderColorDisabled) != "" {
            border-color: $borderColorDisabled;
        }

        @if get-compiling-value($bgColorDisabled) != "" {
            background-color: $bgColorDisabled;
        }
    }

    > .#{$css-prefix}tag-close-btn {
        @if get-compiling-value($tailColor) != "" {
            color: $tailColor;
        }
    }
}

@mixin tail-hover-animation() {
    transform: rotate(90deg);
    transform-origin: 50% 50%;
    backface-visibility: hidden;
}

// for virtual btn
@mixin tick-bg-size($size) {
    right: calc(0px - #{$size} / 2);
    bottom: calc(0px - #{$size} / 2);
    width: $size;
    height: $size;
}

// checkable tag tick
@mixin checkable-tag-tick-size($tick-bg-size, $tick-size) {
    &:before {
        right: calc(0px - #{$tick-bg-size} / 2);
        bottom: calc(0px - #{$tick-bg-size} / 2);
        width: $tick-bg-size;
        height: $tick-bg-size;
    }

    &:after {
        font-size: $tick-size;
        line-height: $tick-size;
        right: 0;
        bottom: 0;
    }
}

@mixin tag-checked-tick(
    $tick-icon,
    $tick-icon-color,
    $tick-icon-hover-color,
    $tick-icon-disabled-color,
    $tick-bg,
    $tick-bg-hover,
    $tick-bg-disabled
) {
    &:before {
        position: absolute;
        content: "";
        -webkit-font-smoothing: antialiased;
        background-color: $tick-bg;
        transform: rotate(45deg);
    }

    &:after {
        position: absolute;
        font-family: $icon-font-family;
        -webkit-font-smoothing: antialiased;
        content: $tick-icon;
        transform: scale(.6);
        color: $tick-icon-color;
    }

    &:not(.disabled):not([disabled]):hover,
    &:not(.disabled):not([disabled]).hover {
        &:before {
            background-color: $tick-bg-hover;
        }

        &:after {
            color: $tick-icon-hover-color;
        }
    }

    &[disabled],
    &:disabled {
        &:before {
            background-color: $tick-bg-disabled;
        }

        &:after {
            color: $tick-icon-disabled-color;
        }
    }
}

@mixin placeholder-full {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

@mixin tag-preset-color($name, $color) {
    &-#{$name} {
        background-color: $color;
        border-color: $color;
        color: #FFF;

        &-inverse {
            background-color: rgba(get-compiling-value($color), .25);
            border-color: $color;
            color: $color;
        }
    }
}