/* AdminUI expandable menu


Example: {type: isolated} Example

    <header class="adminui-page-header  adminui-page-header--fill">
        <div class="adminui-page-header__content">
            <a class="adminui-page-header__brand">
                <span class="adminui-page-header__brandname">My brand</span>
            </a>
            <nav class="adminui-page-header__nav">
                <button type="button" class="adminui-page-header__navmenutoggle"
                        data-ievv-jsbase-widget="cradmin-menutoggle">
                    Menu
                    <i class="icon-hamburger" aria-hidden="true" role="presentation">
                        <span aria-hidden="true" class="icon-hamburger__bar"></span>
                        <span aria-hidden="true" class="icon-hamburger__bar"></span>
                        <span aria-hidden="true" class="icon-hamburger__bar"></span>
                    </i>
                </button>
            </nav>
        </div>
    </header>

    <div class="adminui-page-cover"></div>

    <div class="adminui-expandable-menu"
            data-ievv-jsbase-widget="cradmin-toggleable-menu">
        <div class="adminui-expandable-menu__backdrop"
                data-ievv-jsbase-widget="cradmin-menutoggle"></div>

        <div class="adminui-expandable-menu__content">
            <button type="button" class="adminui-expandable-menu__close"
                    data-ievv-jsbase-widget="cradmin-menutoggle">
                <i class="icon-close--light"
                        cradmin_menutoggle_groupid="mainmenu"
                        aria-hidden="true" role="presentation">
                </i>
                <span class="screenreader-only">Close menu</span>
            </button>

            <ul class="adminui-expandable-menu__list">
                <li class="adminui-expandable-menu__listitem">
                    <a href="#" class="adminui-expandable-menu__link">Item 1</a>
                </li>
                <li class="adminui-expandable-menu__listitem">
                    <a href="#" class="adminui-expandable-menu__link">Item 2</a>
                </li>
            </ul>
        </div>
    </div>

Styleguide components.adminui.adminui-expandable-menu
*/

.adminui-expandable-menu {
    position: fixed;
    display: none;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    overflow: auto;
    z-index: $level-3;

    &--expanded {
        display: block;
    }

    &__backdrop {
        @extend %animation-fade-in;
        position: fixed;
        z-index: $level-2;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background-color: rgba(white, 0.85);
    }

    &__close {
        position: absolute;
        top: $spacing;
        right: $spacing;
        min-width: $unit * 14;
        text-align: right;
        line-height: 30px;
        color: $color-light;
    }

    &__content {
        animation: adminui-expandable-menu-open 300ms $swift-out both;

        position: fixed;
        z-index: $level-3;
        padding-top: 80px;
        right: 0;
        top: 0;
        bottom: 0;
        width: 400px;
        max-width: 100%;
        color: $color-light;
        background-color: color(secondary, dark);
    }

    &__list {
        padding: 0 vertical-space($spacing);
    }

    &__listitem {
        animation: adminui-expandable-menu-item 300ms $swift-out both;
        @include animation-delay(8, 60ms, 80ms);
        margin-bottom: vertical-space();
    }

    &__link {
        @include font(base, bold);
        position: relative;
        margin-left: 1em;
        color: $color-light;
        border-bottom: $border-width--small solid transparent;

        &--active,
        &:hover,
        &:focus {
            color: $color-light;
            border-color: $color-light;
        }
    }
}

@keyframes adminui-expandable-menu-open {
    from {
        transform: translateX(100%) skewX(5deg);
        opacity: 0;
    }
}

@keyframes adminui-expandable-menu-item {
    from {
        transform: translateX(100px) skewX(5deg);
        opacity: 0;
    }
}
