// Name:            Dotnav
// Description:     Component to create dot navigations
//
// Component:       `uk-dotnav`
//
// Modifier:        `uk-dotnav-vertical`
//
// States:          `uk-active`
//
// ========================================================================


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

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

$dotnav-item-width:                              10px !default;
$dotnav-item-height:                             $dotnav-item-width !default;
$dotnav-item-border-radius:                      50% !default;

$dotnav-item-background:                         rgba($global-color, 0.2) !default;
$dotnav-item-hover-background:                   rgba($global-color, 0.6) !default;
$dotnav-item-onclick-background:                 rgba($global-color, 0.2) !default;
$dotnav-item-active-background:                  rgba($global-color, 0.6) !default;


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

/*
 * 1. Allow items to wrap into the next line
 * 2. Reset list
 * 3. Gutter
 */

.uk-dotnav {
    display: flex;
    /* 1 */
    flex-wrap: wrap;
    /* 2 */
    margin: 0;
    padding: 0;
    list-style: none;
    /* 3 */
    margin-left: (-$dotnav-margin-horizontal);
    @if(mixin-exists(hook-dotnav)) {@include hook-dotnav();}
}

/*
 * 1. Space is allocated solely based on content dimensions: 0 0 auto
 * 2. Gutter
 */

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


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

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

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

/* Hover + Focus */
.uk-dotnav > * > :hover,
.uk-dotnav > * > :focus {
    background-color: $dotnav-item-hover-background;
    outline: none;
    @if(mixin-exists(hook-dotnav-item-hover)) {@include hook-dotnav-item-hover();}
}

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

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


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

/*
 * 1. Change direction
 * 2. Gutter
 */

.uk-dotnav-vertical {
    /* 1 */
    flex-direction: column;
    /* 2 */
    margin-left: 0;
    margin-top: (-$dotnav-margin-vertical);
}

/* 2 */
.uk-dotnav-vertical > * {
    padding-left: 0;
    padding-top: $dotnav-margin-vertical;
}


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

@if(mixin-exists(hook-dotnav-misc)) {@include hook-dotnav-misc();}

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


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

$inverse-dotnav-item-background:                rgba($inverse-global-color, 0.5) !default;
$inverse-dotnav-item-hover-background:          rgba($inverse-global-color, 0.9) !default;
$inverse-dotnav-item-onclick-background:        rgba($inverse-global-color, 0.5) !default;
$inverse-dotnav-item-active-background:         rgba($inverse-global-color, 0.9) !default;



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