toggle-corp/react-store

@import '../../../stylesheets/input-base';
@import '../../../stylesheets/input-border';

:root {
    --width-multiselect-dropdown-button: 10px;
    --width-multiselect-clear-button: 14px;
    --width-multiselect-select-all-button: 14px;
    --width-dropdown-button: 10px;
    --width-clear-button: 14px;
    --width-select-all-button: 14px;
}


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

        .input {
            width: calc(100% - var(--width-multiselect-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;
            }

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

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

    &:not(.disabled) {
        &.filled {
            &:not(.input-in-focus) {
                .input-and-actions {
                    .input::placeholder {
                        color: var(--color-text);
                    }
                }
            }

            &:not(.hide-clear-button) {
                .input-and-actions {
                    &:hover {
                        .input {
                            width: calc(100% - var(--width-multiselect-dropdown-button) - var(--width-multiselect-clear-button) - var(--spacing-extra-small));
                        }

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

        }

        &:not(.completely-filled) {
            &:not(.hide-select-all-button) {
                .input-and-actions {
                    &:hover {
                        .input {
                            width: calc(100% - var(--width-multiselect-dropdown-button) - var(--width-multiselect-select-all-button) - var(--spacing-extra-small));
                        }

                        .actions {
                            .select-all-button {
                                opacity: 1;
                            }
                        }
                    }
                }
            }

            &.filled:not(.hide-select-all-button):not(.hide-clear-button) {
                &:hover {
                    .input {
                        width: calc(100% - var(--width-multiselect-dropdown-button) - var(--width-multiselect-clear-button) - var(--width-multiselect-select-all-button) - var(--spacing-extra-small));
                    }
                }
            }
        }

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

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

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

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

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