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


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

@subnav-color:                                  @global-color;
@subnav-hover-color:                            @global-link-color;
@subnav-hover-text-decoration:                  none;
@subnav-active-color:                           @global-link-color;
@subnav-disabled-color:                         @global-muted-color;

@subnav-line-border:                            @global-border;
@subnav-line-border-height:						9px;

@subnav-pill-hover-background:                  @global-light-background;
@subnav-pill-hover-color:                       @global-link-color;
@subnav-pill-active-background:                 @global-primary-background;
@subnav-pill-active-color:                      @global-contrast-color;

@subnav-pill-gradient-top:                      lighten(@global-primary-background, 10%);
@subnav-pill-gradient-bottom:                   @global-primary-background;


// Component
// ==========================================================================

//
// Items
//

.hook-subnav() {
	transition: @global-transition;
}

// Hover
.hook-subnav-hover() {}

// Active
.hook-subnav-active() {}


// Modifier: `uk-subnav-line'
// ========================================================================

.hook-subnav-line-divider() {}


// Modifier: `uk-subnav-pill'
// ========================================================================

.hook-subnav-pill() {
	padding: 0px 6px 2px;
	box-shadow: inset 0 -1px 0 @global-dark-075-shadow,
				inset 0 1px 0 @global-dark-075-shadow;
	text-transform: uppercase;
	font-family: @global-body-font-family;
	font-weight: @global-body-font-weight;
	font-size: round((@base-h6-font-size*0.75));
	letter-spacing: 1px;

}

// Hover
.hook-subnav-pill-hover() {
	background-color: rgba(0,0,0,0);
	box-shadow: inset 0 -2px 0 @global-primary-background;
}

// Active
.hook-subnav-pill-active() {
	border-radius: @global-border-radius;
	box-shadow: none;
	background-color: @global-primary-background;
    
}

// Disabled state
// ========================================================================

.hook-subnav-disabled() {}


// Miscellaneous
// ========================================================================

.hook-subnav-misc() {

	.uk-subnav.uk-subnav-list > li {
		width: 100%;
		line-height: 26px;
	}

}