// Name:            Slidenav
// Description:     Defines styles for a previous/next navigation between slides
//
// Component:       `wk-slidenav`
//
// Modifiers:       `wk-slidenav-previous`
//                  `wk-slidenav-next`
//                  `wk-slidenav-contrast`
//
// Sub-objects:     `wk-slidenav-position`
//
// Uses:            Icon: FontAwesome
//
// Markup:
//
// <!-- wk-slidenav -->
// <a href="" class="wk-slidenav wk-slidenav-previous"></a>
// <a href="" class="wk-slidenav wk-slidenav-next"></a>
//
// <!-- wk-slidenav-position -->
// <div class="wk-slidenav-position">
//     <img src="" alt="">
//     <a href="" class="wk-slidenav wk-slidenav-previous"></a>
//     <a href="" class="wk-slidenav wk-slidenav-next"></a>
// </div>
//
// ========================================================================


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

@slidenav-width:                                60px;
@slidenav-height:                               @slidenav-width;
@slidenav-color:                                rgba(50,50,50,0.4);
@slidenav-font-size:                            60px;
@slidenav-line-height:                          @slidenav-height;
@slidenav-previous-icon:                        "\f104";
@slidenav-next-icon:                            "\f105";

@slidenav-hover-color:                          rgba(50,50,50,0.7);

@slidenav-active-color:                         rgba(50,50,50,0.9);

@slidenav-position-previous:                    20px;
@slidenav-position-next:                        @slidenav-position-previous;

@slidenav-contrast-color:                       rgba(255,255,255,0.5);
@slidenav-contrast-hover-color:                 rgba(255,255,255,0.7);
@slidenav-contrast-active-color:                rgba(255,255,255,0.9);


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

/*
 * 1. Required for `a` elements
 * 2. Dimension
 * 3. Style
 */

.wk-slidenav {
    /* 1 */
    display: inline-block;
    /* 2 */
    box-sizing: border-box;
    width: @slidenav-width;
    height: @slidenav-height;
    /* 3 */
    line-height: @slidenav-line-height;
    color: @slidenav-color;
    font-size: @slidenav-font-size;
    text-align: center;
    .hook-slidenav;
}

/*
 * Hover
 * 1. Apply hover style also to focus state
 * 2. Remove default focus style
 * 3. Required for `a` elements
 * 4. Style
 */

.wk-slidenav:hover,
.wk-slidenav:focus { // 1
    /* 2 */
    outline: none;
    /* 3 */
    text-decoration: none;
    /* 4 */
    color: @slidenav-hover-color;
    cursor: pointer;
    .hook-slidenav-hover;
}

/* Active */
.wk-slidenav:active {
    color: @slidenav-active-color;
    .hook-slidenav-active;
}

/*
 * Icons
 */

.wk-slidenav-previous:before {
    content: @slidenav-previous-icon;
    font-family: FontAwesome;
}

.wk-slidenav-next:before {
    content: @slidenav-next-icon;
    font-family: FontAwesome;
}


/* Sub-object: `wk-slidenav-position`
 ========================================================================== */

/*
 * Create position context
 */

.wk-slidenav-position { position: relative; }

/*
 * Center vertically
 */

.wk-slidenav-position .wk-slidenav {
    display: none;
    position: absolute;
    top: 50%;
    z-index: 1;
    margin-top: -(@slidenav-height / 2);
}

.wk-slidenav-position:hover .wk-slidenav { display: block; }

.wk-slidenav-position .wk-slidenav-previous { left: @slidenav-position-previous; }
.wk-slidenav-position .wk-slidenav-next { right: @slidenav-position-next; }


/* Modifier: `wk-slidenav-contrast`
 ========================================================================== */

.wk-slidenav-contrast {
    color: @slidenav-contrast-color;
    .hook-slidenav-contrast;
}

/*
 * Hover
 * 1. Apply hover style also to focus state
 */

.wk-slidenav-contrast:hover,
.wk-slidenav-contrast:focus { // 1
    color: @slidenav-contrast-hover-color;
    .hook-slidenav-contrast-hover;
}

/* Active */
.wk-slidenav-contrast:active {
    color: @slidenav-contrast-active-color;
    .hook-slidenav-contrast-active;
}


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

.hook-slidenav-misc;

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