.tify-header {
	background: $header-bg;
	border-bottom: 1px solid $border-color;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	min-height: g(2.25);
	transition: margin $td;
	z-index: 9;

	:fullscreen:has(.tify-player.-playing:not(.-mousing)) & {
		margin-top: g(-2.5);
	}
}

.tify-header-button-group {
	align-items: center;
	display: flex;
	gap: 1px;
	margin: g(.25) 0;
	padding: 0 g(.25);
	position: relative;

	&.-page-select {
		align-items: stretch;
		align-self: center;
		border-radius: $br;
		margin: 0;
		padding: 0;

		@container (#{$small}) {
			margin: 0 g(.375);
		}
	}

	&.-pagination {
		display: none;
		padding-left: 0; // There is always the page dropdown to the left, which needs less spacing

		@container (#{$small}) {
			display: flex;
		}

		&.-reversed {
			padding-left: g(.25);
			padding-right: 0;
			transform: scale(-1);
		}

		&.-vertical {
			.tify-icon {
				transform: rotate(90deg);
			}
		}

		.tify-dropdown-content & {
			box-shadow: 0 -1px $border-color;
			display: flex;
			margin: calc(#{$br} * 2 - 1px) 0 0;
			padding: $br 0 0;

			@container (#{$small}) {
				display: none;
			}
		}
	}

	&.-toggle {
		display: flex;

		@container (#{$large}) {
			display: none;
		}

		.tify-header-column:not(:nth-child(2)) & {
			border: 0;

			@container (#{$small}) {
				border-left: 1px solid $border-color;
			}
		}
	}

	&.-view {
		flex-direction: column;
		margin: 0;
		padding: 0;

		@container (#{$large}) {
			flex-direction: row;
			margin: g(.25) 0;
			padding: 0 g(.25);
		}

		&:nth-child(n+2),
		.tify-header-column.-pagination ~ .tify-header-column & {
			@container (#{$large}) {
				border-left: 1px solid $border-color;
			}
		}
	}
}

.tify-header-button {
	@extend %button-borderless;

	&[aria-expanded=true],
	&[aria-pressed=true] {
		@extend %button-active;
	}

	&.-icon-only {
		display: block;
	}

	&.-vertical {
		// stylelint-disable-next-line no-descending-specificity
		.tify-icon {
			transform: rotate(90deg);
		}
	}

	&.-media {
		@container (#{$medium}) {
			display: none !important;
		}
	}

	.tify-page-select + & {
		@extend %button;
		border-radius: 0 $br $br 0;
		margin-left: -2px;

		&:focus,
		&:hover {
			z-index: 1;
		}

		&:not(:focus, :hover) {
			border-left: 0;
			padding-left: g(.25);
		}
	}

	.tify-header-button-group.-toggle & {
		padding: calc(g(.375) - 1px);
	}

	.tify-header-button-group.-view & {
		display: flex;
		gap: .2em;
		justify-content: start;
		width: 100%;

		@container (#{$large}) {
			align-items: center;
			gap: 0;
			justify-content: center;
			width: auto;
		}

		&:not(.-icon-only) {
			@container (#{$large}) {
				flex-direction: column;
				min-height: g(1.75);
				min-width: g(1.75);
				padding: 0 g(.25);
			}
		}
	}
}

.tify-header-button-label {
	.tify-header-button.-icon-only & {
		@container (#{$large}) {
			font-size: 0; // Hide label
		}
	}

	.tify-header-button-group.-view .tify-header-button:not(.-icon-only) & {
		@container (#{$large}) {
			font-size: $font-size-small;
			line-height: 1;
			margin-bottom: .2em;
		}
	}
}

.tify-header-column {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	min-width: 0;

	&:first-child {
		flex: 1;
	}

	.tify-dropdown-content.-mobile-only {
		display: none;
		left: auto;
		min-width: 0;
		right: g(.25);
		top: g(2);
		transform: none;

		@container (#{$large}) {
			background: none;
			border: 0;
			display: flex !important; // override .-visible
			filter: none;
			margin: 0;
			padding: 0;
			position: static;
		}

		&::before {
			left: auto;
			right: calc(g(.375) - 1px);

			@container (#{$large}) {
				content: none;
			}
		}

		&.-visible {
			display: block;
		}
	}
}

.tify-header-title {
	align-self: center;
	-webkit-box-orient: vertical;
	display: -webkit-box;
	font-size: 1em;
	font-weight: normal;
	-webkit-line-clamp: 2;
	line-height: g();
	margin: g(.125) g(.5);
	overflow: hidden;
	text-align: left;
	text-overflow: ellipsis;
}