//------------------------------------------------------------------------------
// @object: Bar
//------------------------------------------------------------------------------
// @author: hanakin -- midaym
// @version: 1.2.0
// @description
//
//------------------------------------------------------------------------------

//
// @settings

// Layout Variables
$bar-spacing: $sp1 !default;
$bar-avatar-size: $default-icon-lg !default;
$bar-height: $default-height !default;
$bar-logo-max-height: 24px !default;
$bar-logo-width: 64px !default;
$bar-badge-radius: 50px !default;
$bar-badge-width: 10px !default;
$bar-badge-height: 12px !default;
$bar-profile-max: 296px !default;
$bar-opacity-1: $default-opacity !default;
$bar-opacity-87: $default-opacity-87 !default;
$bar-opacity-54: $default-opacity-54 !default;
$bar-opacity-38: $default-opacity-38 !default;
$bar-opacity-12: $default-opacity-12 !default;


// Theme Variables
$bar-bg-color: $default-surface-color !default;
$bar-search-bg-color: $default-surface-color !default;
$bar-bg-hover-color: $default-surface-hover-color !default;
$bar-color: $default-surface-item-color !default;
$bar-hover-color: $default-action-color-hover !default;
$bar-user-title-color: $default-background-item-color !default;
$bar-badge-bg-color: $default-error-color !default;
$bar-badge-color: $default-error-item-color !default;


//
// @scss

@keyframes grow {
	0% {
		opacity: 0;
		transform: scaleX(0.1);
	}

	50% {
		transform: scaleX(0.99);
	}

	100% {
		opacity: 1;
		transform: scaleX(1);
	}
}

@keyframes shrink {
	0% {
		opacity: 1;
		transform: scaleX(1);
	}

	50% {
		transform: scaleX(0.01);
	}

	100% {
		opacity: 0;
		transform: scaleX(0);
	}
}

//
// 1. handle inconsistent rendering of ul across browsers when not using as
//    a list element
// 2. Magic alignment
//
.o-bar {
	background-color: $bar-bg-color;
	display: grid;
	grid-template-columns: auto auto;

	&-left {
		position: relative;
	}

	&-right {
		position: relative;
		display: flex;
		flex-direction: row;
		align-self: flex-end;
		margin-left: auto;
	}

	&-title {
		@include type(headline6, $lh: 1);
		@include center($bar-height);
		margin-bottom: 0;
		padding: ($bar-spacing * 2);
	}

	&-info {
		@include center($bar-height);
		color: $bar-user-title-color;
		padding: ($bar-spacing * 2);
		padding-left: 0;

		&:first-of-type {
			padding-left: ($bar-spacing * 2);
		}
	}

	&-item {
		position: relative;
		display: inline-block;

		&-text {
			padding-left: $bar-spacing;
		}
	}

	&-avatar {
		display: inline-block;
		width: $bar-avatar-size;
		height: $bar-avatar-size;
		padding: 0;
	}

	&-logo {
		@include center($bar-height);
		position: relative;
		overflow: hidden;
		padding: ($bar-spacing * 2);

		&-icon {
			width: $bar-logo-width;
			height: auto;
			max-height: $bar-logo-max-height;
		}
	}

	&-profile {
		@include center($bar-height);
		max-width: $bar-profile-max;
		padding: $bar-spacing ($bar-spacing * 2);
	}

	&-user {
		@include type(body1, $lh: 1.35);
		padding: 0 $bar-spacing;

		&-title {
			@include type(caption);
			color: $bar-user-title-color;
			opacity: $bar-opacity-54;
			display: block;
		}
	}

	&-search {
		background-color: $bar-search-bg-color;
		opacity: 0;
		position: absolute;
		z-index: 999;
		float: left;
		width: 100%;
		transform: scaleX(0);
		transform-origin: right;
		animation: shrink 200ms cubic-bezier(0.4, 0, 0.2, 1) forwards;

		&.is-active {
			animation: grow 400ms cubic-bezier(0.4, 0, 1, 1) forwards;
		}

		&-form {
			display: grid;
			grid-column: span 2;
			grid-template-columns: 56px auto 56px;
			width: 100%;
			margin: 0;
		}

		&-toggle {
			@include type(subhead1, $lh: 1.5, $fw: 700);
			@include center($bar-height);
			color: $bar-hover-color;
			flex-shrink: 0;
			margin-right: 0;
			margin-left: 0;
			padding: ($bar-spacing * 2);
		}

		&-action {
			@include type(subhead1, $lh: 1.5, $fw: 700);
			@include center($bar-height);
			color: $bar-color;
			margin-right: 0;
			margin-left: auto;
			padding: ($bar-spacing * 2);

			&:hover,
			&:focus {
				color: $bar-hover-color;
			}
		}

		&-field {
			@include type(subhead1, $lh: 1.5, $fw: 700);
			background-color: transparent;
			background-image: none;
			border: 0;
			color: $bar-color;
			display: inline-flex;
			justify-content: center;
			align-items: center;
			height: $bar-height;
			padding: ($bar-spacing * 2);

			&:hover,
			&:focus {
				background-color: transparent;
				color: $bar-hover-color;
			}
		}
	}
}