// Copyright (C) arrowthemes, https://www.gnu.org/licenses/gpl.html GNU/GPL */

//
// 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-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-default-background, 10%);
@subnav-pill-gradient-bottom:                   @global-default-background;


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

//
// Items
//

.hook-subnav() {
	-webkit-transition: @global-transition;
			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 -2px 0 @global-light-border,
				inset 0 2px 0 @global-light-border;
	text-transform: uppercase;
	font-size: @base-h6-font-size - 2;
	letter-spacing: 1px;
}

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

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

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

.hook-subnav-disabled() {}


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

.hook-subnav-misc() {

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

}