semi-design/packages/semi-foundation/tagInput/tagInput.scss

@import "./variables.scss";

$module: #{$prefix}-tagInput;

.#{$module} {
    background-color: $color-tagInput_default-bg-default;
    border: $width-tagInput-border-default $color-tagInput-border-default solid;
    border-radius: $radius-tagInput;
    display: inline-flex;
    font-weight: $font-weight-regular;
    width: 100%;
    box-sizing: border-box;
    transition: background-color $transition_duration-tagInput-bg $transition_function-tagInput-bg $transition_delay-tagInput-bg,
    border $transition_duration-tagInput-border $transition_function-tagInput-border $transition_delay-tagInput-border;


    &-hover {
        background-color: $color-tagInput_default-bg-hover;
        border: $width-tagInput-border-hover $color-tagInput-border-hover solid;
    }
    
    &-focus {
        background-color: $color-tagInput_default-bg-focus;
        border: $width-tagInput-border-focus $color-tagInput-border-focus solid;
    }

    &-warning {
        background-color: $color-tagInput_warning-bg-default;
        border-color: $color-tagInput_warning-border-default;

        &:hover {
            background-color: $color-tagInput_warning-bg-hover;
            border-color: $color-tagInput_warning-border-hover;
        }

        &.#{$module}-focus {
            background-color: $color-tagInput_warning-bg-focus;
            border-color: $color-tagInput_warning-border-focus;
        }
    }

    &-error {
        background-color: $color-tagInput_danger-bg-default;
        border-color: $color-tagInput_danger-border-default;

        &:hover {
            background-color: $color-tagInput_danger-bg-hover;
            border-color: $color-tagInput_danger-border-hover;
        }
        
        &.#{$module}-focus {
            background-color: $color-tagInput_danger-bg-focus;
            border-color: $color-tagInput_danger-border-focus;
        }
    }

    &-disabled {
        cursor: not-allowed;

        .#{$module}-clearBtn,
        .#{$module}-prefix,
        .#{$module}-suffix {
            color: $color-tagInput_disabled-text-default;
        }
        .#{$module}-wrapper {
            cursor: not-allowed;
        }
        .#{$module}-wrapper-tag {
            color: $color-tagInput_disabled-text-default;
            background-color: transparent;
        }
        .#{$module}-wrapper-input {
            cursor: not-allowed;
            &::placeholder {
                color: $color-tagInput_disabled-text-default;
            }
        }
        
    }

    &-wrapper {
        display: flex;
        flex-wrap: wrap;
        flex-grow: 1;
        align-items: center;
        padding-left: $spacing-extra-tight;
        padding-right: $spacing-extra-tight;
        overflow: hidden;

        &-tag {
            margin-right: $spacing-extra-tight;
            white-space: pre;

            &-size {
                &-small {
                    margin-top: $spacing-tagInput_small-Y;
                    margin-bottom: $spacing-tagInput_small-Y;
                }

                &-default {
                    margin-top: $spacing-tagInput_default-Y;
                    margin-bottom: $spacing-tagInput_default-Y;
                }

                &-large {
                    margin-top: $spacing-tagInput_large-Y;
                    margin-bottom: $spacing-tagInput_large-Y;
                }
            }
        }

        &-typo {
            font-size: $font-size-small;

            &-disabled {
                color: $color-tagInput_disabled-text-default;
            }
        }

        &-n {
            cursor: pointer;
            font-size: $font-size-small;
            margin-right: $spacing-extra-tight;
            color: var(--semi-color-text-0);
            padding-left: $spacing-tagInput_wrapper_n_paddingX;
            padding-right: $spacing-tagInput_wrapper_n_paddingX;

            &-disabled {
                cursor: not-allowed;
                color: $color-tagInput_disabled-text-default;
            }
        }

        & &-input {
            flex-grow: 1;
            width: min-content;
            min-width: 38px;
            border: none;
            outline: none; 
            background-color: transparent;
            font-size: $font-size-regular;

            &:hover {
                background-color: transparent;
            }

            &:not(:first-child) > input {
                padding-left: 0;
            }
        }
    }

    &-clearBtn {
        @include all-center;
        width: $width-tagInput-clear-medium;
        flex-shrink: 0;
        color: $color-tagInput-icon-default;

        &:hover {
            cursor: pointer;
            color: $color-tagInput-icon-hover;
        }

        &-invisible {
            visibility: hidden;
        }
    }

    &-prefix,
    &-suffix {
        @include all-center;
        &-text {
            margin: 0 $spacing-base-tight;
            font-weight: 600;
            white-space: nowrap;
        }
        &-icon {
            color: $color-tagInput-icon-default;
            margin: 0 $spacing-tight;
        }
    }

    &-prefix {
        &-text {
            color: $color-tagInput_prefix-default;
        }
    }

    &-suffix {
        &-text {
            color: $color-tagInput_suffix-default;
        }
    }
}

@import "./rtl.scss";