toggle-corp/react-store

@import '../../../stylesheets/utils';

.dropdown-container {
    @include shadow-small;
    background-color: var(--color-foreground);
}

.active {
    background-color: var(--color-background-accent-hint);
}

%button-basic {
    outline: none;
    border: 0;
    background-color: transparent;
    text-transform: uppercase;
    color: inherit;
    font-family: inherit;
    font-size: inherit;
}

.dropdown-menu {
    .dropdown-button {
        @extend %button-basic;
        display: flex;
        align-items: center;
        padding: var(--spacing-small) var(--spacing-small-alt);
        width: 100%;
        height: 100%;

        &:hover {
            background-color: var(--color-background-hover);
        }

        .left-icon {
            display: flex;
            align-items: center;
            flex-shrink: 0;
            padding: 0 var(--spacing-extra-small);
        }

        &:not(.disabled) {
            cursor: pointer;
        }

        .dropdown-icon {
            display: flex;
            align-items: center;
            flex-shrink: 0;
            padding: 0 var(--spacing-extra-small);
        }

        .title {
            flex-grow: 1;
        }

        &.has-left {
            .title {
                padding-left: var(--spacing-small);
            }
        }
    }
}