@use '../assets';

#app-mount {
	.wrapper-1FP9YQ {
		background: var(--background);
		border-radius: var(--border-radius);
		&::after {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: rgb(0, 0, 0, 0.25);
			pointer-events: none;
			opacity: 0;
			transition: 250ms linear opacity;
		}
		&.wrapperPaused-9B8znP::after {
			opacity: 1;
		}
		&.wrapperControlsHidden-2BK8R2 {
			.metadata-3IncIG,
			.videoControls-2NzHnF {
				opacity: 0;
			}
		}
		&:hover .playCenter-Fe8u3X .wrapper-x4po40 .icon-23NjRH {
			opacity: 1;
		}
	}
	.playCenter-Fe8u3X {
		.iconWrapper-1lfhOx {
			opacity: 1;
		}
		.wrapper-x4po40 {
			background: transparent;
			padding: 0;
			opacity: 1;
			.icon-23NjRH {
				margin: 0;
				cursor: var(--cursor);
				width: 72px;
				height: 72px;
				background: var(--white);
				opacity: 0.65;
				margin-top: 4px;
				mask: url(assets.$icon_play) center/72px no-repeat;
				polygon {
					display: none;
				}
			}
		}
	}
	.videoControls-2NzHnF {
		display: grid;
		grid-template-columns: auto auto 1fr auto auto;
		z-index: 1;
		padding: var(--spacing-half) var(--spacing);
		height: 38px;
		box-sizing: border-box;
		bottom: 0;
		transform: none !important;
		transition: 150ms linear opacity;
		background: transparent;
		&::after {
			content: '';
			left: 0;
			bottom: 0;
			width: 100%;
			height: 72px;
			position: absolute;
			z-index: -1;
			background: linear-gradient(0deg, rgb(0, 0, 0, 0.75), transparent);
		}
		.horizontal-2HFjqv {
			top: calc(var(--spacing-half) * -1);
			position: absolute;
			left: var(--spacing);
			width: calc(100% - var(--spacing-double));
			display: block;
			.mediaBarInteraction-tUE5dq,
			.mediaBarInteractionDragging-3XLL8k {
				margin: 0;
				display: flex;
				align-items: center;
				&:hover,
				&:active {
					.buffer-3eVqKK,
					.mediaBarPreview-1gUbVy,
					.mediaBarProgress-38I317 {
						height: 5px !important;
					}
				}
				.mediaBarWrapper-33h1oY {
					background: transparent;
					height: 10px;
					border-radius: 0;
					box-shadow: none;
					.mediaBarProgress-38I317 {
						background: var(--accent-solid);
					}
					.buffer-3eVqKK,
					.mediaBarPreview-1gUbVy,
					.mediaBarProgress-38I317 {
						height: 3px;
						top: 50%;
						transition: 150ms ease height;
						transform: translateY(-50%);
					}
					.buffer-3eVqKK,
					.buffer-3eVqKK::after,
					.buffer-3eVqKK::before {
						background: var(--white);
						opacity: 0.3;
					}
				}
			}
			.mediaBarGrabber-FvJKJg {
				background: var(--accent-solid);
				transition: none;
			}
			.fakeEdges-18N907::after,
			.fakeEdges-18N907::before {
				content: none;
			}
		}
		.flex-3BkGQD {
			justify-content: space-between;
		}
		> div:last-child {
			.controlIcon-1grhw_ {
				margin: 0;
			}
		}
	}
	.volumeButton-2XwKVs {
		margin-left: var(--spacing);
	}
	.controlIcon-1grhw_ {
		margin: 0;
		height: 20px;
		width: 20px;
		color: var(--white);
		opacity: 0.65;
		cursor: var(--cursor);
		transform: none;
		&:not(:last-child) {
			margin-right: var(--spacing);
		}
		&:hover {
			color: var(--text-link);
			opacity: 1;
		}
	}
	.durationTimeWrapper-LdSEv8 {
		margin: 0;
		.durationTimeDisplay-QwCeRr,
		.durationTimeSeparator-1Cqi9N {
			font-weight: var(--font-weight);
			font-size: var(--font-size-sm);
			color: var(--white);
			font-family: var(--font-family-sans-serif);
			margin: 0;
			user-select: text;
			&.durationTimeSeparator-1Cqi9N {
				margin: 0 var(--spacing-third);
			}
		}
	}
	.metadata-3IncIG {
		padding: var(--spacing);
		top: 0;
		z-index: 10;
		height: 72px;
		transform: none !important;
		transition: 150ms ease opacity;
		background: linear-gradient(0deg, transparent, rgb(0, 0, 0, 0.75));
		.metadataName-1KMZtB {
			color: var(--white);
			font-weight: var(--font-weight-normal);
			font-size: var(--font-size);
			line-height: normal;
		}
		.metadataSize-2A2s1T {
			font-size: var(--font-size-sm);
			font-weight: var(--font-weight-normal);
			color: var(--white);
			opacity: 0.65;
		}
		.metadataDownload-3IY84h {
			padding: 0;
			opacity: 1;
			border: none;
			background: var(--white);
			height: 18px;
			width: 18px;
			opacity: 0.75;
			mask: url(assets.$icon_download) center/18px no-repeat;
			.metadataIcon-3QMhu9 {
				display: none;
			}
			&:hover {
				opacity: 1;
			}
		}
	}
	.metadataContent-lalfZ3 {
		padding: 0;
	}
}
