// Name:            Slidenav
// Description:     Defines styles for a previous/next navigation between slides
//
// Component:       `uk-slidenav`
//
// Modifiers:       `uk-slidenav-previous`
//                  `uk-slidenav-next`  
//
// Sub-objects:     `uk-slidenav-position`
//
// Uses:            Icon: FontAwesome
//
// ========================================================================


// 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;


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

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

.uk-slidenav {
    /* 1 */
    display: inline-block;
    /* 2 */
    -moz-box-sizing: border-box;
    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
 */

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

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

/*
 * Icons
 */

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

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


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

/*
 * 1. Container width fits its content
 * 2. Corrects max-width behavior (3.) if padding and border are used
 * 3. Responsive behavior
 * 4. Create position context for dropdowns
 */

.uk-slidenav-position {
    /* 1 */
    display: inline-block;
    /* 2 */
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    /* 3 */
    max-width: 100%;
    /* 4 */
    position: relative;
}

/*
 * Center vertically
 */

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

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

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


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

.hook-slidenav-misc;

.hook-slidenav() {}
.hook-slidenav-previous() {}
.hook-slidenav-next() {}
.hook-slidenav-hover() {}
.hook-slidenav-active() {}
.hook-slidenav-misc() {}