// Name:            Off-canvas
// Description:     Component to create an off-canvas sidebar
//
// Component:       `uk-offcanvas`
//
// Sub-objects:     `uk-offcanvas-page`
//                  `uk-offcanvas-overlay`
//                  `uk-offcanvas-bar`
//
// Modifiers:       `uk-offcanvas-flip`
//                  `uk-offcanvas-page-animation`
//                  `uk-offcanvas-page-overlay`
//                  `uk-offcanvas-bar-animation`
//                  `uk-offcanvas-reveal`
//
// States:          `uk-open`
//
// ========================================================================


// Variables
// ========================================================================

@offcanvas-z-index:                             @global-z-index;

@offcanvas-overlay-background:                  rgba(0,0,0,0.1);

@offcanvas-bar-width:                           270px;
@offcanvas-bar-padding-vertical:                @global-margin;
@offcanvas-bar-padding-horizontal:              @global-margin;
@offcanvas-bar-background:                      @global-secondary-background;
@offcanvas-bar-color-mode:                      light;


/* ========================================================================
   Component: Off-canvas
 ========================================================================== */

/*
 * 1. Hide by default
 * 2. Set position
 */

.uk-offcanvas {
    /* 1 */
    display: none;
    /* 2 */
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: @offcanvas-z-index;
}

/*
 * Flip modifier
 */

.uk-offcanvas-flip .uk-offcanvas {
    right: 0;
    left: auto;
}


/* Page
 ========================================================================== */

/*
 * 1. Prepare slide-out animation (Used in reveal and push mode)
 * 2. Prevent horizontal scrollbar when page is slide-out
 * Note: JS sets a fixed width so the page can slide-out without shinking
 */

.uk-offcanvas-page {
    /* 1 */
    -webkit-transition: margin-left 0.3s ease-in-out;
    transition: margin-left 0.3s ease-in-out;
    /* 2 */
    overflow-x: hidden;
}

/*
 * Activate slide-out animation
 */

.uk-offcanvas-page-animation { margin-left: @offcanvas-bar-width; }

/* Flip modifier */
.uk-offcanvas-flip.uk-offcanvas-page-animation { margin-left: -@offcanvas-bar-width; }

/*
 * Prevent scrollbar on page if overlay is used
 */

.uk-offcanvas-page-overlay { overflow: hidden; }


/* Overlay
 ========================================================================== */

/*
 * Overlay the whole page. Needed for the `::before`
 * Using `100vw` so no modification is needed when off-canvas is flipped
 */

.uk-offcanvas-overlay { width: 100vw; }

/*
 * 1. Mask the whole page
 * 2. Fade-in transition
 */

.uk-offcanvas-overlay::before {
    /* 1 */
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: @offcanvas-overlay-background;
    /* 2 */
    opacity: 0;
    -webkit-transition: opacity 0.15s linear;
    transition: opacity 0.15s linear;
    .hook-offcanvas-overlay;
}

.uk-offcanvas-overlay.uk-open::before { opacity: 1; }


/* Bar
 ========================================================================== */

/*
 * 1. Set position
 * 2. Size and style
 * 3. Allow scrolling
 * 4. Transform
 */

.uk-offcanvas-bar {
    /* 1 */
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    /* 2 */
    box-sizing: border-box;
    width: @offcanvas-bar-width;
    padding: @offcanvas-bar-padding-vertical @offcanvas-bar-padding-horizontal;
    background: @offcanvas-bar-background;
    /* 3 */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* 4 */
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
    .hook-offcanvas-bar;
}

// Color Mode
.uk-offcanvas-bar:extend(.uk-light all) when (@offcanvas-bar-color-mode = light) {}
.uk-offcanvas-bar:extend(.uk-dark all) when (@offcanvas-bar-color-mode = dark) {}

/* Flip modifier */
.uk-offcanvas-flip .uk-offcanvas-bar {
    left: auto;
    right: 0;
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
}

/*
 * Open
 */

.uk-open > .uk-offcanvas-bar {
    -webkit-transform: translateX(0);
    transform: translateX(0);
}

/*
 * Slide Animation (Used in slide and push mode)
 */

.uk-offcanvas-bar-animation {
    -webkit-transition: -webkit-transform 0.3s ease-in-out;
    transition: transform 0.3s ease-in-out;
}

/*
 * Reveal Animation
 * 1. Set the bar to target position
 * 2. Clip the bar with `clip-path` and use `clip` as fallback
 * 3. Animation
 * Note: Future `clip-path` is commented out (it's not working on iOS)
 */

.uk-offcanvas-reveal {
    /* 1 */
    -webkit-transform: translateX(0);
    transform: translateX(0);
    /* 2 */
    clip: rect(0, 0, 100vh, 0);
    //-webkit-clip-path: inset(0 @offcanvas-bar-width 0 0);
    //clip-path: inset(0 @offcanvas-bar-width 0 0);
    /* 3 */
    -webkit-transition: clip 0.3s ease-in-out; //, -webkit-clip-path 0.3s ease-in-out;
    transition: clip 0.3s ease-in-out; //, -webkit-clip-path 0.3s ease-in-out, clip-path 0.3s ease-in-out;
}

/* Fix weird scrollbar bug in Chrome if overlay is used */
.uk-offcanvas-page:not(.uk-offcanvas-flip) .uk-offcanvas-reveal {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.uk-open > .uk-offcanvas-reveal {
    clip: rect(0, @offcanvas-bar-width, 100vh, 0);
    //-webkit-clip-path: inset(0);
    //clip-path: inset(0);
}

/* Flip modifier */
.uk-offcanvas-flip .uk-offcanvas-reveal {
    /* 1 */
    -webkit-transform: translateX(0);
    transform: translateX(0);
    /* 2 */
    clip: rect(0, @offcanvas-bar-width, 100vh, @offcanvas-bar-width);
    //-webkit-clip-path: inset(0 0 0 @offcanvas-bar-width);
    //clip-path: inset(0 0 0 @offcanvas-bar-width);
}

.uk-offcanvas-flip .uk-open > .uk-offcanvas-reveal {
    clip: rect(0, @offcanvas-bar-width, 100vh, 0);
    //-webkit-clip-path: inset(0);
    //clip-path: inset(0);
}


// Hooks
// ========================================================================

.hook-offcanvas-misc;

.hook-offcanvas-overlay() {}
.hook-offcanvas-bar() {}
.hook-offcanvas-misc() {}
