@import '../default/var';

.#{$prefix}-tag {
    display: inline-block;
    vertical-align: top;
    background: #F5F5F5;
    border-radius: 4px;
    &-label,
    &-close {
        display: inline-block;
        vertical-align: top;
        height: 100%;
    }
    &-label {
        color: #333;
    }
    &-close {
        color: #b6b6b6;
        cursor: pointer;
        margin-left: 4px;
        font-size: 12px;
    }
    @each $size in large,
    medium,
    small,
    mini {
        &--#{$size} {
            font-size: 12px; //map-get($form-font-sizes, $size);
            height: map-get($form-sizes, $size) * 0.7;
            margin: map-get($form-sizes, $size) * 0.15 - 1px 4px map-get($form-sizes, $size) * 0.15 - 1px 0;
            line-height: map-get($form-sizes, $size) * 0.7;
            padding: 0 map-get($form-font-sizes, $size) * 0.5;
            .#{$prefix}-tag-close {
                line-height: map-get($form-sizes, $size) * 0.7;
            }
        }
    }
    &s {
        display: inline-block;
        position: relative;
        width: 100%;
        border: solid 1px $input-color-border;
        border-radius: 2px;
        vertical-align: middle;
        padding: 0 30px 0 10px;
        &:not(.is-disabled) {
            &.is-error {
                border-color: $input-color-border-error;
            }
            &:not(.is-error) {
                &:hover {
                    border-color: $input-color-border-hover;
                    box-shadow: 0 0 6px 1px $input-color-shadow-hover;
                }
                &:focus,
                &:active {
                    border-color: $input-color-border-hover;
                }
            }
        }
        &.is-disabled {
            background-color: $input-color-disabled-back;
            color: $input-color-disabled-fore;
            cursor: not-allowed;
        }
        @each $size in large,
        medium,
        small,
        mini {
            &--#{$size} {
                font-size: map-get($form-font-sizes, $size);
                min-height: map-get($form-sizes, $size);
                line-height: map-get($form-sizes, $size) - 2px;
                .#{$prefix}-tags__icon {
                    line-height: map-get($form-sizes, $size) - 2px;
                }
            }
        }
        &__placeholder {
            color: $input-color-placeholder;
        }
        &__suffix {
            width: 25px;
            position: absolute;
            text-align: center;
            color: $input-color-icon;
            top: 50%;
            right: 5px;
            transform: translate(0, -50%);
        }
        &__clear {
            cursor: pointer;
        }
    }
}