@import "./variables";

.s-app-bar {
	background-color: var(--theme-app-bar);
	contain: layout;
	display: block;
	flex: 1 1 auto;
	max-width: 100%;
	position: relative;
	z-index: 5;
	transition: $app-bar-transition;

	.s-app-bar__wrapper {
		height: var(--s-app-bar-height);
		align-items: center;
		display: flex;
		padding: 4px;

		.s-btn.fab {
			width: 48px;
			height: 48px;
		}
	}

	.s-app-bar__title {
		padding-left: 16px;
		font-size: 1.25rem;
		line-height: 1.5;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	&:not(.tile) {
		border-top-left-radius: inherit;
		border-top-right-radius: inherit;
	}

	&:not(.flat) {
		@include elevation($app-bar-elevation);
	}

	&.dense {
		.s-app-bar__wrapper {
			height: 48px;
			padding: 0;
		}
	}

	&.prominent {
		.s-app-bar__wrapper {
			height: 128px;
			align-items: flex-start;
		}

		.s-app-bar__title {
			align-self: flex-end;
			padding-bottom: 6px;
			padding-top: 0;
		}
	}

	&.fixed {
		position: fixed;
		top: 0;
	}

	&.absolute {
		position: absolute;
		top: 0;
	}

	&.hidden {
		transform: translate(-100%);
	}

	&.collapsed {
		border-bottom-right-radius: 24px;
		max-width: 112px;
		overflow: hidden;
	}
}