@import '../../styles/variables';

.dropdown-menu-element-attached-left,
.dropdown-menu-element-attached-right,
.dropdown-menu-element-attached-center {
    .aria-menu {
        @include bdl-openComponentAnimation($bdl-transitionDurationBase);
    }
}

// Drop down menu is a tethered element and as such attached to body
// however the body may not have box specific classes and hence the
// menu needs to manually inherit few of the body styles to look correct.
.dropdown-menu-element {
    @include box-sizing;
    @include bdl-commonTypography-dejaBlue;

    z-index: $menu-z-index;
    margin-top: 5px;
}

.bdl-DropdownMenu-target {
    display: inline-block;
}

@include breakpoint($medium-screen) {
    .bdl-DropdownMenu--responsive {
        &.dropdown-menu-enabled {
            position: fixed;
            inset: 0;
            margin-top: 0;
            margin-bottom: $bdl-header-height;

            // cancels out the tether inline styling without having to set enabled=false
            transform: none !important;
        }

        .aria-menu:not(.submenu) {
            height: 100%;
            margin-top: $bdl-header-height;
            overflow-x: auto;
            background-color: $bdl-gray-02;
            border: none;
            border-radius: 0;
            box-shadow: none;

            .bdl-MenuHeader {
                position: absolute;
                top: 0;
                right: 0;
                left: 0;
                display: flex;
                height: $bdl-header-height;
                padding: ($bdl-grid-unit * 3);
                background-color: $white;
                box-shadow: $bdl-header-box-shadow;
            }

            .submenu:not(.is-hidden) {
                inset: 100% 0 auto auto;

                &.is-right-bottom-aligned {
                    top: auto;
                    bottom: 100%;
                }
            }
        }
    }
}