// Name:            Subnav
// Description:     Defines styles for the sub navigation
//
// Component:       `uk-subnav`
//
// Modifiers:       `uk-subnav-line`
//                  `uk-subnav-pill`
//
// States:          `uk-active`
//
// ========================================================================


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

@subnav-margin:                                 10px;
@subnav-color:                                  #07D;
@subnav-hover-color:                            #059;
@subnav-disabled-color:                         #999;

@subnav-line-border-height:                     10px;
@subnav-line-border:                            #ddd;

@subnav-pill-hover-background:                  #eee;
@subnav-pill-hover-color:                       #444;
@subnav-pill-active-background:                 #00a8e6;
@subnav-pill-active-color:                      #fff;


/* ========================================================================
   Component: Subnav
 ========================================================================== */

/*
 * 1. Remove default list style
 * 2. Remove whitespace between child elements when using `inline-block`
 */

.uk-subnav {
    /* 1 */
    padding: 0;
    list-style: none;
    /* 2 */
    letter-spacing: -0.31em;
}


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

/*
 * 1. Create position context for dropdowns
 * 2. Reset whitespace hack
 */

.uk-subnav > li {
    position: relative; /* 1 */
    letter-spacing: normal; /* 2 */
}

.uk-subnav > li,
.uk-subnav > li > a,
.uk-subnav > li > span { display: inline-block; }

.uk-subnav > li:nth-child(n+2) { margin-left: @subnav-margin; }

/*
 * Items
 */

.uk-subnav > li > a { color: @subnav-color; }
.uk-subnav > li > a:hover { color: @subnav-hover-color; }


/*
 * Disabled
 */

.uk-subnav > li > span { color: @subnav-disabled-color; }


/* Modifier: 'subnav-line'
 ========================================================================== */

.uk-subnav-line > li:nth-child(n+2):before {
    content: "";
    display: inline-block;
    height: @subnav-line-border-height;
    margin-right: @subnav-margin;
    border-left: 1px solid @subnav-line-border;
    .hook-subnav-line-divider;
}


/* Modifier: 'subnav-pill'
 ========================================================================== */

.uk-subnav-pill > li > a,
.uk-subnav-pill > li > span {
    padding: 3px 9px;
    text-decoration: none;
    .hook-subnav-pill;
}

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

.uk-subnav-pill > li > a:hover,
.uk-subnav-pill > li > a:focus { /* 1 */
    background: @subnav-pill-hover-background;
    color: @subnav-pill-hover-color;
    outline: none; /* 2 */
    .hook-subnav-pill-hover;
}

/*
 * Active
 * `li` needed for higher specificity to override hover
 */

.uk-subnav-pill > li.uk-active > a {
    background: @subnav-pill-active-background;
    color: @subnav-pill-active-color;
    .hook-subnav-pill-active;
}


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

.hook-subnav-misc;

.hook-subnav-line-divider() {}
.hook-subnav-pill() {}
.hook-subnav-pill-hover() {}
.hook-subnav-pill-active() {}
.hook-subnav-misc() {}