/*
 * Copyright (c) 2016 GE Global Research. All rights reserved.
 *
 * The copyright to the computer software herein is the property of
 * GE Global Research. The software may be used and/or copied only
 * with the written permission of GE Global Research or in accordance
 * with the terms and conditions stipulated in the agreement/contract
 * under which the software has been supplied.
 */
///
@import "variables";

//Components

.has-navbar {
	padding-top: $navbar-height;
	position   : relative;
}

///Navbar styles
///
///
/// @access public
@include block ('navbar') {

	position  : absolute;
	top       : 0;
	left      : 0;
	right     : 0;
	@include noselect();

	transform : translate3d(0, 0, 0);
	transition: var(--px-navbar-transition, transform .4s cubic-bezier( 0.215, 0.610, 0.355, 1.000 ));

	///-----------------------------------------------------------------
	///.navbar--hidden
	@include modifier ('is-hidden') {
		transform: translate3d(0, -100%, 0);
	}

	* {
		@include noselect();
	}
	@include media-breakpoint (xs) {
		//background-color: red !important;
		//position        : fixed;
	}
	@include media-breakpoint (sm) {
		//	background-color: blue!important;
		//position        : fixed;
	}
	@include media-breakpoint (md) {
		//	background-color: green!important;
	}
	@include media-breakpoint (lg) {
		//	background-color: pink!important;
	}

	.btn,
	button {
		outline: none;
	}
	///.navbar--tiny
	@include modifier ('tiny') {
		padding: $navbar-padding--tiny;
	}
	///.navbar--small
	@include modifier ('small') {
		padding: $navbar-padding--small;
	}
	///.navbar--default
	@include modifier ('default') {
		padding: $navbar-padding--default;
	}
	///.navbar--large
	@include modifier ('large') {
		padding: $navbar-padding--large;
	}
	///.navbar--huge
	@include modifier ('huge') {
		padding: $navbar-padding--huge;
	}
	///.navbar--fixed
	@include modifier ('fixed') {
		position: fixed;
	}
	///.navbar--static
	@include modifier ('static') {
		position: static;
	}
	///.navbar__inner
	@include element ('inner') {
		box-sizing     : border-box;
		white-space    : nowrap;
		align-items    : center;
		justify-content: space-between;
		height         : $navbar-height;
		padding        : $navbar-padding;
		display        : flex;
		overflow       : hidden;
	}

	//TODO - Need to use absolute position for true center.
	@include element ('center') {
		@include centerer();
		order     : 2;
		flex      : 1 0 auto;
		align-self: center;
		text-align: center;

		> * {
			display: block;
		}
	}
	///.navbar__left
	@include element ('left') {
		order        : 0;
		align-self   : center;
		display      : flex;
		align-content: center;
		//margin-left  : $navbar-padding--small;
	}
	///.navbar__right
	@include element ('right') {
		order        : 3;
		align-self   : center;
		display      : flex;
		align-content: center;
		//	margin-right : $navbar-padding--small;
	}
	///.navbar__title
	@include element ('title') {
		display    : block;
		margin     : 0;
		padding    : 0;
		user-select: none;
	}

	///.navbar__subtitle
	@include element ('subtitle') {
		display    : block;
		user-select: none;
	}

	///.navbar__content
	@include element ('content') {
		position       : relative;
		display        : flex;
		justify-content: space-between;
		overflow       : hidden;
	}

	///.navbar__button
	.navbar__button {
		padding        : $navbar-button-padding;
		letter-spacing : 0;
		line-height    : $inuit-base-line-height;

		padding        : $navbar-button-padding;
		min-width      : $navbar-button-height;
		min-height     : $navbar-button-height;
		transition     : none;
		vertical-align : middle;
		box-shadow     : none;
		display        : flex;
		align-items    : center;
		align-content  : center;
		justify-content: center;
		box-sizing     : border-box;

		&.btn {
			min-width: $navbar-button-height;
			height   : $navbar-button-height;
		}

		i,
		span {
			flex      : 1 0 auto;
			align-self: center;
		}

		&:disabled,
		&[disabled] {
			opacity       : 0.3;
			cursor        : default;
			pointer-events: none;
		}

		&:focus {
			outline   : none;
			transition: none;
		}

		&:hover {
			box-shadow: none;
			transition: none;
		}

		@include modifier ('back') {
			i.fa-angle-left {
				margin-right: $navbar-padding--small;
			}
		}
	}

}