:host {
	--skeleton-base-color: #333;
	--skeleton-shimmer-color: #444;

	gap: 2rem;
	width: 100%;
	margin: auto;
	padding: 2rem;
	display: grid;
	max-width: 980px;
	position: relative;
	box-sizing: border-box;
	background-color: var(--card-color);
	box-shadow: black 2px 2px 12px -4px;

	background-size: 1rem;
	background-repeat: space;
	border-image: fill 0 linear-gradient(to top left, #000d, oklch(from silver l c h / 5%) 69%);

	transition: border-image 0.3s;

	@media screen and (max-width: 1080px) {
		margin: 0;
		border: unset;
		max-width: 100%;
		border-radius: 0;
		align-items: flex-start;
		grid-template: auto 1fr / 1fr;
	}

	& > fieldset {
		margin: 0;
		padding: 0;
		width: 100%;
		border: none;

		& > input[type="url"] {
			width: 100%;
			border: none;
			padding: 1rem;
			text-align: center;
			border-radius: 4px;
			box-sizing: border-box;
			color: var(--fg-color);
			background-color: var(--bg-color);

			&:valid {
				color: var(--success-color);
				outline: 1px solid var(--success-color);
			}
			&:invalid {
				color: var(--error-color);
			}

			@media screen and (max-width: 480px) {
				font-size: small;
			}
		}
	}

	& > section {
		gap: 1rem;
		width: 100%;
		display: grid;
		visibility: hidden;
		grid-template: auto / 1fr 3fr;

		@media screen and (max-width: 720px) {
			grid-template: auto auto / 1fr;
		}

		& > figure {
			margin: 0;
			display: flex;
			border-radius: 4px;
			aspect-ratio: 1 / 1;
			box-shadow: 2px 2px 12px -4px black;
			background-color: var(--skeleton-base-color);

			& > img {
				max-width: 100%;
				object-fit: cover;
				border-radius: 4px;
			}
		}

		& > hgroup {
			padding: 0;
			gap: 0.5rem;
			display: flex;
			text-wrap: pretty;
			flex-flow: column wrap;

			& svg {
				width: 24px;
				min-width: 24px;
			}

			& :is(h2, p, button) {
				gap: 0.5rem;
				display: flex;
				align-items: center;
			}

			& > h2 {
				margin: 0;

				@media screen and (max-width: 480px) {
					font-size: 1.25rem;
				}
			}

			& > p {
				margin: 0;
				color: #ccc;
				text-wrap: pretty;

				&:empty {
					visibility: hidden;
				}
			}

			& > footer {
				margin-top: auto;
				position: relative;
				word-break: break-all;

				@media screen and (max-width: 480px) {
					font-size: smaller;
				}

				& > button {
					padding: 0;
					border: none;
					font: inherit;
					cursor: pointer;
					background: none;
					text-align: left;
					font-size: smaller;
					color: var(--ff-4);
					text-decoration: none;

					&:hover {
						text-decoration: underline;
					}
				}

				& > [popover] {
					border: none;
					border-radius: 4px;
					padding: 0.5rem 0.75rem;
					color: var(--fg-color);
					background: var(--ff-1);

					margin: 0;
					transform: translate(1rem, -50%);
					inset-block-start: anchor(center);
					inset-inline-start: anchor(right);

					@media screen and (max-width: 1080px) {
						transform: translate(0.5rem, -50%);
						inset-block-start: anchor(center);
						inset-inline-start: anchor(right);
					}
				}
			}
		}
	}
}

/* state style - no JS */
:host(:not(:defined)) > section {
	visibility: hidden;
}

/* state style - loading */
:host(:state(loading)) > section {
	visibility: visible;
	opacity: 0.5;
	filter: blur(2px);
	transition:
		filter 0.2s ease-in-out,
		opacity 0.2s ease-in-out;

	& > figure {
		animation: shimmer 10s infinite ease-in-out;
	}
}

/* state style - loaded */
:host(:state(loaded)) > section {
	visibility: visible;
}

/* Phosphor Icons Light (Data SVG) */
:host(:state(album)) {
	background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0iIzAwMDAwMCIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGQ9Ik0xMjgsMjZBMTAyLDEwMiwwLDEsMCwyMzAsMTI4LDEwMi4xMiwxMDIuMTIsMCwwLDAsMTI4LDI2Wm0wLDE5MmE5MCw5MCwwLDEsMSw5MC05MEE5MC4xLDkwLjEsMCwwLDEsMTI4LDIxOFptMC0xNDhhNTguMDcsNTguMDcsMCwwLDAtNTgsNTgsNiw2LDAsMCwxLTEyLDAsNzAuMDgsNzAuMDgsMCwwLDEsNzAtNzAsNiw2LDAsMCwxLDAsMTJabTcwLDU4YTcwLjA4LDcwLjA4LDAsMCwxLTcwLDcwLDYsNiwwLDAsMSwwLTEyLDU4LjA3LDU4LjA3LDAsMCwwLDU4LTU4LDYsNiwwLDAsMSwxMiwwWm0tNDAsMGEzMCwzMCwwLDEsMC0zMCwzMEEzMCwzMCwwLDAsMCwxNTgsMTI4Wm0tNDgsMGExOCwxOCwwLDEsMSwxOCwxOEExOCwxOCwwLDAsMSwxMTAsMTI4WiI+PC9wYXRoPjwvc3ZnPg==");
}

:host(:state(track)) {
	background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0iIzAwMDAwMCIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGQ9Ik0yMTEuNjksMTkuMjdhNiw2LDAsMCwwLTUuMTUtMS4wOWwtMTI4LDMyQTYsNiwwLDAsMCw3NCw1NlYxNzAuMTFBMzQsMzQsMCwxLDAsODYsMTk2VjYwLjY4bDExNi0yOVYxMzguMTFBMzQsMzQsMCwxLDAsMjE0LDE2NFYyNEE2LDYsMCwwLDAsMjExLjY5LDE5LjI3Wk01MiwyMThhMjIsMjIsMCwxLDEsMjItMjJBMjIsMjIsMCwwLDEsNTIsMjE4Wm0xMjgtMzJhMjIsMjIsMCwxLDEsMjItMjJBMjIsMjIsMCwwLDEsMTgwLDE4NloiPjwvcGF0aD48L3N2Zz4=");
}

:host(:state(artist)) {
	background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0iIzAwMDAwMCIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGQ9Ik0yMjkuMTksMjEzYy0xNS44MS0yNy4zMi00MC42My00Ni40OS02OS40Ny01NC42MmE3MCw3MCwwLDEsMC02My40NCwwQzY3LjQ0LDE2Ni41LDQyLjYyLDE4NS42NywyNi44MSwyMTNhNiw2LDAsMSwwLDEwLjM4LDZDNTYuNCwxODUuODEsOTAuMzQsMTY2LDEyOCwxNjZzNzEuNiwxOS44MSw5MC44MSw1M2E2LDYsMCwxLDAsMTAuMzgtNlpNNzAsOTZhNTgsNTgsMCwxLDEsNTgsNThBNTguMDcsNTguMDcsMCwwLDEsNzAsOTZaIj48L3BhdGg+PC9zdmc+");
}

:host(:state(playlist)) {
	background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0iIzAwMDAwMCIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGQ9Ik0zNCw2NGE2LDYsMCwwLDEsNi02SDIxNmE2LDYsMCwwLDEsMCwxMkg0MEE2LDYsMCwwLDEsMzQsNjRabTYsNzBIMTYwYTYsNiwwLDAsMCwwLTEySDQwYTYsNiwwLDAsMCwwLDEyWm03Miw1Mkg0MGE2LDYsMCwwLDAsMCwxMmg3MmE2LDYsMCwwLDAsMC0xMlptMTMzLjc1LTYwLjI4YTYsNiwwLDAsMS03LjQ4LDRMMjA2LDEyMC4wNlYxOTJhMzAsMzAsMCwxLDEtMTItMjRWMTEyYTYsNiwwLDAsMSw3LjcyLTUuNzVsNDAsMTJBNiw2LDAsMCwxLDI0NS43NSwxMjUuNzJaTTE5NCwxOTJhMTgsMTgsMCwxLDAtMTgsMThBMTgsMTgsMCwwLDAsMTk0LDE5MloiPjwvcGF0aD48L3N2Zz4=");

	& > section > figure {
		aspect-ratio: 1200 / 630;
	}
}

/* animations */
@keyframes shimmer {
	0%,
	100% {
		background-color: var(--skeleton-base-color);
	}
	50% {
		background-color: var(--skeleton-shimmer-color);
	}
}