$_theme: () !default

@use "sass:selector"
@use "sass:map"

.videoControls
	position: absolute
	bottom: 0
	left: 0
	display: flex
	height: 35px
	width: 100%
	opacity: 1
	transition: opacity 0.2s
	background: linear-gradient(transparent, black)
	z-index: 2
	//background-color: #30303030

	--accent-color: cyan

	&.hidden
		opacity: 0

	@mixin svg-button
		background-color: transparent
		background-size: cover
		background-repeat: no-repeat
		filter: saturate(0) brightness(2)
		border: none
		transition: filter 0.2s
		transition: scale 0.2s
	@mixin svg-button-hover
		filter: saturate(0) brightness(4)
	@mixin svg-button-active-or-click
		filter: saturate(0) hue-rotate(200deg) brightness(4)

	> button
		@include svg-button
		width: 32px
		height: 32px

		&:hover
			@include svg-button-hover
			scale: 1.1
		&:active
			scale: 0.9
		&.active, &:active
			@include svg-button-active-or-click

	.playBtn
		background-image: url(/static/images/player/play.svg)
		margin-left: 0.5em
		margin-right: 0.5em

		&.pause
			background-image: url(/static/images/player/pause.svg)

	.settingsBtn
		background-image: url(/static/images/player/hamburger.svg)
		margin-left: 0.5em
		margin-right: 0.5em

	.fullscreen
		background-image: url(/static/images/player/fullscreen.svg)
		margin-right: 0.5em

	.volumeBtn
		background-image: url(/static/images/player/volume-high.svg)
		margin-right: 1em

		&.low
			background-image: url(/static/images/player/volume-low.svg)

		&.off
			background-image: url(/static/images/player/volume-off.svg)

		&.mute
			background-image: url(/static/images/player/volume-mute.svg)

	// Bars
	input[type=range]
		-webkit-appearance: none
		appearance: none
		height: 35px
		background-color: transparent

		&::-webkit-slider-runnable-track
			background-color: #bbb
			height: 2px
		&::-moz-range-track
			background-color: #bbb
			height: 2px
		&::-webkit-slider-thumb
			-webkit-appearance: none
			appearance: none
			width: 16px
			height: 16px
			margin-top: -6px
		&::-moz-range-thumb
			width: 16px
			height: 16px
			margin-top: -6px

	.timeline
		flex-grow: 1
		height: 100%
		position: relative
		cursor: pointer

		.seek
			width: 100%
			height: 100%
			margin-top: -0.0625em
			background-color: transparent

			// For SponsorBlock integration
			--seek-background: #bbb
			--sponsorblock-segment-sponsor: green
			--sponsorblock-segment-selfpromo: yellow
			--sponsorblock-segment-interaction: purple
			--sponsorblock-segment-intro: cyan
			--sponsorblock-segment-outro: blue
			--sponsorblock-segment-preview: indigo
			--sponsorblock-segment-music_offtopic: orange
			--sponsorblock-segment-music_filler: orange

			&::-webkit-slider-runnable-track
				background-color: var(--seek-background)
			&::-moz-range-track
				background-color: var(--seek-background)
			&::-moz-range-progress
				background-color: var(--accent-color)

			&::-webkit-slider-thumb
				width: 0px
				height: 0px
				border: none
			&::-moz-range-thumb
				width: 0px
				height: 0px
				border: none

		.fakeThumb
			position: absolute
			bottom: 0.75em
			width: 16px
			height: 16px
			margin-left: -8px
			background-color: white
			border-radius: 50%
			pointer-events: none

		.hoverTimeContainer
			position: absolute
			width: 0
			bottom: 0.5em
			opacity: 1
			transition: opacity 0.2s
			pointer-events: none
			align-content: center

			&.hidden
				opacity: 0

			.hoverTimeInner
				display: flex
				flex-direction: column
				width: max-content //11em
				transform: translateX(-50%)
				border-radius: 6px
				position: relative
				padding: 0.5em

				.hoverTimeVideo:not([src])
					display: none
					& + .hoverTimeText
						padding-top: unset

				.hoverTimeText
					margin: auto
					padding-top: 0.5em

	.timecode
		margin: auto
		margin-left: 1em
		margin-right: 0.5em

	.popout
		background-color: map.get($_theme, "bg-4")
		position: absolute
		bottom: 3.5em
		border-radius: 6px
		display: flex
		flex-direction: column

		&.hidden
			display: none

	.volumePopout
		left: 3em
		width: 3em
		height: 8em
		padding: 0.25em

		&.boost
			height: 14em

		.volumeBarContainer
			height: 100%
			position: relative

			.volumeBar
				-webkit-transform: rotate(-90deg)
				-webkit-transform-origin: 52.5% 240%
				transform: rotate(-90deg)
				transform-origin: 52.5% 240%
				width: 8em

				--volumeBar-bg: #333
				--volumeBar-boost-bg: #fa1f21

				&::-webkit-slider-runnable-track
					background-color: var(--volumeBar-bg)
				&::-moz-range-track
					background-color: var(--volumeBar-bg)
				&::-moz-range-progress
					background-color: var(--accent-color)

				// Normalize thumb
				@mixin normalized-thumb
					background-color: white
					border-radius: 50%
				&::-webkit-slider-thumb
					@include normalized-thumb
				&::-moz-range-thumb
					@include normalized-thumb

				&.boost
					width: 10em
					@mixin boost-bg
						background-color: none
						background-image: linear-gradient(90deg, var(--volumeBar-bg) 33%, var(--volumeBar-boost-bg) 33%, var(--volumeBar-boost-bg) 100%)
					&::-webkit-slider-runnable-track
						@include boost-bg
					&::-moz-range-track
						@include boost-bg

	.settingsPopout
		right: 3em
		width: fit-content
		height: fit-content

		&[data-page="main"] .settingsPage[data-name="main"],
		&[data-page="speed"] .settingsPage[data-name="speed"],
		&[data-page="tricks"] .settingsPage[data-name="tricks"],
		&[data-page="cc"] .settingsPage[data-name="cc"],
		&[data-page="quality"] .settingsPage[data-name="quality"]
			display: flex

		.settingsPage
			display: none
			flex-direction: column
			padding: 0.25em

			.setting
				display: flex
				flex-direction: row

				&:not(.header:not(.goBack))
					cursor: pointer

				&:not(.header)
					color: map.get($_theme, "fg-dim")

				&:not([disabled]):hover
					color: map.get($_theme, "fg-main")

				*
					padding: 0.5em

				.icon, .submenuIcon
					@include svg-button
					width: 1em
					height: 1em
					background-color: transparent
					background-size: contain
					background-position: center center

					&.submenuIcon
						background-image: url(/static/images/player/back.svg)
						transform: rotateY(180deg)
						transform-origin: 50% 50%

						&.redownloadBtn
							background-image: url(/static/images/player/refresh.svg)
							transform: unset
				&:hover:not(.active)
					.icon, .submenuIcon
						@include svg-button-hover
				&.active, &:active
					.icon, .submenuIcon
						@include svg-button-active-or-click

				.text
					text-align: left
					align-self: center
					flex-grow: 1

			// Specific icons...
			.header
				margin-top: 0
				border-bottom: 1px solid map.get($_theme, "edge-grey")
				margin-bottom: 0.25em

				.icon.back
					background-image: url(/static/images/player/back.svg)
			
			.autoHide
				.icon
					background-image: url(/static/images/player/eye-closed.svg)
				&.active .icon
					background-image: url(/static/images/player/eye-open.svg)
			.loop .icon
				background-image: url(/static/images/player/loop.svg)
			.speed .icon
				background-image: url(/static/images/player/speed.svg)
			.tricks .icon
				background-image: url(/static/images/player/paw.svg)
			.cc .icon
				background-image: url(/static/images/player/captions.svg)
			.quality .icon
				background-image: url(/static/images/player/gear.svg)

			// Specific pages
			// Tricks
			.forceStereo .icon
				background-image: url(/static/images/player/headphones.svg)

			.setting
				&.active
					color: map.get($_theme, "fg-bright")

			.setting[disabled]
				&.active
					color: map.get($_theme, "fg-main")
				&:not(.active)
					color: map.get($_theme, "bg-2")
				.icon, .submenuIcon,
				&:hover:not(.active) .icon, &:hover:not(.active) .submenuIcon
					filter: saturate(0) brightness(1)
				&.active, &:active
					.icon, .submenuIcon
						filter: saturate(0) brightness(2.5)

			.speedBar
				--speedBar-bg: #333
				--speedBar-boost-bg: #fa1f21

				&::-webkit-slider-runnable-track
					background-color: var(--volumeBar-bg)
				&::-moz-range-track
					background-color: var(--volumeBar-bg)
				&::-moz-range-progress
					background-color: var(--accent-color)
				@mixin boost-bg
					background-color: none
					background-image: linear-gradient(90deg, var(--speedBar-bg) 33%, var(--speedBar-boost-bg) 33%, var(--speedBar-boost-bg) 100%)
				&::-webkit-slider-runnable-track
					@include boost-bg
				&::-moz-range-track
					@include boost-bg