//
// 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:                    lighten(@global-primary-background, 5%);
@offcanvas-panel-link-hover-color:              lighten(@global-primary-background, 25%);

@offcanvas-background:                          fade(@global-dark-background, 30%);

@offcanvas-bar-right-width:                     400px;
@offcanvas-bar-close-color:                     @global-color;
@offcanvas-bar-close-hover-color:               @global-primary-background;
@offcanvas-bar-scrollbar-background:            @global-primary-background;

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

.hook-offcanvas() {
    opacity: 0;
    z-index: 9999;
    transition: @global-transition;
    transition-delay: 50ms;

    &.uk-active {
        opacity: 1;
        visibility: visible;
        cursor: url(../../images/close.png), pointer;
        transition: @global-transition;
        transition-delay: 50ms;

        > * {
            cursor: auto;
        }
    }
}


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

.hook-offcanvas-bar() {
    overflow-x: hidden;
}


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

.hook-offcanvas-panel() {

    &.uk-panel-box-secondary {
        color: @panel-box-secondary-color;

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


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

.hook-offcanvas-misc() {

    .uk-nav-offcanvas {
        ul.uk-nav-sub {
            background: rgba(0,0,0,0);
            
            .tm-menu-header,
            .uk-nav-header {
                padding: 10px 0;
                text-transform: none;
                font-family: @global-heading-font-family;
                font-weight: @global-heading-font-weight;
                font-size: @base-h4-font-size;
            }

            .tm-menu-child {
                line-height: 32px;
                padding: 0 20px;
                margin-left: 0px;
                position: relative;
                box-shadow: none;

                &:before {
                    content: "";
                    position: absolute;
                    width: 5px;
                    height: 5px;
                    border-radius: 10px;
                    background-color: @nav-offcanvas-header-color;
                    left: 5px;
                    top: 42%;
                    transition: @global-transition-background;
                }
            }
        }

        > li {
            position: relative;
        }
    }

    .uk-offcanvas {

        .uk-search {

            &:before {
                left: 15px;
            }
        }
        .uk-nav-parent-icon > .uk-parent > a:after {
            text-shadow: 0 1px 0 @global-dark-2-shadow;
        }

        input.uk-search-field {
            padding: 0 0 0 40px;
            font-size: round((@global-font-size*0.85));
            box-shadow: 0 1px 0 @global-light-05-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;
        }
    }
}