/* Off-canvas sidebars */
$_canvas_toggle_width: 44px;
$_canvas_toggle_height: 28px;
$_canvas_toggle_top: 10px;
$_canvas_toggle_translate: $_canvas_toggle_top + $_canvas_toggle_height;

$_canvas_anim_duration: 0.5s;


html {
    height: 100%;
    overflow-x: hidden;
    overflow-y: scroll;
}

.g1-body-inner {
    position: relative;
    z-index: 1;

    //@include transition( transform $_canvas_anim_duration cubic-bezier(0.735, 0.185, 0.410, 1.245) );
    @include transition( transform $_canvas_anim_duration ease-in-out );
}


.g1-canvas-overlay {
    display: block;
    visibility: hidden;

    position: absolute;
    z-index: 998;
    top: 0;
    #{$left}: 0;
    #{$right}: auto;


    width: 100%;
    height: 100%;

    cursor: pointer;

    @include transition(
            visibility 0s ease-in-out $_canvas_anim_duration,
            opacity $_canvas_anim_duration cubic-bezier(0.735, 0.185, 0.410, 1.245)
    );

    background-color: #000;
    opacity: 0;
}

.g1-canvas {
    visibility: hidden;
    //@include box-sizing( border-box ); IE9 doesn't like it with overflow

    position: absolute;
    top: 0;
    z-index: 0;
    #{$left}: 0;
    #{$right}: auto;

    width: 320px;
    max-width: 100vw;
    height: 100%;

    background-color: $skin_background_color;
    overflow-y: auto;
    -ms-overflow-style: none;
    -ms-overflow-style: -ms-autohiding-scrollbar;

    @include transition(
        visibility 0s ease-in-out $_canvas_anim_duration
    );

    > .g1-canvas-content {
        position:relative;
        margin: 48px 30px 30px;
    }
}


.g1-canvas-toggle {
    @include box-sizing( border-box );
    display: block;
    width: $_canvas_toggle_width;
    height: $_canvas_toggle_height;
    margin-#{$left}: -$_canvas_toggle_width/2;

    position: absolute;
    #{$left}: 50%;
    #{$right}: auto;
    top: $_canvas_toggle_top;
    z-index: 1;

    line-height: $_canvas_toggle_height - 2px;
    text-align: center;

    @include border-radius( $ui_border_radius );

    @include transition(
            border-color 0.375s ease-in-out,
            background-color 0.375s ease-in-out,
            color 0.375s ease-in-out,
            opacity 0.375s ease-in-out
    );

    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;

    &:hover {
        opacity: 0.666;
    }

    &:before {
        display: inline-block;
        position: absolute;
        #{$left}: 0;
        #{$right}: auto;
        top: 50%;
        width: 100%;
        margin-top: -0.5em;

        font-size: 24px;
        line-height: 1;
        font-family: "bimber", sans-serif;
        font-weight: normal;

        content: "\e01b";
    }
}



html.g1-off-global {
    overflow: hidden;

    body {
        height: 100%;
        overflow: hidden;
    }

    .g1-body-inner {
        @include translate( if-ltr(320px, -320px), 0 );
    }

    .g1-canvas {
        visibility: visible;

        -webkit-overflow-scrolling: touch;

        @include transition(
            visibility 0s ease-in-out
        );
    }

    .g1-canvas-overlay {
        display: block;
        visibility: visible;
        opacity: 0.666;

        @include transition(
                visibility $_canvas_anim_duration ease-in-out,
                opacity $_canvas_anim_duration cubic-bezier(0.735, 0.185, 0.410, 1.245)
        );
    }
}


.g1-canvas {
    .search-form-wrapper {
        margin: 0 -30px 30px;
        padding: 10px;
        border-width: 0 0 1px 0;

        border-style: solid;
        border-color: $skin_border_color;
    }

    .search-form {
        margin-bottom: 0;
    }

    .g1-quick-nav {
        margin-bottom: 1.5rem;
    }
}

.g1-canvas-snax {
    padding: 10px 30px;
    border-width: 1px 0 0;
    margin: 0 -30px;

    border-style: solid;
    border-color: $skin_border_color;
}




// Prevent onverflow on smaller deveices
.g1-socials-item-tooltip {
    display: none !important;
}


.g1-socials-item-link {
    color: inherit;
}