@import 'commons';

$m-option-mixed-bgc: rgba(0, 0, 0, 0.33);
$m-option-mixed-bgc--hover: rgba(0, 0, 0, 0.66);

.m-option {
    display: inline-flex;

    &__button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        background: $m-option-mixed-bgc;
        outline: none;
        border: 0;
        transition: background-color $m-transition-duration-lg ease, color $m-transition-duration-lg ease;
        color: $m-color-grey-light;

        &:not(:disabled) {

            &:hover,
            &:focus {
                color: $m-color-white;
                background: $m-option-mixed-bgc--hover;
                cursor: pointer;
            }

            &:active {
                background: black;
            }
        }
    }

    &__dialog {
        outline: none;
    }

    &__list {
        width: 100%;
        margin: 0;
        padding: 0;
        overflow-x: hidden;
        overflow-y: auto;
        border: 1px solid $m-color-border;
        border-radius: $m-border-radius-sm;
        background: $m-color-white;
        box-shadow: $m-box-shadow;
        list-style: none;

        @media (min-width: $m-mq-min-sm) {
            max-height: 243px; // Magic number: height of 4 items
        }

        @include m-scrollbar();
    }

    &__close-menu-item {
        &:not(.m--is-visible) {
            @include m-visually-hidden();
        }

        &.m--is-visible {
            width: 100%;
            padding: $m-space-2xs $m-space $m-space-xs $m-space;

            @media (min-width: $m-mq-min-sm) {
                position: absolute;
                bottom: 0;
                padding: $m-space-xs;
                transform: translateY(100%);
            }
        }
    }

    &__close-menu-button {
        @include m-button();
        width: 100%;
        font-family: inherit;
        appearance: none;
        padding: $m-space-xs;

        @include m-font-size('sm');
        @include m-button--secondary();
        @include m-button--hover();
    }
}