toggle-corp/react-store

.empty {
    position: relative;
    // flex-shrink: 0;
    min-height: 56px;
    color: var(--color-text-disabled);
}

.select-input-base {
    .input-and-actions {
        display: flex;
        position: relative;
        border-bottom: var(--width-separator-thin) solid var(--color-separator);

        .input {
            flex-grow: 1;
        }

        %button {
            transition: var(--duration-transition-medium) opacity ease-in-out;
            padding: var(--spacing-extra-small-alt);
        }

        .actions {
            display: none;
            align-items: center;
            flex-shrink: 0;

            .clear-button {
                @extend %button;
            }
        }

        .dropdown-button {
            @extend %button;
        }
    }

    &.disabled {
        .input-and-actions {
            border-bottom-color: var(--color-separator);

            .input {
                color: var(--color-text-disabled);
            }

            .actions {
                .dropdown-button {
                    color: var(--color-text-disabled);
                }
            }
        }
    }

    &:not(.disabled) {
        &.show-options,
        &.input-in-focus {
            .input-and-actions {
                border-bottom-color: var(--color-accent);
            }
        }

        &.error {
            .input-and-actions {
                border-bottom-color: var(--color-danger);
            }
        }

        &:not(.hide-clear-button) {
            &.filled {
                .input-and-actions {
                    &:hover {
                        .actions {
                            display: flex;
                        }
                    }
                }
            }
        }
    }
}