// Copyright (C) YOOtheme GmbH, YOOtheme Proprietary Use License (http://www.yootheme.com/license) */

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


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

@slidenav-width:                                50px;
@slidenav-height:                               @slidenav-width;
@slidenav-font-size:                            @slidenav-width;
@slidenav-line-height:                          (@slidenav-height - 2px);

@slidenav-position-previous:                    @global-grid-gutter;
@slidenav-position-next:                        @slidenav-position-previous;

@slidenav-color:                                fade(@global-secondary-background, 25%);
@slidenav-hover-color:                          @global-secondary-background;
@slidenav-active-color:                         @global-secondary-background;

@slidenav-contrast-color:                       @global-contrast-color;
@slidenav-contrast-hover-color:                 fade(@slidenav-contrast-color, 70%);
@slidenav-contrast-active-color:                @slidenav-contrast-color;

//
// New
//

@slidenav-effect-width:                         50px;
@slidenav-effect-background:                    fade(@slidenav-color, 15%);
@slidenav-contrast-effect-background:           fade(@slidenav-contrast-color, 15%);


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

.hook-slidenav() {

    position: relative;
    -webkit-transition: @global-transition;
    transition: @global-transition;
    -webkit-transform: @global-transform;
    transform: @global-transform;

    // Effect style
    &::after {
        position: absolute;
        top: 50%;
        left: 50%;
        content: '';
        margin: -(@slidenav-effect-width / 2) 0 0 -(@slidenav-effect-width / 2);
        width: @slidenav-effect-width;
        height: @slidenav-effect-width;
        border-radius: 50%;
        background: @slidenav-effect-background;
        opacity: 0;
    }

}

.hook-slidenav-hover() {
    -webkit-transform: @global-hover-transform;
    transform: @global-hover-transform;
}

.hook-slidenav-active() {
    -webkit-transform: @global-active-transform;
    transform: @global-active-transform;
}

.hook-slidenav-contrast() {

    // Effect style
    &::after { background: @slidenav-contrast-effect-background; }

}

.hook-slidenav-contrast-hover() {}

.hook-slidenav-contrast-active() {}


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

.hook-slidenav-misc() {

    // Effect on click event 'uk-ripple'
    .uk-slidenav:active::after {
        -webkit-animation: @global-ripple-animation;
        animation: @global-ripple-animation;
    }

}
