//
// Component: Slidenav
//
// ========================================================================


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

//
// New
//

@slidenav-background:                           transparent;
@slidenav-hover-background:                     transparent;
@slidenav-active-background:                    transparent;

@internal-slidenav-next-previous-mode:          ; // animate

@slidenav-margin:                               0;


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

.hook-slidenav() {
    background: @slidenav-background;
    transition: 0.1s ease-in-out;
    transition-property: color, background-color, border-color, box-shadow;
}

.hook-slidenav-hover() { background-color: @slidenav-hover-background; }

.hook-slidenav-active() { background-color: @slidenav-active-background; }


// Icon modifier
// ========================================================================

//
// Animate
//

.hook-slidenav() when (@internal-slidenav-next-previous-mode = animate) {
    overflow: hidden;
}

.hook-slidenav-previous() when (@internal-slidenav-next-previous-mode = animate) {
    
    &:hover svg { animation: uk-fade-left 0.3s reverse, uk-fade-right 0.2s 0.3s; }

}

.hook-slidenav-next() when (@internal-slidenav-next-previous-mode = animate) {

    &:hover svg { animation: uk-fade-right 0.3s reverse, uk-fade-left 0.2s 0.3s; }

}


// Size modifier
// ========================================================================

.hook-slidenav-large() {}


// Container
// ========================================================================

.hook-slidenav-container() when not (@slidenav-margin = 0) {

    > :first-child { margin-right: @slidenav-margin; }

}


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

.hook-icon-misc() {}


// Inverse
// ========================================================================

@inverse-slidenav-background:                           transparent;
@inverse-slidenav-hover-background:                     transparent;
@inverse-slidenav-active-background:                    transparent;

.hook-inverse-slidenav() { background-color: @inverse-slidenav-background; }
.hook-inverse-slidenav-hover() { background-color: @inverse-slidenav-hover-background; }
.hook-inverse-slidenav-active() { background-color: @inverse-slidenav-active-background; }