@use 'mixins/mixins' as *;
@use 'common/var' as *;

$header-background-color: #d9230f;

@include b(app-bar) {
	background-color: $header-background-color;
	color: $color-white;
	box-shadow: 0 3px 9px rgb(0 0 0 / 50%);
	z-index: 1030;

	@include e(buttons-small) {
		height: 0;
		transition: height 0.3s ease-in-out;
		overflow: hidden;
		justify-content: space-between;
		display: flex;
		flex-flow: row nowrap;

		@include when(expanded) {
			padding: 1rem 1rem 0;
			height: 3.4rem;
			transition: height 0.3s ease-in-out;
		}
	}

	@include e(header) {
		position: relative;
		height: 6rem;
		display: flex;
		flex-flow: row nowrap;
	}

	@include e(heading) {
		flex-grow: 2;
		height: 6rem;
		display: flex;
		flex-flow: row nowrap;
		align-items: center;
	}

	@include e(button-left) {
		flex: 0 0 5rem;
		max-width: 5rem;
		display: flex;
		justify-content: center;
	}

	@include e(button-right) {
		flex: 0 0 5rem;
		max-width: 5rem;
		display: flex;
		justify-content: center;
	}

	@include e(content) {
		height: 0;
		line-height: 3rem;
		padding-left: 1rem;
		transition: height 0.3s ease-in-out;
		display: flex;
		flex-flow: row nowrap;
		font-size: 1.5rem;

		@include when(expanded) {
			height: 3rem;
			transition: height 0.3s ease-in-out;
		}
	}
}

@include b(app-bar-heading) {
	@include e(title) {
		overflow: hidden;
		line-height: 6rem;
		font-size: 2.2rem;
		font-weight: normal;
		color: $color-white;
		margin: 0;
		flex-grow: 1;

		> span {
			line-height: 2.5rem;
			font-size: 2rem;
			display: block;
		}

		> small {
			line-height: 2.5rem;
			font-size: 1.2rem;
			display: block;
		}

		@include m(align-center) {
			text-align: center;
		}

		@include m(align-left) {
			text-align: left;
		}

		@include m(align-right) {
			text-align: right;
		}
	}

	@include e(prepend) {
		flex: 0 0 5rem;
		text-align: center;
	}

	@include e(append) {
		flex: 0 0 5rem;
		text-align: center;
	}
}

@include b(app-bar-icon) {
	display: block;
	background-color: transparent;
	background-image: none;
	border: none;
	line-height: 6rem;
	font-size: 2.5rem;
	text-align: center;
	text-transform: lowercase;
	color: $color-white;
	outline: none;

	@include m(align-left) {
		order: -1;
	}

	@include m(align-right) {
		order: 1;
	}
}

@include b(app-bar-button) {
	@include m(align-left) {
		order: -1;
	}

	@include m(align-right) {
		order: 1;
	}
}