// Name:            Subnav
// Description:     Component to create a sub navigation
//
// Component:       `uk-subnav`
//
// Modifiers:       `uk-subnav-divider`
//                  `uk-subnav-pill`
//
// States:          `uk-active`
//                  `uk-first-column`
//
// ========================================================================


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

@subnav-margin-horizontal:                      20px;

@subnav-item-color:                             #999;
@subnav-item-hover-color:                       lighten(@global-color, 5%);
@subnav-item-hover-text-decoration:             none;
@subnav-item-active-color:                      @global-color;

@subnav-line-margin-horizontal:                 @subnav-margin-horizontal;
@subnav-line-border-height:                     1.5em;
@subnav-line-border-width:                      1px;
@subnav-line-border:                            @global-border;

@subnav-pill-item-padding-vertical:             6px;
@subnav-pill-item-padding-horizontal:           12px;
@subnav-pill-item-background:                   transparent;
@subnav-pill-item-color:                        @subnav-item-color;
@subnav-pill-item-hover-background:             transparent;
@subnav-pill-item-hover-color:                  @global-color;
@subnav-pill-item-dark-hover-color:             @global-contrast-color;
@subnav-pill-item-active-background:            @global-primary-background;
@subnav-pill-item-active-color:                 @global-contrast-color;

@subnav-item-disabled-color:                    @global-muted-color;
@subnav-item-font-size:                         12px;
@subnav-item-text-transform:                    uppercase;


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

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

.uk-subnav {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    /* 1 */
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    /* 2 */
    margin-left: -@subnav-margin-horizontal;
    /* 3 */
    padding: 0;
    list-style: none;
}

/*
 * 1. Space is allocated solely based on content dimensions: 0 0 auto
 * 2. Gutter
 * 3. Create position context for dropdowns
 */

.uk-subnav > * {
    /* 1 */
    -ms-flex: none;
    -webkit-flex: none;
    flex: none;
    /* 2 */
    padding-left: @subnav-margin-horizontal;
    /* 3 */
    position: relative;
}


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

/*
 * Items must target `a` elements to exclude other elements (e.g. dropdowns)
 * Using `:first-child` instead of `a` to support `span` elements for text
 * 1. Prevent gap if child element is `inline-block`, e.g. an icon
 * 2. Style
 * 3. Text transition
 */

.uk-subnav > * > :first-child {
    /* 1 */
    display: block;
    /* 2 */
    color: @subnav-item-color;
    /* 3 */
    font-size: @subnav-item-font-size;
    text-transform: @subnav-item-text-transform;
    -webkit-transition: 0.1s ease-in-out;
    transition: 0.1s ease-in-out;
    -webkit-transition-property: color, background-color;
    transition-property: color, background-color;
}

/* Hover + Focus */
.uk-subnav > * > a:hover,
.uk-subnav > * > a:focus {
    color: @subnav-item-hover-color;
    text-decoration: @subnav-item-hover-text-decoration;
    outline: none;
}

/* Active */
.uk-subnav > .uk-active > a {
    color: @subnav-item-active-color;
}


/* Divider modifier
 ========================================================================== */

/*
 * 1. Align items and divider vertically
 */

.uk-subnav-line > * {
    /* 1 */
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}

/*
 * Divider
 * `nth-child` makes it also work without JS if it's only one row
 */

.uk-subnav-line > :nth-child(n+2):not(.uk-first-column)::before {
    content: "";
    height: @subnav-line-border-height;
    margin-left: (@subnav-line-margin-horizontal - @subnav-margin-horizontal);
    margin-right: @subnav-line-margin-horizontal;
    border-left: @subnav-line-border-width solid @subnav-line-border;
}


/* Pill modifier
 ========================================================================== */

.uk-subnav-pill > * > :first-child {
    padding: @subnav-pill-item-padding-vertical @subnav-pill-item-padding-horizontal;
    background: @subnav-pill-item-background;
    color: @subnav-pill-item-color;
}

/* OnClick + Hover + Focus */
.uk-subnav-pill > * > a:active,
.uk-subnav-pill > * > a:hover,
.uk-subnav-pill > * > a:focus {
    background-color: @subnav-pill-item-hover-background;
    color: @subnav-pill-item-hover-color;

    .dark & {
        color: @subnav-pill-item-dark-hover-color;
    }
}

/* Active */
.uk-subnav-pill > .uk-active > a {
    background-color: @subnav-pill-item-active-background;
    color: @subnav-pill-item-active-color;
}


/* Disabled
 * The same for all style modifiers
 ========================================================================== */

.uk-subnav > .uk-disabled > a {
    color: @subnav-item-disabled-color;
}