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


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

@subnav-color:                                  @global-panel-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: 5px 20px;
    box-shadow: inset 0 -1px 0 @global-light-border,
                inset 0 1px 0 @global-light-border;
	font-size: @global-font-size;

	&:before {
	    content: "";
	    position: absolute;
	    width: 0;
	    height: 1px;
	    background-color: @subnav-pill-active-background;
	    bottom: 0;
	    left: 0;
	    -webkit-transition: @global-transition;
	            transition: @global-transition;
	}

	&:hover{
	    background-color: @global-transparent;
	    box-shadow: none;

	    &:before {
	        width: 100%;
	    }
	}
}

// Hover
.hook-subnav-pill-hover() {
	background-color: rgba(0,0,0,0);
	box-shadow: none;
}

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

    &:hover:before {
        width: 0;
    }

    &::before {
        box-shadow: none;
    }
}

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

.hook-subnav-disabled() {}


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

.hook-subnav-misc() {

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

}