@use '../variables' as *;

.#{$prefix}toolbar {
	flex-shrink: 0;
	position: relative;
	width: 100%;
	height: var(--#{$prefix}toolbar-height);
	padding-block: var(--#{$prefix}toolbar-padding-y);
	padding-inline: var(--#{$prefix}toolbar-padding-x);
	color: var(--#{$prefix}toolbar-color);
	display: flex;
	align-items: center;

	&__container {
		position: relative;
		width: 100%;
		margin: 0 auto;
		display: flex;
		align-items: center;
		gap: var(--#{$prefix}toolbar-gap);
	}

	&__start-action,
	&__start-content,
	&__end-action,
	&__end-content {
		flex-shrink: 0;
		display: flex;
		align-items: center;
		gap: var(--#{$prefix}toolbar-content-gap);
	}

	&__content {
		flex-grow: 1;
		overflow: hidden;
		display: flex;
		flex-direction: column;
	}

	&__title {
		font-size: var(--#{$prefix}toolbar-title-font-size);
		font-weight: var(--#{$prefix}toolbar-title-font-weight);
		line-height: var(--#{$prefix}toolbar-title-line-height);
		overflow: hidden;
		color: var(--#{$prefix}toolbar-title-color);
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
	}

	&__subtitle {
		font-size: var(--#{$prefix}toolbar-subtitle-font-size);
		font-weight: var(--#{$prefix}toolbar-subtitle-font-weight);
		line-height: var(--#{$prefix}toolbar-subtitle-line-height);
		overflow: hidden;
		color: var(--#{$prefix}toolbar-subtitle-color);
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
	}
}