toggle-corp/react-store

// TODO: move this to js 
:root {
    --width-select-input-dropdown-button: 10px;
    --width-select-input-clear-button: 14px;
    --width-dropdown-button: 10px;
    --width-clear-button: 14px;
}

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

        .input {
            width: calc(100% - var(--width-select-input-dropdown-button) - var(--spacing-extra-small));
        }

        .actions {
            display: flex;
            position: absolute;
            top: var(--spacing-extra-small);
            right: 0;
            align-items: center;
            height: calc(100% - var(--spacing-extra-small) * 2);

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

            .clear-button {
                @extend %button;
                opacity: 0;
            }

            .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 {
                        .input {
                            width: calc(100% - var(--width-select-input-dropdown-button) - var(--width-select-input-clear-button) - var(--spacing-extra-small));
                        }

                        .actions {
                            .clear-button {
                                opacity: 1;
                            }
                        }
                    }
                }
            }
        }
    }
}