@import "./base/var";
@import "./mixins/index.scss";


@mixin tagSize($size) {
    $font-size: $--tag-font-size-default;
    $padding: $--tag-padding-horizontal-default;
    $height: $--tag-height-default;

    @if ($size == 'mini') {
        $font-size: $--tag-font-size-mini;
        $height: $--tag-height-mini;
        $padding: $--tag-padding-horizontal-mini;
    } @else if ($size == 'small') {
        $font-size: $--tag-font-size-small;
        $height: $--tag-height-small;
        $padding: $--tag-padding-horizontal-small;
    } @else if ($size == 'large') {
        $font-size: $--tag-font-size-large;
        $height: $--tag-height-large;
        $padding: $--tag-padding-horizontal-large;
    }
    font-size: $font-size;
    padding: 0 $padding;
    height: $height;
    line-height: #{$height - 2px};

    @include e(icon, false) {
        font-size: #{$font-size + 2px};
        margin-left: $padding;
    }
}

@mixin tag-color($font-color, $border-color, $type: '') {
    color: $font-color;
    border-color: $border-color;
    background-color: $border-color;
    @include e(icon, false) {
        color: $font-color;
    }

    @if ($type == 'o') {
        background-color: mix($border-color, $--color-white, $--button-active-percent);
    } @else if ($type == 'ghost') {
        background-color: transparent;
    } @else if ($type == 'ghost-o') {
        background-color: transparent;
        @include e(icon, false) {
            color: $font-color;
        }
    }
}


@include c(tag) {
    display: inline-block;
    border-width: 1px;
    border-style: solid;
    box-sizing: border-box;
    cursor: pointer;
    margin: 0 5px;
    border-color: $--tag-border-color-default;
    border-radius: $--border-radius-default;
    color: $--tag-font-color-default;
    background-color: $--tag-background-color-default;
    transition: all $--animation-time;

    &:hover {
        opacity: $--tag-hover-opacity;
    }

    @include e(icon, false) {
        //color: $--color-white;
        opacity: $--tag-hover-opacity;
        line-height: normal;
        vertical-align: middle;

        &:hover {
            opacity: 1;
        }
    }

    @include m(mini) {
        @include tagSize(mini);
    }
    @include m(small) {
        @include tagSize(small);
    }
    //尺寸default
    @include m(default) {
        @include tagSize(default);
    }
    @include m(large) {
        @include tagSize(large);
    }

    //颜色default
    @include m(color-default) {
        @include e(icon, false) {
            //color: $--tag-font-color-default;
        }
    }

    @include m(color-success) {
        @include tag-color($--color-white, $--color-success);
    }

    @include m(color-danger) {
        @include tag-color($--color-white, $--color-danger);
    }

    @include m(color-primary) {
        @include tag-color($--color-white, $--color-primary);
    }

    @include m(color-warning) {
        @include tag-color($--color-white, $--color-warning);
    }

    @include m(color-info) {
        @include tag-color($--color-white, $--color-info);
    }

    @include m(color-default-o) {
        @include tag-color($--tag-font-color-default, $--tag-font-color-default, 'o');
    }

    @include m(color-success-o) {
        @include tag-color($--color-success, $--color-success, 'o');
    }

    @include m(color-danger-o) {
        @include tag-color($--color-danger, $--color-danger, 'o');
    }

    @include m(color-primary-o) {
        @include tag-color($--color-primary, $--color-primary, 'o');
    }

    @include m(color-warning-o) {
        @include tag-color($--color-warning, $--color-warning, 'o');
    }

    @include m(color-info-o) {
        @include tag-color($--color-info, $--color-info, 'o');
    }


    @include m(ghost, false, true) {
        @include m(color-default, false, true) {
            @include tag-color($--tag-font-color-default, $--tag-font-color-default, 'ghost');
        }
    }

    @include m(ghost, false, true) {
        @include m(color-primary, false, true) {
            @include tag-color($--color-primary, $--color-primary, 'ghost');
        }
    }

    @include m(ghost, false, true) {
        @include m(color-danger, false, true) {
            @include tag-color($--color-danger, $--color-danger, 'ghost');
        }
    }

    @include m(ghost, false, true) {
        @include m(color-success, false, true) {
            @include tag-color($--color-success, $--color-success, 'ghost');
        }
    }

    @include m(ghost, false, true) {
        @include m(color-warning, false, true) {
            @include tag-color($--color-warning, $--color-warning, 'ghost');
        }
    }

    @include m(ghost, false, true) {
        @include m(color-info, false, true) {
            @include tag-color($--color-info, $--color-info, 'ghost');
        }
    }


    @include m(ghost, false, true) {
        @include m(color-default-o, false, true) {
            @include tag-color($--tag-font-color-default, $--tag-font-color-default, 'ghost-o');
        }
    }

    @include m(ghost, false, true) {
        @include m(color-primary-o, false, true) {
            @include tag-color($--color-primary, $--color-primary, 'ghost-o');
        }
    }

    @include m(ghost, false, true) {
        @include m(color-danger-o, false, true) {
            @include tag-color($--color-danger, $--color-danger, 'ghost-o');
        }
    }

    @include m(ghost, false, true) {
        @include m(color-success-o, false, true) {
            @include tag-color($--color-success, $--color-success, 'ghost-o');
        }
    }

    @include m(ghost, false, true) {
        @include m(color-warning-o, false, true) {
            @include tag-color($--color-warning, $--color-warning, 'ghost-o');
        }
    }

    @include m(ghost, false, true) {
        @include m(color-info-o, false, true) {
            @include tag-color($--color-info, $--color-info, 'ghost-o');
        }
    }

    &:not(.is-checked) {
        background-color: transparent;
        border-color: transparent;
        color: $--tag-font-color-default;
        @include e(icon, false) {
            color: $--tag-font-color-default;
        }
    }
}
