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


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

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

@offcanvas-bar-background:                      @global-secondary-background;
@offcanvas-bar-width:                           300px;

@offcanvas-panel-margin:                        20px 40px;
@offcanvas-panel-color:                         @global-contrast-color;
@offcanvas-panel-title-color:                   @global-contrast-color;
@offcanvas-panel-link-color:                    @global-link-color;
@offcanvas-panel-link-hover-color:              @global-link-hover-color;

@offcanvas-background:                          rgba(0, 0, 0, 0.3);


// Component
// ========================================================================

.hook-offcanvas() {}


// Sub-object `uk-offcanvas-bar`
// ========================================================================

.hook-offcanvas-bar() {}


// Panel in offcanvas
// ========================================================================

.hook-offcanvas-panel() {}


// Miscellaneous
// ========================================================================

.hook-offcanvas-misc() {

    .uk-nav-offcanvas {
        ul.uk-nav-sub {
            background: @global-transparent;
            
            .uk-nav-header {
                padding: 10px 0;
            }
        }

        > li {
            background: @offcanvas-bar-background;
            position: relative;
        }
    }


    .uk-offcanvas {

        .uk-search {
            padding-left: 0;

            &:before {
                left: 5px;
                color: @offcanvas-panel-color !important;
            }
        }
        .uk-nav-parent-icon > .uk-parent > a:after {
            text-shadow: 0 1px 0 @global-darkest-shadow;
        }

        input.uk-search-field {
            padding: 0 0 0 40px;
            background: @global-darker-shadow;
            border-radius: @global-border-radius;
            border-color: @global-darkest-shadow;
            font-size: round((@global-font-size*0.85));
            color: @offcanvas-panel-color;
            box-shadow: 0 1px 0 @global-lighter-shadow;
        }

        h1,h2,h3,h4,h5,h6 {
            color: @offcanvas-panel-title-color;
        }
    }

    .uk-offcanvas-bar .uk-parent.uk-open > div {
        overflow: visible !important;
    }

    .tm-toggle-offcanvas {
        padding: 0 !important;
        width: 70px;
        z-index: 5;
        position: absolute;
        height: 40px;
        top: 5px;
        right: 0;

        &:after {
            opacity: 0;
        }
    }
}
