$player-background: #f0f0f0 !default;
$player-border-radius: 20px !default;
$player-buffer-background: #ffffff33 !default;
$player-fullscreen-z-index: 100000 !default;

.player {
	width: fit-content;

	.player-overlay {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100vw;
		height: 100vh;
		z-index: $player-fullscreen-z-index;

		&.blurred {
			backdrop-filter: blur(3px);
		}

		+ .player-wrapper {
			z-index: $player-fullscreen-z-index + 1;
		}
	}

	.player-wrapper {
		-webkit-mask-image: -webkit-radial-gradient(white, black);
		mask-image: linear-gradient(white, black);
		background-color: $player-background;
		border-radius: $player-border-radius;
		position: relative;
		transition: background-color 0.3s, transform 0.5s;
		transform-origin: left top;
	}

	.player-controls {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;

		.player-tracker {
			display: flex;
			flex-direction: row;
			flex-wrap: nowrap;
			align-items: center;
			width: 100%;

			.player-progress {
				flex-grow: 2;
				margin: 0 9px;
			}

			.player-time-current,
			.player-time-total {
				font-size: 0.8em;
				font-variant: tabular-nums;
				font-variant-numeric: tabular-nums;
				-moz-font-feature-settings: 'tnum';
				-webkit-font-feature-settings: 'tnum';
				font-feature-settings: 'tnum';
			}
		}
	}

	.action {
		color: inherit;
		cursor: pointer;
	}

	.player-tracker {
		box-sizing: border-box;
	}

	.player-progress {
		width: 100%;
		height: 5px;
		cursor: pointer;
		position: relative;
		background-color: darken($player-background, 10);
		border-radius: 5px;

		.player-progress-wrapper {
			overflow: hidden;
		}

		.player-buffer {
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			border-radius: 5px;
			background-color: $player-buffer-background;
		}

		.player-seeker {
			height: 100%;
			position: absolute;
			border-radius: 5px;
			top: 0;
			left: 0;
			transition: width 0.1s ease-in;
		}

		&:hover .player-seeker-thumb {
			opacity: 1;
		}
	}

	.player-seeker-thumb {
		display: inline-block;
		width: 10px;
		height: 10px;
		border-radius: 100%;
		position: absolute;
		transition: opacity 0.2s;
		opacity: 0;
		top: -2.5px;
		margin-left: -2.5px;
		box-shadow: 0 0 5px #0000001a;
	}
}

.audio-player {
	width: 100%;

	&.theater {
		&.status-playing {
			.player-wrapper {
				background-color: rgba($player-background, 1);
			}
		}
	}

	.player-controls {
		min-height: 20px;
		padding: 5px 15px 5px 5px;

		.action {
			width: 13px;
			height: 13px;
			padding: 5px;
			box-sizing: content-box;
			transition: transform 0.2s;

			&:hover {
				transform: scale(1.2);
			}

			&:active {
				transform: scale(0.9);
			}
		}

		.player-progress {
			.player-buffer {
				background-color: rgba(0, 0, 0, 0.1);
			}
		}
	}
}

.video-player {
	video {
		display: block;
		object-fit: cover;
		object-position: center;
	}

	.player-controls {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		transition: box-shadow 0.5s, background-color 0.3s;
		background-color: rgba(#000, 0.75);
		color: #efefef;

		.action {
			transition: transform 0.3s, opacity 0.3s;
			transform-origin: center;

			&:hover {
				transform: scale(1.2);
			}

			&:active {
				transform: scale(0.8);
			}
		}

		&:hover {
			background-color: rgba(#000, 0.8);

			.action {
				opacity: 1;
			}

			.player-tracker {
				bottom: 10px;
				opacity: 1;
			}
		}

		.action-pause {
			opacity: 0;
			fill: #efefef;
			stroke: transparent;
		}

		.action-pause,
		.action-play,
		.action-replay {
			position: absolute;
			top: calc(50% - 35px);
			left: calc(50% - 35px);
			width: 70px;
			height: 70px;
		}

		.action-forwards,
		.action-backwards {
			position: absolute;
			top: calc(50% - 20px);
			width: 40px;
			height: 40px;
		}

		.action-backwards {
			left: 25%;
		}

		.action-forwards {
			right: 25%;
		}

		.action-fullscreen {
			width: 20px;
			height: 13px;
			margin-left: 10px;
			transition: transform 0.3s;

			&:hover {
				transform: scale(1.3);
			}
		}

		.player-progress {
			background-color: rgba(255, 255, 255, 0.2);
		}

		.player-buffer {
			background-color: rgba(255, 255, 255, 0.3);
		}

		.player-tracker {
			position: absolute;
			left: 0;
			right: 0;
			bottom: -15px;
			padding: 0 15px;
			opacity: 0;
			transition: opacity 0.5s, bottom 0.2s;
		}
	}

	&.status-playing {
		.player-wrapper {
			&:hover {
				.action {
					opacity: 1;
				}
			}
		}

		.player-controls {
			&:not(:hover) {
				background-color: transparent;
			}

			.action {
				opacity: 0;
			}
		}
	}

	&.fullscreen-active {
		.player-wrapper {
			z-index: $player-fullscreen-z-index + 1;
		}
	}
}

.fade-enter-active,
.fade-leave-active {
	transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-to {
	opacity: 0;
}