@charset "UTF-8";
@import "../core/index-noreset.scss";
@import "./scss/variable.scss";
@import "./scss/animation.scss";
@import "./scss/mixin.scss";
@import "./scss/placeholder.scss";
@import "./rtl.scss";

.#{$css-prefix} {
    &tag-group {
        .#{$css-prefix}tag-medium,
        .#{$css-prefix}tag-large {
            @include tag-group-margin($tag-size-m-margin);
        }

        .#{$css-prefix}tag-small {
            @include tag-group-margin($tag-size-s-margin);
        }
    }

    &tag {
        @include box-sizing();
        display: inline-block;
        max-width: 100%;
        vertical-align: middle;
        border-width: $tag-border-width;
        border-radius: $tag-corner-radius;
        box-shadow: $tag-shadow;
        border-style: solid; /* 可配置??? */
        overflow: hidden;
        white-space: nowrap;
        transition: all $motion-duration-immediately $motion-linear;
        font-size: 0;
        outline: 0;

        > .#{$css-prefix}tag-body {
            position: relative;
            display: inline-block;
            height: 100%;
            text-align: center;
            vertical-align: middle;
            @extend %ellipsis;
            max-width: 100%;
            cursor: default;

            > a {
                text-decoration: none;
                color: inherit;
                &:before {
                    content: " ";
                    @include placeholder-full;
                }
            }

            /* 用户手动传的 icon 的大小也保持一致？ */
            .#{$css-prefix}icon {
                line-height: 1;
                vertical-align: baseline;

                &:before {
                    font-size: inherit;
                }
            }
        }

        &.#{$css-prefix}tag-body-pointer {
            cursor: pointer;
        }

        &[disabled], &.disabled {
            cursor: not-allowed;
            pointer-events: none;
        }

        /* 预设颜色值 */
        @include tag-preset-color('blue', $tag-color-preset-blue);
        @include tag-preset-color('green', $tag-color-preset-green);
        @include tag-preset-color('orange', $tag-color-preset-orange);
        @include tag-preset-color('red', $tag-color-preset-red);
        @include tag-preset-color('turquoise', $tag-color-preset-turquoise);
        @include tag-preset-color('yellow', $tag-color-preset-yellow);
    }

    &tag-large {
        @include tag-size(
            $tag-size-l-height,
            $tag-size-line-height,
            $tag-border-width,
            $tag-size-l-padding-lr,
            $tag-size-l-text-size,
            $tag-size-l-icon-font,
            $tag-size-l-content-min-width,
            $tag-size-l-spacing
        );
    }

    &tag-medium {
        @include tag-size(
            $tag-size-m-height,
            $tag-size-line-height,
            $tag-border-width,
            $tag-size-m-padding-lr,
            $tag-size-m-text-size,
            $tag-size-m-icon-font,
            $tag-size-m-content-min-width,
            $tag-size-m-spacing
        );
    }

    &tag-small {
        @include tag-size(
            $tag-size-s-height,
            $tag-size-line-height,
            $tag-border-width,
            $tag-size-s-padding-lr,
            $tag-size-s-text-size,
            $tag-size-s-icon-font,
            $tag-size-s-content-min-width,
            $tag-size-s-spacing
        );
    }

    &tag-default {
        cursor: default;

        &.#{$css-prefix}tag-level-normal {
            @extend %tag-statement-bordered;
        }

        &.#{$css-prefix}tag-level-primary {
            @extend %tag-statement-primary;
        }
    }

    &tag-closable {
        position: relative;
        > .#{$css-prefix}tag-close-btn {
            display: inline-block;
            vertical-align: middle;
            height: 100%;
            text-align: center;
            cursor: pointer;
        }

        &.#{$css-prefix}tag-level-normal {
            @extend %tag-statement-closable-bordered;
            @extend %tag-closable-normal-tick;
        }

        &.#{$css-prefix}tag-level-primary {
            @extend %tag-statement-closable-primary;
        }
    }

    &tag-checkable {
        cursor: pointer;
        position: relative;
        border-radius: $tag-corner-radius;

        &.checked {
            &:before {
                animation: fadeInRightForTag .4s $ease-in-out-circ;
            }
            &:after {
                animation: zoomIn .4s $ease-in-out-circ;
            }
        }

        &.#{$css-prefix}tag-small {
            &:not(.#{$css-prefix}tag-level-primary) {
                @include checkable-tag-tick-size(
                    $tag-size-s-tick-icon-bg-size,
                    $tag-size-s-tick-icon-size
                );
            }
        }

        &.#{$css-prefix}tag-medium {
            &:not(.#{$css-prefix}tag-level-primary) {
                @include checkable-tag-tick-size(
                    $tag-size-m-tick-icon-bg-size,
                    $tag-size-m-tick-icon-size
                );
            }
        }

        &.#{$css-prefix}tag-large {
            &:not(.#{$css-prefix}tag-level-primary) {
                @include checkable-tag-tick-size(
                    $tag-size-l-tick-icon-bg-size,
                    $tag-size-l-tick-icon-size
                );
            }
        }

        &.#{$css-prefix}tag-level-normal {
            @extend %tag-selectable-normal;

            &.checked {
                @extend %tag-statement-normal;
                @extend %tag-checkable-normal-tick;
            }
        }

        &.#{$css-prefix}tag-level-primary {
            @extend %tag-statement-checkable-fill;

            &.checked {
                @extend %tag-statement-checkable-fill-checked;
            }
        }

        &.#{$css-prefix}tag-level-secondary {
            @extend %tag-statement-text;

            &.checked {
                @extend %tag-statement-secondary;
                @extend %tag-checkable-secondary-tick;
            }

            &[disabled], &.disabled {
                color: $tag-text-color-disabled;
                border-color: $tag-border-color-disabled;
                background-color: $tag-fill-bg-color-disabled;
            }
        }
    }

    /* Animation */
    /* ----------- */
    &tag-zoom-enter,
    &tag-zoom-appear {
        animation: fadeInLeft .4s $ease-in-out-circ;
        animation-fill-mode: both;
    }

    &tag-zoom-leave {
        animation: zoomOut .3s ease-in;
        animation-fill-mode: both;
    }
}