// Name:            Dotnav
// Description:     Defines styles for a dot navigation
//
// Component:       `uk-dotnav`
//
// Modifier:        `uk-dotnav-contrast`
//                  `uk-dotnav-vertical`
//
// States:          `uk-active`
//
// Markup:
//
// <!-- uk-dotnav -->
// <ul class="uk-dotnav">
//     <li class="uk-active"><a href=""></a></li>
//     <li><a href=""></a></li>
// </ul>
//
// ========================================================================


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

$dotnav-margin-horizontal:                       15px !default;
$dotnav-margin-vertical:                         $dotnav-margin-horizontal !default;

$dotnav-width:                                   20px !default;
$dotnav-height:                                  $dotnav-width !default;
$dotnav-background:                              rgba(50,50,50,0.1) !default;

$dotnav-hover-background:                        rgba(50,50,50,0.4) !default;
$dotnav-onclick-background:                      rgba(50,50,50,0.6) !default;
$dotnav-active-background:                       rgba(50,50,50,0.4) !default;

$dotnav-contrast-background:                     rgba(255,255,255,0.4) !default;
$dotnav-contrast-hover-background:               rgba(255,255,255,0.7) !default;
$dotnav-contrast-onclick-background:             rgba(255,255,255,0.9) !default;
$dotnav-contrast-active-background:              rgba(255,255,255,0.9) !default;


/* ========================================================================
   Component: Dotnav
 ========================================================================== */

/*
 * 1. Gutter
 * 2. Remove default list style
 */

.uk-dotnav {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    /* 1 */
    margin-left: -$dotnav-margin-horizontal;
    margin-top: -$dotnav-margin-vertical;
    /* 2 */
    padding: 0;
    list-style: none;
}

/*
 * 1. Space is allocated solely based on content dimensions
 * 2. Horizontal gutter is using `padding` so `uk-width-*` classes can be applied
 */

.uk-dotnav > * {
    /* 1 */
    -ms-flex: none;
    -webkit-flex: none;
    flex: none;
    /* 2 */
    padding-left: $dotnav-margin-horizontal;
    margin-top: $dotnav-margin-vertical;
}

/*
 * DEPRECATED IE9 Support
 */

.uk-dotnav:before,
.uk-dotnav:after {
    content: "";
    display: block;
    overflow: hidden;
}

.uk-dotnav:after { clear: both; }

.uk-dotnav > * { float: left; }


/* Items
 ========================================================================== */

/*
 * Items
 * 1. Hide text if present
 */

.uk-dotnav > * > * {
    display: block;
    box-sizing: content-box;
    width: $dotnav-width;
    height: $dotnav-height;
    border-radius: 50%;
    background: $dotnav-background;
    /* 1 */
    text-indent: 100%;
    overflow: hidden;
    white-space: nowrap;
    @include hook-dotnav-item();
}

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

.uk-dotnav > * > :hover,
.uk-dotnav > * > :focus { // 1
    background: $dotnav-hover-background;
    /* 2 */
    outline: none;
    @include hook-dotnav-item-hover();
}

/* OnClick */
.uk-dotnav > * > :active {
    background: $dotnav-onclick-background;
    @include hook-dotnav-item-onclick();
}

/* Active */
.uk-dotnav > .uk-active > * {
    background: $dotnav-active-background;
    @include hook-dotnav-item-active();
}


/* Modifier: `uk-dotnav-contrast`
 ========================================================================== */

.uk-dotnav-contrast > * > * {
    background: $dotnav-contrast-background;
    @include hook-dotnav-contrast-item();
}

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

.uk-dotnav-contrast > * > :hover,
.uk-dotnav-contrast > * > :focus { // 1
    background: $dotnav-contrast-hover-background;
    @include hook-dotnav-contrast-item-hover();
}

/* OnClick */
.uk-dotnav-contrast > * > :active {
    background: $dotnav-contrast-onclick-background;
    @include hook-dotnav-contrast-item-onclick();
}

/* Active */
.uk-dotnav-contrast > .uk-active > * {
    background: $dotnav-contrast-active-background;
    @include hook-dotnav-contrast-item-active();
}


/* Modifier: 'uk-dotnav-vertical'
 ========================================================================== */

/*
 * DEPRECATED
 */

.uk-dotnav-vertical {
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
}

/*
 * DEPRECATED IE9 Support
 */

.uk-dotnav-vertical > * { float: none; }



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

@include hook-dotnav-misc();

// @mixin hook-dotnav-item(){}
// @mixin hook-dotnav-item-hover(){}
// @mixin hook-dotnav-item-onclick(){}
// @mixin hook-dotnav-item-active(){}
// @mixin hook-dotnav-contrast-item(){}
// @mixin hook-dotnav-contrast-item-hover(){}
// @mixin hook-dotnav-contrast-item-onclick(){}
// @mixin hook-dotnav-contrast-item-active(){}
// @mixin hook-dotnav-misc(){}