// Handle importing the MacOS Blink font so that every platform has the same font no matter what
// Temporary patch to this github repo (https://awdev1.github.io/beautitifullyricsfont/) for the font, to be taken down at authors request if so

@font-face {
	font-family: "BeautifulLyrics";
	font-weight: 400;
	src:
		url("https://cdn.jsdelivr.net/gh/awdev1/beautitifullyricsfont/LyricsRegular.woff2")
		format("woff2");
	
}

@font-face {
	font-family: "BeautifulLyrics";
	font-weight: 500;
	src:
		url("https://cdn.jsdelivr.net/gh/awdev1/beautitifullyricsfont/LyricsMedium.woff2")
		format("woff2");
}

@font-face {
	font-family: "BeautifulLyrics";
	font-weight: 600;
	src:
		url("https://cdn.jsdelivr.net/gh/awdev1/beautitifullyricsfont/LyricsSemibold.woff2")
		format("woff2");
}

@font-face {
	font-family: "BeautifulLyrics";
	font-weight: 700;
	src:
		url("https://cdn.jsdelivr.net/gh/awdev1/beautitifullyricsfont/LyricsBold.woff2")
		format("woff2");
}

/* Scroll Container */
.LyricsScrollContainer {
	display: inline-block;
	position: relative;

	width: 100cqw;
	height: 100cqh;

	overflow: auto;

	// container-type: size;
}

/* Scrollbar */
.simplebar-scrollbar::before {
	background: white !important;
	opacity: 0 !important;
}

[data-simplebar]:not(.simplebar-dragging) .simplebar-content-wrapper {
	scroll-behavior: smooth;
}

[data-simplebar]:not(.simplebar-dragging).InstantScroll .simplebar-content-wrapper {
	scroll-behavior: auto;
}

.LyricsScrollContainer:hover .simplebar-scrollbar::before {
	opacity: 0.5 !important;
}

/* Lyrics Container */
.Lyrics {
	display: flex;
	flex-direction: column;

	width: 100cqw;
	height: 0;

	container-type: size;

	--vocal-idle-opacity: 0.51;
	--vocal-active-opacity: 1;
	--vocal-sung-opacity: 0.497;
	--background-idle-opacity: calc(var(--vocal-idle-opacity) * 0.53921568627);
	--background-active-opacity: calc(var(--vocal-active-opacity) * 0.8);
	--background-sung-opacity: calc(var(--vocal-sung-opacity) * 0.6690140845);

	--vocal-lyrics-scale: 7;
	--maximum-lyrics-size: 3.5rem;
	--minimum-lyrics-size: 1.85rem;
}

/* Group */
.VocalsGroup {
	margin: 0;
	padding: 0;
	border: 0;
	display: flex;
	flex-direction: column;
	background-color: transparent;
	outline: none;
	-webkit-appearance: none;
	appearance: none;
	line-height: 1.1818181818;
	letter-spacing: 0em;
	transition: color 0.1s, transform 0.1s ease-in-out, padding 0.1s ease-in-out;

	font-family: "BeautifulLyrics" !important;

	unicode-bidi: isolate;

	margin-top: 1cqw;
	margin-bottom: 1cqw;
}

.VocalsGroup:is(button) {
	cursor: pointer;
}

.VocalsGroup:is(button).AlignedOpposite {
	align-items: flex-end;
}

.NaturallyAlignedLeft .VocalsGroup {
	direction: ltr;
	text-align: left;
}

.NaturallyAlignedRight .VocalsGroup {
	direction: rtl;
	text-align: right;
}

/* Interlude */
.Interlude {
	display: none;

	--dot-gap: clamp(0.3rem, 1.7cqw, 0.8rem);

	grid-template-columns: repeat(3, calc(var(--dot-gap) * 1.75));
	justify-content: start;
	column-gap: var(--dot-gap);

	margin-top: 1cqw;
	margin-bottom: 1cqw;
	margin-left: calc(var(--dot-gap) * 1.1);

	transform: scale(1);
	transform-origin: center center;
}

.Interlude.Active {
	display: grid;
}

.InterludeDot {
	display: inline-block;

	--dot-size: calc(2 * var(--dot-gap));

	width: var(--dot-size);
	height: var(--dot-size);

	--border-radius: 100rem; // Prevents themes from screwing with us
	--button-radius: 100rem; // Prevents themes from screwing with us
	border-radius: 100rem;
	background-color: rgba(255, 255, 255, 0.85);

	box-shadow: 0 0 var(--text-shadow-blur-radius) rgba(255, 255, 255, var(--text-shadow-opacity));
}

/* Base Vocals-Container */
.Vocals {
	display: flex;
	transition: opacity 0.25s cubic-bezier(0.61, 1, 0.88, 1);

	flex-wrap: wrap;

	--lyrics-size: clamp(var(--minimum-lyrics-size),
			calc(1cqw * var(--vocal-lyrics-scale)),
			var(--maximum-lyrics-size));
}

.Lyrics .Vocals {
	width: 95cqw;
}

.Lyrics:has(.AlignedOpposite) .Vocals {
	/* Make it so there's a nice cutoff for aligned and non-aligned */
	width: 75cqw;
}

.NaturallyAlignedLeft .VocalsGroup.AlignedOpposite .Vocals {
	justify-content: flex-end;
}

.NaturallyAlignedRight .VocalsGroup.AlignedOpposite .Vocals {
	justify-content: flex-start;
}

/* Lead Vocals-Container */
.Vocals.Lead {
	opacity: var(--vocal-idle-opacity) !important;

	font-size: var(--lyrics-size) !important;
	font-weight: 700 !important;
}

.Vocals.Lead.Sung {
	opacity: var(--vocal-sung-opacity) !important;
}

.Vocals.Lead.Active {
	opacity: var(--vocal-active-opacity) !important;
}

.VocalsGroup:is(button):hover .Vocals.Lead {
	--text-blur: 0 !important;
	opacity: var(--vocal-active-opacity) !important;
}

/* Background Vocals-Container */
.Vocals.Background {
	opacity: var(--background-idle-opacity) !important;

	--font-size: calc(var(--lyrics-size) * 0.75);
	font-size: var(--font-size) !important;
	font-weight: 500 !important;
	margin-top: calc(var(--font-size) * -0.05) !important;
}

.Vocals.Background.Sung {
	opacity: var(--background-sung-opacity) !important;
}

.Vocals.Background.Active {
	opacity: var(--background-active-opacity) !important;
}

.VocalsGroup:is(button):hover .Vocals.Background {
	opacity: var(--background-active-opacity) !important;
}

/* Base Lyric */
.NaturallyAlignedLeft .VocalsGroup.AlignedOpposite .Lyric {
	text-align: right;
}

.NaturallyAlignedRight .VocalsGroup.AlignedOpposite .Lyric {
	text-align: left;
}

/* Static Lyric */
.Static {
	display: flex;
	position: relative;
	white-space: pre-wrap;

	margin: -0.5px -0.75px -0.5px -0.75px;
	padding: 0.5px 0.75px 0.5px 0.75px;
	/*-webkit-clip-path: inset(0.5px 0.75px 0.5px 0.75px);
	clip-path: inset(0.5px 0.75px 0.5px 0.75px);*/

	background-color: rgb(255, 255, 255);
	background-clip: text;
	-webkit-text-fill-color: transparent;
	-webkit-background-clip: text;
}

/* Base-Synced Lyric */
.Synced {
	/* Setup our default values */
	--gradient-angle: 90deg;
	--gradient-color: 255;
	--gradient-color-alpha: 0.5;
	--gradient-color-alpha-active: 0.85;
	--gradient-offset: 0%;

	/* Define our Position System */
	position: relative;

	/* Now create our effects */
	margin: -0.5px -0.75px -0.5px -0.75px;
	padding: 0.5px 0.75px 0.5px 0.75px;
	/*-webkit-clip-path: inset(0.5px 0.75px 0.5px 0.75px);
	clip-path: inset(0.5px 0.75px 0.5px 0.75px);*/

	text-shadow: 0 0 var(--text-blur, 0) rgba(var(--gradient-color), var(--gradient-color), var(--gradient-color), var(--gradient-color-alpha));

	background-clip: text;
	-webkit-text-fill-color: transparent;
	-webkit-background-clip: text;
}

/* We only need the gradient when we've active */
.Vocals.Active .Synced {
	background-image: linear-gradient(var(--gradient-angle),
			rgba(var(--gradient-color),
				var(--gradient-color),
				var(--gradient-color),
				var(--gradient-color-alpha-active)) var(--gradient-progress),
			rgba(var(--gradient-color),
				var(--gradient-color),
				var(--gradient-color),
				var(--gradient-color-alpha)) calc(var(--gradient-progress) + 20% + var(--gradient-offset)));
	text-shadow: 0 0 var(--text-shadow-blur-radius) rgba(255, 255, 255, var(--text-shadow-opacity));
}

.Vocals.Sung .Synced {
	text-shadow: 0 0 var(--text-blur, 0) rgba(var(--gradient-color), var(--gradient-color), var(--gradient-color), var(--gradient-color-alpha-active));
}

.LyricsScrollContainer.UserScrolling .Vocals:not(:is(.Active)) .Synced {
	--text-blur: 0 !important;
}

/* Line-Synced Lyric */
.Line {
	/* Define our Visual Properties */
	--gradient-angle: 180deg;
	--gradient-offset: -20%;
	--gradient-color-alpha: 0.4;

	/* Make it so text can wrap and we expand to its size */
	display: flex;
	white-space: pre-wrap;
}

.Vocals.Lead .Line {
	transition: background-color 0.3s cubic-bezier(0.61, 1, 0.88, 1);
	transition: scale 0.1s cubic-bezier(0.37, 0, 0.63, 1);
}

.Vocals.Lead.Active .Line {
	--gradient-offset: 0%;

	scale: 1.05;
}

.NaturallyAlignedLeft .Line {
	transform-origin: left center;
}

.NaturallyAlignedLeft .VocalsGroup.AlignedOpposite .Line {
	transform-origin: right center;
}

.NaturallyAlignedRight .Line {
	transform-origin: right center;
}

.NaturallyAlignedRight .VocalsGroup.AlignedOpposite .Line {
	transform-origin: left center;
}

/* Syllable-Synced Lyric */
.Syllable, .Word {
	/* Our letters should not wrap - only the Syllable span itself should */
	display: flex;
	white-space: nowrap;
}

.Syllable:not(.Emphasis) {
	/* When Emphasis is applied we have Synced as well */
	white-space: pre;
}

.Syllable.PartOfWord.StartOfWord {
	transform-origin: right center;
}

.Syllable.EndOfWord {
	transform-origin: left center;
}

.Syllable:not(:is(.PartOfWord))::after {
	content: "";
	margin-right: 0.3ch;
}

.Letter {
	/* Allows each letter to be side-by-side */
	display: inline-block;
}

/* Spotify */
.main-nowPlayingView-lyricsContent {
	// Make the lyrics containers their own container
	container-type: inline-size;
	overflow-y: hidden;
	overflow-x: visible;

	padding-left: 0 !important;
	padding-right: 0 !important;

	&:hover {
		overflow-y: hidden !important;
	}

	.Lyrics {
		margin-top: 2.5cqh;
		margin-bottom: 40cqh;

		padding-left: 16px;
		padding-right: 16px;

		line-height: 7.5cqh;
		--use-offset: 1;
	}
}

.lyrics-lyrics-contentContainer {
	container-type: inline-size;
}

.os-content:has(.lyrics-lyrics-contentWrapper) {
	overflow: hidden;
}

.os-host:has(.lyrics-lyrics-contentWrapper) {
	.os-scrollbar {
		display: none;
	}
}

@property --FullscreenExtraPadding {
	syntax: "<length>";
	initial-value: 0px;
	inherits: true;
}
