/* @docs */
$dropdown-disabled-opacity: $base-disabled-opacity !default;
$dropdown-item-active-background-color: $primary !default;
$dropdown-item-active-color: $primary-invert !default;
$dropdown-item-color: #000000 !default;
$dropdown-item-disabled-opacity: $base-disabled-opacity !default;
$dropdown-item-font-size: $base-font-size !default;
$dropdown-item-hover-background-color: #f5f5f5 !default;
$dropdown-item-hover-color: #000000 !default;
$dropdown-item-line-height: $base-line-height !default;
$dropdown-item-padding: .375rem 1rem !default;
$dropdown-item-font-weight: 400 !default;
$dropdown-menu-background: #ffffff !default;
$dropdown-menu-border-radius: $base-border-radius !default;
$dropdown-menu-box-shadow: 0 0.5em 1em -0.125em rgba(10,10,10,.1), 0 0 0 1px rgba(10,10,10,.02) !default;
$dropdown-menu-margin: 0 !default;
$dropdown-menu-padding: .5rem 0 .5rem 0 !default;
$dropdown-menu-width: 12rem !default;
$dropdown-menu-zindex: 20 !default;
$dropdown-mobile-max-height: calc(100vh - 120px) !default;
$dropdown-mobile-max-width: 460px !default;
$dropdown-mobile-overlay-color: rgba(#000000, 0.86) !default;
$dropdown-mobile-overlay-zindex: 40!default;
$dropdown-mobile-width: calc(100vw - 40px) !default;
$dropdown-mobile-zindex: 50 !default;
/* @docs */

.o-drop {
    display: inline-flex;
    position: relative;
    vertical-align: top;
    &--inline {
        display: inline;
        .o-drop__menu {
            position: static;
            display: inline-block;
            padding: 0;
        }
    }
    &__overlay {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        top: 0;
        cursor: pointer;
        display: none;
        @include avariable('background-color', 'dropdown-mobile-overlay-color', $dropdown-mobile-overlay-color);
        @include avariable('z-index', 'dropdown-mobile-overlay-zindex', $dropdown-mobile-overlay-zindex);
    }
    &__trigger {
        width: 100%;
    }
    &__menu {
        position: absolute;
        left: 0;
        top: 100%;
        display: block;
        @include avariable('min-width', 'dropdown-menu-width', $dropdown-menu-width);
        @include avariable('z-index', 'dropdown-menu-zindex', $dropdown-menu-zindex);
        @include avariable('background-color', 'dropdown-menu-background', $dropdown-menu-background);
        @include avariable('border-radius', 'dropdown-menu-border-radius', $dropdown-menu-border-radius);
        @include avariable('box-shadow', 'dropdown-menu-box-shadow', $dropdown-menu-box-shadow);
        @include avariable('padding', 'dropdown-menu-padding', $dropdown-menu-padding);
        @include avariable('margin', 'dropdown-menu-margin', $dropdown-menu-margin);
        &--top-left {
            top: auto;
            bottom: 100%;
            right: 0;
            left: auto;
        }
        &--bottom-left {
            right: 0;
            left: auto;
        }
        &--top-right {
            top: auto;
            bottom: 100%;
        }
    }
    &__item {
        display: block;
        position: relative;
        cursor: pointer;
        @include avariable('color', 'dropdown-item-color', $dropdown-item-color);
        @include avariable('font-size', 'dropdown-item-font-size', $dropdown-item-font-size);
        @include avariable('font-weight', 'dropdown-item-font-weight', $dropdown-item-font-weight);
        @include avariable('line-height', 'dropdown-item-line-height', $dropdown-item-line-height);
        @include avariable('padding', 'dropdown-item-padding', $dropdown-item-padding);
        &--disabled {
            @include avariable('opacity', 'dropdown-item-disabled-opacity', $dropdown-item-disabled-opacity);
            pointer-events: none;
        }
        &--active {
            @include avariable('background-color', 'dropdown-item-active-background-color', $dropdown-item-active-background-color);
            @include avariable('color', 'dropdown-item-active-color', $dropdown-item-active-color);
        }
        &:hover:not(&--active) {
            @include avariable('background-color', 'dropdown-item-hover-background-color', $dropdown-item-hover-background-color);
            @include avariable('color', 'dropdown-item-hover-color', $dropdown-item-hover-color);
        }
    }
    &--expanded {
        width: 100%;
        .o-drop__menu {
            width: 100%;
        }
    }
    &--disabled {
        @include avariable('opacity', 'dropdown-disabled-opacity', $dropdown-disabled-opacity);
        pointer-events: none;
    }
    &--mobile {
        > .o-drop__menu {
            position: fixed;
            top: 25%;
            left: 50%;
            bottom: auto;
            right: auto;
            transform: translate3d(-50%, -25%, 0);
            overflow-y: auto;
            @include avariable('width', 'dropdown-mobile-width', $dropdown-mobile-width);
            @include avariable('max-width', 'dropdown-mobile-max-width', $dropdown-mobile-max-width);
            @include avariable('max-height', 'dropdown-mobile-max-height', $dropdown-mobile-max-height);
            @include avariable('z-index', 'dropdown-mobile-zindex', $dropdown-mobile-zindex);
        }
        > .o-drop__overlay {
            display: block;
        }
    }
}