: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;
	}
}

/* nest from 1st level only for Safari uughh */
:host > 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;
		}
	}
}

/* nest from 1st level only for Safari uughh */
:host > 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;

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

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

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

	& > figure {
		background-color: oklch(from var(--error-color) l c h / 80%);
	}
}

/* Icons  */
:host([album]) {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Crect width='256' height='256' fill='none'/%3E%3Ccircle cx='128' cy='128' r='96' fill='none' stroke='rgba(255, 255, 255, 0.05)' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Cpath d='M64,128a64,64,0,0,1,64-64' fill='none' stroke='rgba(255, 255, 255, 0.05)' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Cpath d='M192,128a64,64,0,0,1-64,64' fill='none' stroke='rgba(255, 255, 255, 0.05)' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Ccircle cx='128' cy='128' r='24' fill='none' stroke='rgba(255, 255, 255, 0.05)' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3C/svg%3E");
}

:host([track]) {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Crect width='256' height='256' fill='none'/%3E%3Ccircle cx='180' cy='164' r='28' fill='none' stroke='rgba(255, 255, 255, 0.05)' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Ccircle cx='52' cy='196' r='28' fill='none' stroke='rgba(255, 255, 255, 0.05)' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Cpolyline points='80 196 80 56 208 24 208 164' fill='none' stroke='rgba(255, 255, 255, 0.05)' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3C/svg%3E");
}

:host([artist]) {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Crect width='256' height='256' fill='none'/%3E%3Ccircle cx='128' cy='96' r='64' fill='none' stroke='rgba(255, 255, 255, 0.05)' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Cpath d='M32,216c19.37-33.47,54.55-56,96-56s76.63,22.53,96,56' fill='none' stroke='rgba(255, 255, 255, 0.05)' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3C/svg%3E");
}

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