@import '../libs/vars'; @import '../libs/functions'; @import '../libs/mixins';

/// /// Lens by HTML5 UP /// html5up.net | @ajlkn /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) ///

/* Main */

#main {
        @include vendor('transition', ('opacity #{_duration(layout)} ease', 'right #{_duration(layout)} ease', 'left #{_duration(layout)} ease', 'visibility #{_duration(layout)}'));
        -webkit-overflow-scrolling: touch;
        position: fixed;
        top: 0;
        width: _size(main);
        height: 100%;
        background: _palette(bg);
        outline: 0;
        overflow-x: hidden;
        overflow-y: auto;
        text-align: _misc(main-align);
        visibility: visible;
        z-index: _misc(z-index-base);
        @if _misc(main-side) == 'left' {
                left: 0;
        }
        @else {
                right: 0;
        }
        .toggle {
                -webkit-tap-highlight-color: rgba(0,0,0,0);
                position: absolute;
                top: 0;
                width: 4em;
                height: 4em;
                background-image: url('images/close-small-alt.svg');
                background-repeat: no-repeat;
                background-size: 32px 32px;
                cursor: pointer;
                display: none;
                z-index: 1;
                @if _misc(main-side) == 'left' {
                        background-position: calc(100% - 0.5em) 0.5em;
                        right: 0;
                }
                @else {
                        background-position: 0.5em 0.5em;
                        left: 0;
                }
        }
        body.fullscreen & {
                visibility: hidden;
                @if _misc(main-side) == 'left' {
                        left: (_size(main) * -1);
                }
                @else {
                        right: (_size(main) * -1);
                }
        }
        body.is-loading-1 & {
                opacity: 0;
                @if _misc(main-side) == 'left' {
                        left: -2em;
                }
                @else {
                        right: -2em;
                }
        }
        @include breakpoint(large) {
                width: _size(main-alt);
                body.fullscreen & {
                        @if _misc(main-side) == 'left' {
                                left: (_size(main-alt) * -1);
                        }
                        @else {
                                right: (_size(main-alt) * -1);
                        }
                }
        }
        @include breakpoint(medium) {
                background: transparentize(_palette(bg), 0.075);
                .toggle {
                        display: block;
                }
        }
        @include breakpoint(xsmall) {
                @include vendor('transition', ('opacity #{_duration(layout-alt)} ease', 'visibility #{_duration(layout-alt)}'));
                width: 100%;
                background: _palette(bg);
                text-align: center;
                body.is-loading-1 & {
                        left: auto !important;
                        right: auto !important;
                }
                body.fullscreen & {
                        left: auto !important;
                        right: auto !important;
                        opacity: 0;
                }
                .toggle {
                        display: none;
                }
        }
}