@import '../mixins/elevation';
@import '../mixins/surface';

.appbar {
	@include surface;

	--color: var(--on-primary);
	--background: var(--primary);
	--radius: 0;
	--hide-direction: -1;

	--button-color: var(--on-primary); // review : is there a better way to do this?

	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	min-height: 4.8rem;

	&.hidden {
		transform: translateY(calc(var(--hide-direction) * 110%));
		// todo : animate this
	}

	&.contextual {
		--color: var(--on-surface-inverse);
		--background: var(--surface-inverse);
	}

	&.flat {
		@include elevation(0);
	}

	&:not(.bottom) {
		@include elevation(4);
	}

	&.bottom {
		@include elevation(8);

		top: initial;
		bottom: 0;
		--hide-direction: 1;
	}

	.title {
		padding: 0 1.6rem;
		font-size: 2rem;
		font-weight: normal;
	}
}