@import "../oss/";/* fira-sans-regular - latin */
@font-face {
	font-display: swap;
	font-family: 'Fira Sans';
	font-style: normal;
	font-weight: 300;
	src: url('/media/fonts/fira-sans/fira-sans-v17-latin-300.woff2') format('woff2');
}
@font-face {
	font-display: swap;
	font-family: 'Fira Sans';
	font-style: normal;
	font-weight: 400;
	src: url('/media/fonts/fira-sans/fira-sans-v17-latin-regular.woff2') format('woff2');
}
@font-face {
	font-display: swap;
	font-family: 'Fira Sans';
	font-style: normal;
	font-weight: 500;
	src: url('/media/fonts/fira-sans/fira-sans-v17-latin-500.woff2') format('woff2');
}
/* playfair-display-regular - latin */
@font-face {
	font-display: swap;
	font-family: 'Playfair Display';
	font-style: normal;
	font-weight: 400;
	src: url('/media/fonts/playfair-display/playfair-display-v37-latin-regular.woff2') format('woff2');
}
/* playfair-display-500 - latin */
@font-face {
	font-display: swap;
	font-family: 'Playfair Display';
	font-style: normal;
	font-weight: 500;
	src: url('/media/fonts/playfair-display/playfair-display-v37-latin-500.woff2') format('woff2');
}:root {
	font-family: 'Fira Sans';
	font-size: 10px;
}
body {
	background-color: var(--color-primary-background);
	color: var(--color-primary-foreground);
	fill: var(--color-primary-foreground);
}
/* */
.uiSection__main._lyrics {
	font-size: var(--font-size);

	& p {
		margin-block-end: var(--gap-width);
	}
}
.musicPreviewCard {
	--_musicPreviewCard-border-radius: 0.8rem;
	--_musicPreviewCard-border-padding: 1.6rem;
	--_musicPreviewCard-color-accent: #FFBBCC;

	background-color: var(--color-secondary-background);
	border-radius: var(--_musicPreviewCard-border-radius);
	display:grid;
	column-gap: var(--gap-width);
	grid-template-columns: 9.6rem 1fr;
	grid-template-areas: "artwork name name"
						 "artwork artist artist" 
						 "artwork progress playpause";
	grid-template-rows: auto  1fr auto;
	font-size: var(--font-size-s);
	max-width: 64rem;
	padding: var(--_musicPreviewCard-border-padding);

	& audio {
		display: none;
	}

	& button {
		align-items: center;
		align-self: center;
		aspect-ratio: 1 / 1;
		background-color: var(--_musicPreviewCard-color-accent);
		clip-path: circle();
		display: grid;
		grid-area: playpause;
		justify-items: center;
		width: 3.2rem;

		& * {
			grid-column: 1 / -1;
			grid-row: 1 / -1;
		}

		& svg {
			height: 1.6rem;
			width: 1.6rem;
		}
	}


	.uiBadge {
		background-color: #323232;
		border-radius: .4rem;
		display: inline-block;
		font-size: var(--font-size-xs);
		font-weight: lighter;

		padding: var(--gap-quarter-width);
	}

	& img {
		aspect-ratio: 1;

		grid-area: artwork;
		height: auto;
		width: 100%;
	}

	& progress {
		 -webkit-appearance: none;
		align-self: center;
		appearance: none;
		border-radius: 100vw;
		grid-area: progress;
		height: .4rem;
	}

	& progress::-webkit-progress-bar {
  		background-color: orange;
  		border-radius: 2px;
  		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
	}

	& .__artist {
		grid-area: artist;
	}

	& .__artwork {
		align-self: center;
		grid-area: artwork;
		grid-row: 1 / -1;
	}

	& .__name {
		font-weight: bold;
		grid-area: name;
	}

	& .__pause {
		opacity: 0;
	}

	&[data-status="play"] {
		background-color: black;

		& .__play {
			opacity: 0;
		}

		& .__pause {
			opacity: 1;
		}
	}

	&[data-status="pause"] {
		background-color: blue;

		& .__play {
			opacity: 1;
		}

		& .__pause {
			opacity: 0;
		}
	}
}#sn {
	--_sn-color-background: var(--color-primary-background);
	--_sn-grid-constrained-max-width: var(--site-constrained-max-width);
	--_sn-grid-gap: 0;


	background-color: var(--_sn-color-background);
	display: grid;
	grid-template-columns: 
		[bleed] 1fr 
		[constrained-start] minmax(0, var(--_sn-grid-constrained-max-width)) 
		[constrained-end] 1fr 
		[bleed];
	gap: var(--_sn-grid-gap);
	inset: 0 0 auto 0;
	isolation: isolate;
	position: sticky;

	& > * {
		grid-column: constrained;
		padding-inline: var(--site-constrained-padding-inline_safe);
	}
	
}

#snBar {
	grid-row-start: 1;
	grid-template-columns: subgrid;
	height: 5.6rem;
	padding-block: 2rem;
}
#snBar__home {
	justify-self: end;
}
#snBar__main {
	display: grid;
}
#snLogo {
	justify-self: end;
	fill: orange;
	height: 1.6rem;
	width: auto;

}#sf {
	--site-constrained-max-width: 96rem;
	--_sf-constrained-grid-width: calc(var(--site-constrained-max-width) / 4) ;
	--_test : var(--_sf-constrained-grid-width);
	
	display: grid;
	grid-template-columns:
	1fr  
	repeat(4,minmax(0,var(--_sf-constrained-grid-width)))
	1fr;
	isolation: isolate;
	padding-block-end: env(safe-area-inset-bottom,var(--gap-width));
	position: sticky;

	& > * {
		grid-column: 2 / -2;
		padding-inline: var(--site-constrained-padding-inline_safe);
	}

}
#sfDirectories {
	display: grid;
	
	margin-block-start: var(--gap-fourfold-width);
	padding-block-end: var(--gap-width);

	@media only screen and (min-width: 768px){
		grid-template-columns: repeat(4, 1fr);
	}

}

.sfDirectory {
	--_sfDirectory-color-border: var(--color-primary-border);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight);


	& .sfDirectory__checkbox {
		display: none;
	}

	& .sfDirectory__content {
		overflow: hidden;
		position: relative;
		isolation: isolate;
		z-index: 1;
	}

	& .sfDirectory__label {
		cursor: pointer;
		display: block;
		font-weight: bolder;
		isolation: isolate;
		line-height: 1.3333em;
		margin: 0;
		outline: none;
		padding-block: var(--gap-two-thirds-width);
		position: relative;
		text-transform: uppercase;
	}

	& .sfDirectory__list a {
		display: block;
		padding-block: var(--gap-quarter-width);

		&:hover {
			color: var(--color-accent-foreground);
		}
	}

	@media only screen and (max-width: 767.9px){
		& .sfDirectory__content{ 
			border-bottom: .1rem solid var(--_sfDirectory-color-border);
			overflow: hidden;
			position: relative;
			z-index: 1;
		}
		
		& .sfDirectory__label::before {
			background-color: var(--color-accent-foreground);
			border-radius: var(--gap-quarter-width);
			content: '';
			display: block;
			height: .1rem;
			position: absolute;
			right: 0;
			top: 50%;
			width: 0.66em;
			zoom: 150%;
		}
		& .sfDirectory__label::after {
			background-color: var(--color-accent-foreground);
			border-radius: var(--gap-quarter-width);
			content: '';
			display: block;
			height: .1rem;
			position: absolute;
			right: 0;
			top: 50%;
			transform: rotate(90deg);
			transition: all 0.4s ease;
			width: 0.66em;
			zoom: 150%;
		}


		& .sfDirectory__list{
			-webkit-transform: translateY(-100px);
			position: absolute;
		}
		/* imported */
		.sfDirectory__checkbox:checked + .sfDirectory__content {
			background: transparent;
		}
		.sfDirectory__checkbox:checked + .sfDirectory__content  .sfDirectory__label {
			fill: var(--color-foreground);
		}
		.sfDirectory__checkbox:checked + .sfDirectory__content .sfDirectory__label::before {
			background-color: var(--color-foreground-primary);
			transform: rotate(-90deg);
			opacity: 0;
		}
		.sfDirectory__checkbox:checked + .sfDirectory__content .sfDirectory__label::after {
			background-color: var(--color-foreground-primary);
			transform: rotate(0);
		}
		.sfDirectory__checkbox:checked + .sfDirectory__content .sfDirectory__label:after {
			
		}
		.sfDirectory__checkbox:checked + .sfDirectory__content .sfDirectory__list {
			opacity: 1;
			position: static;
			transform: none;
			transition: all 300ms ease;
			visibility: visible;
			z-index: 1;
		}
	}

}

#sfRecordLabel {
	column-gap: var(--gap-half-width);
	display: grid;
	font-size: var(--font-size-xs);
	grid-column: 2 / -2;
	grid-template-areas: "logo artist" "logo record";
	grid-template-columns: auto 1fr;
	padding-block: var(--gap-half-width);

	@media screen and (min-width: 768px) {
		grid-column: 2 / 4;
		grid-row-start: 3;
	}

	#sfRecordLabel__artist { 
		align-self: end;
		font-weight: bolder;
		grid-area: artist;
		letter-spacing: -.05em;
		line-height:1.2em
	}

	#sfRecordLabel__logo {
		grid-area: logo;
		height: 4rem;
		width: 4rem;

		& svg {
			height: 4rem;
			width: 4rem;
		}
	}

	#sfRecordLabel__record {
		align-self: start;
		color: var(--color-secondary-foreground);
		grid-area: record;
		line-height:1.2em
	}

	#sfRecordLabel a:hover {
		color: var(--color-brand-daround);
		fill: var(--color-brand-daround);
		text-decoration: underline;
	}
}



#sfSocial {
	column-gap: var(--gutter-half-width);
	display: grid;
	font-size: var(--font-size-xs);
	grid-column: 2 / -2;
	justify-items: center;
	padding-block: var(--gap-half-width);

	@media screen and (min-width: 768px) {
		grid-row-start: 3;
		grid-column: 4 / 6;
	}

	#sfSocial__links {
		display: flex;
		gap: var(--gap-width);
	}

	.sfSocialItem {
		display: grid;
	}
	.sfSocialItem svg {
		height: 2.4rem;
		width: auto;
	}

}.streamingLinkCard {
	aspect-ratio: 1;
	display: grid;
	width: 4rem;

	& svg {
		fill: inherit;
		height: 2.4rem;
		width: 2.4rem;
	}

	& .streamingLinkCard__label {
		display: none;
	}

	&[data-slug="amazon-music"] {
		fill: white;
	}

	&[data-slug="apple-music"] {
		fill: #FC3C44;
	}

	&[data-slug="deezer"] {
		fill: #9640F6;
	}

	&[data-slug="qobuz"] {
		fill: white;
	}

	&[data-slug="spotify"] {
		fill: #1DB954;
	}

	&[data-slug="youtube-music"] {
		fill: #E12A26;
	}

	&[data-slug="tidal"] {
		fill: white;
	}

	&:not([href]) {
		/*filter: grayscale(1);
		opacity: 0.5;*/
	}

}