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


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





/* ========================================================================
   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 */
.uk-dotnav > * > :hover {
    background-color: $dotnav-item-hover-background;
    @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
// ========================================================================




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