/* stylelint-disable no-descending-specificity */
///
/// Solid State by HTML5 UP
/// html5up.net | @ajlkn
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
///

/* Menu */

#page-wrapper {
    @include vendor('transition', 'filter 0.25s ease');
}

#menu {
    @include vendor('align-items', 'center');
    @include vendor('display', 'flex');
    @include vendor('justify-content', 'center');
    @include vendor('pointer-events', 'none');
    @include vendor('transition', ('opacity #{_duration(menu)} ease', 'visibility #{_duration(menu)}'));
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    background: transparentize(_palette(bg), 0.2);
    cursor: default;
    height: 100%;
    left: 0;
    opacity: 0;
    position: fixed;
    text-align: center;
    top: 0;
    visibility: hidden;
    width: 100%;

    .inner {
        @include padding(2.5em, 1.5em);
        @include vendor('transform', 'translateY(0.5em)');
        @include vendor('transition', ('opacity #{_duration(menu)} ease', 'transform #{_duration(menu)} ease'));
        -webkit-overflow-scrolling: touch;
        background: _palette(accent);
        border-radius: _size(border-radius);
        display: block;
        max-width: 100%;
        opacity: 0;
        position: relative;
        width: 18em;
    }

    h2 {
        border-bottom: solid 2px _palette(border);
        padding-bottom: 1em;
    }

    .close {
        background-image: url('images/close.svg');
        background-position: 75% 25%;
        background-repeat: no-repeat;
        background-size: 2em 2em;
        border: 0;
        content: '';
        display: block;
        height: 4em;
        overflow: hidden;
        position: absolute;
        right: 0;
        text-align: center;
        text-indent: 4em;
        top: 0;
        width: 4em;
    }

    .links {
        list-style: none;
        margin-bottom: (_size(element-margin) - 0.5em);
        padding: 0;

        li {
            padding: 0;

            a {
                border-radius: _size(border-radius);
                border: 0;
                display: block;
                font-family: _font(family-heading);
                font-size: 0.8em;
                font-weight: _font(weight-heading);
                letter-spacing: _font(kern-heading);
                line-height: 1.85em;
                padding: 0.75em 0;
                text-transform: uppercase;

                &:hover {
                    background: saturate(darken(_palette(accent), 3), 1.5);
                }
            }
        }
    }

    @include breakpoint('<=small') {
        .inner {
            max-height: 100%;
            overflow-y: auto;
            overflow-x: hidden;

            .close {
                background-size: 1.5em 1.5em;
            }
        }
    }
}

body.is-menu-visible {
    #page-wrapper {
        @include vendor('filter', 'blur(1.5px)');
    }

    #menu {
        @include vendor('pointer-events', 'auto');
        opacity: 1;
        visibility: visible;

        .inner {
            @include vendor('transform', 'translateY(0)');
            opacity: 1;
        }
    }
}
