.player-theme {
	font-family: var(--font);
	color: var(--on-surface);
}

.player-theme .shaka-video-container * {
	font-family: var(--font);
	color: var(--on-surface);
}

.player-theme .shaka-bottom-controls {
	width: 100%;
	padding: 0;
	padding-bottom: 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
}

.player-theme .shaka-ad-controls {
	order: 1;
}

.player-theme .shaka-controls-button-panel {
	order: 2;
	height: 2.5rem; /* 40px */
	padding: 0 0.625rem; /* 10px */
}

.player-theme .shaka-range-container {
	margin: 0.25rem 0.625rem; /* 4px 10px */
	top: 0;
}

.player-theme .shaka-small-play-button {
	order: -3;
}

.player-theme .shaka-mute-button {
	order: -2;
}

.player-theme .shaka-controls-button-panel > * {
	margin: 0;
	padding: 0.1875rem 0.5rem; /* 3px 8px */
	color: #fff;
	height: 2.5rem; /* 40px */
	font-size: 2rem; /* 32px */
}

.player-theme .shaka-controls-button-panel > *:hover {
	color: var(--primary);
}

.player-theme .shaka-controls-button-panel > *:focus {
	outline: none;
	box-shadow: inset 0 0 0 2px var(--primary);
	color: var(--primary);
}

.player-theme .shaka-controls-button-panel .shaka-volume-bar-container {
	height: 0.1875rem; /* 3px */
	padding: 0;
}

.player-theme .shaka-controls-button-panel .shaka-volume-bar-container:hover,
.player-theme .shaka-controls-button-panel .shaka-volume-bar-container:focus {
	display: block;
	opacity: 1;
	padding: 0 0.375rem; /* 6px */
}

.player-theme .shaka-mute-button:hover + div {
	opacity: 1;
	width: 3.125rem; /* 50px */
	padding: 0 0.375rem; /* 6px */
}

.player-theme .shaka-current-time {
	padding: 0 0.625rem; /* 10px */
	font-size: 1rem; /* 16px */
	color: #fff !important;
}

.player-theme .shaka-seek-bar-container {
	height: 0.1875rem; /* 3px */
	position: relative;
	top: -0.0625rem; /* -1px */
	margin-bottom: 0;
	border-radius: 0;
}

.player-theme .shaka-seek-bar-container .shaka-range-element {
	opacity: 0;
}

.player-theme .shaka-seek-bar-container:hover {
	height: 0.3125rem; /* 5px */
	top: 0;
	cursor: pointer;
}

.player-theme .shaka-seek-bar-container:hover .shaka-range-element {
	opacity: 1;
	cursor: pointer;
}

.player-theme .shaka-seek-bar-container input[type='range']::-webkit-slider-thumb,
.player-theme .shaka-seek-bar-container input[type='range']::-moz-range-thumb,
.player-theme .shaka-seek-bar-container input[type='range']::-ms-thumb {
	background: var(--primary);
	cursor: pointer;
}

.player-theme .shaka-overflow-menu,
.player-theme .shaka-settings-menu {
	border-radius: 0.25rem;
	background: var(--surface-container-low);
	right: 0.625rem; /* 10px */
	bottom: 3.125rem; /* 50px */
	min-width: 12.5rem; /* 200px */
	animation: none !important;
	transition: none !important;
	opacity: 1 !important;
	visibility: visible !important;
	z-index: 99999999 !important;
	pointer-events: auto !important;
	pointer-events: auto !important;
}

.player-theme .shaka-settings-menu {
	padding-bottom: 0.5rem; /* 8px */
}

.player-theme .shaka-settings-menu button {
	font-size: 1rem; /* 16px */
	border: none;
	margin: 0;
}

.player-theme .shaka-settings-menu button span {
	margin-left: 2.0625rem; /* 33px */
	font-size: 1rem; /* 16px */
}

.player-theme .shaka-settings-menu button[aria-selected='true'] {
	display: flex;
}

.player-theme .shaka-settings-menu button[aria-selected='true'] span {
	order: 2;
	margin-left: 0;
}

.player-theme .shaka-settings-menu button[aria-selected='true'] i {
	order: 1;
	font-size: 1rem; /* 16px */
	padding-left: 0.3125rem; /* 5px */
}

.shaka-overflow-menu * {
	z-index: 99999999 !important;
	pointer-events: auto !important;
}

.player-theme .shaka-overflow-menu button,
.player-theme .shaka-settings-menu button {
	padding: 0;
	margin-bottom: 0.5em;
	visibility: visible !important;
	z-index: 99999999 !important;
	pointer-events: auto !important;
}

.player-theme .shaka-overflow-menu button i {
	display: none;
}

.player-theme .shaka-overflow-menu button .shaka-overflow-button-label {
	display: flex;
	align-items: start;
	cursor: default;
	outline: none;
	height: 2.5rem; /* 40px */
	flex: 0 0 100%;
	visibility: visible !important;
	z-index: 99999999 !important;
	pointer-events: auto !important;
	pointer-events: auto !important;
}

.shaka-settings-menu {
	padding: 0.5em;
}

.shaka-settings-menu button {
	gap: 0;
	justify-content: start;
}

.player-theme .shaka-overflow-menu button .shaka-overflow-button-label span {
	flex-shrink: 0;
	padding-left: 0.9375rem; /* 15px */
	font-size: 1rem; /* 16px */
	display: flex;
	align-items: center;
}

.shaka-overflow-button-label span:not(.shaka-current-selection-span) {
	font-weight: 200 !important;
}

.player-theme .shaka-overflow-menu span + span {
	color: var(--primary-text);
	font-weight: 400 !important;
	font-size: 1rem !important;
	padding-right: 0.5rem; /* 8px */
}

.player-theme .shaka-overflow-menu .shaka-pip-button span + span {
	padding-right: 0.9375rem !important; /* 15px */
}

.player-theme .shaka-overflow-menu .shaka-pip-button span + span:after {
	content: '';
}

.player-theme .shaka-back-to-overflow-button {
	padding: 0.5rem 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.2);
	font-size: 1rem; /* 16px */
	color: var(--primary-text);
	height: 2.5rem; /* 40px */
}

.player-theme .shaka-back-to-overflow-button .material-icons-round {
	font-size: 1rem; /* 16px */
	padding-right: 0.625rem; /* 10px */
}

.player-theme .shaka-back-to-overflow-button span {
	margin-left: 0.1875rem !important; /* 3px */
}

.player-theme .shaka-overflow-menu button:hover,
.player-theme .shaka-settings-menu button:hover {
	background-color: var(--surface-bright);
	cursor: pointer;
}

.player-theme .shaka-overflow-menu button:hover label,
.player-theme .shaka-settings-menu button:hover label {
	cursor: pointer;
}

.player-theme .shaka-overflow-menu button:focus,
.player-theme .shaka-settings-menu button:focus {
	background-color: var(--surface-bright);
	border: none;
	outline: none;
}

.player-theme .shaka-overflow-menu button,
.player-theme .shaka-settings-menu button {
	color: var(--primary-text);
}

.player-theme .shaka-captions-off {
	color: var(--surface-bright);
}

.player-theme .shaka-overflow-menu-button {
	font-size: 1rem; /* 16px */
	margin-right: 0.3125rem; /* 5px */
}

.player-theme .chapter-marker {
	bottom: 100%;
	height: 4px;
	margin-bottom: 8px;
	position: absolute;
	background: linear-gradient(
		to right,
		var(--primary-container) 0%,
		var(--primary-container) calc(100% - 10px),
		transparent 100%
	);
}

@media screen and (max-width: 650px) {
	.player-theme .shaka-end-time {
		display: none;
	}

	.player-theme .chapter-marker {
		height: 8px;
	}

	.player-theme .shaka-overflow-menu,
	.player-theme .shaka-settings-menu {
		width: 100% !important;
		min-width: 100% !important;
		position: fixed !important;
		top: 70% !important;
		left: 50% !important;
		height: 50vh !important;
		transform: translate(-50%, -50%) !important;
		pointer-events: all !important;
		pointer-events: auto !important;
		opacity: 1 !important;
		visibility: visible !important;
		padding: 1rem 0.5rem !important;
		box-shadow: var(--elevate2);
		background-color: var(--surface-container);
		z-index: 40;
		inset: auto auto 0 0;
		inline-size: 100%;
		max-block-size: 50vh;
		max-inline-size: none !important;
		overflow-x: hidden;
		overflow-y: auto;
		font-size: 0.875rem;
		font-weight: 400;
		text-transform: none;
		color: var(--on-surface);
		line-height: normal;
		text-align: start;
		border-radius: 0.25rem;
		transition:
			all var(--speed2),
			0s background-color;
	}

	.player-theme .shaka-overflow-menu::before,
	.player-theme .shaka-settings-menu::before {
		content: '' !important;
		position: fixed !important;
		top: 0 !important;
		left: 0 !important;
		width: 100vw !important;
		height: 100vh !important;
		background: transparent !important;
		pointer-events: auto !important;
	}

	.player-theme .shaka-overflow-menu:hover,
	.player-theme .shaka-settings-menu:hover {
		pointer-events: auto !important;
		opacity: 1 !important;
		visibility: visible !important;
	}

	#shaka-container {
		z-index: 98 !important;
		pointer-events: auto !important;
		opacity: 1 !important;
		visibility: visible !important;
	}
}
