:host {
	--album-size: 300px;
	--spt-color: #1ed760;
	--qbz-color: #0070ef;
	--accent-color: var(--ff-1);
	--qbz-logo: url(/qobuz.svg);
	--spt-logo: url(/spotify.svg);

	gap: 1rem;
	display: grid;
	color: mistyrose;
	align-items: center;
	box-sizing: border-box;
	grid-template-rows: auto 1fr;

	anchor-name: --host-anchor;
	container-type: inline-size;

	& > small {
		grid-row: 1;
		color: dimgray;
		font-weight: bold;

		& > b {
			color: var(--accent-color);
			transition: color 0.2s;
		}
	}

	& > figure {
		/*dev*/
		gap: 1rem;
		padding: 1rem;
		box-sizing: border-box;

		margin: 0;
		display: flex;
		overflow: hidden;
		block-size: 100%;
		position: relative;
		border-radius: 0.25rem;
		border: dashed dimgrey;
		min-block-size: var(--album-size);
		background-color: oklch(from whitesmoke l c h / 5%);

		anchor-name: --figure-anchor;

		/* prettier-ignore */
		transition: border .2s, background-color .2s;

		@container (width <= 600px) {
			flex-flow: column wrap;
		}

		/* service logo in the background */
		&::before {
			--size: 20%;

			content: "";
			z-index: -1;
			display: block;
			aspect-ratio: 1;
			position: absolute;
			inline-size: var(--size);
			mask: var(--service-logo) no-repeat center / contain;

			/* positioning */
			inset: 0;
			position-area: center;
			position-anchor: --figure-anchor;
			background-color: oklch(from var(--accent-color) l c h / 33%);
		}

		/* move service logo if we found something */
		&:has(img[src]) {
			&::before {
				--size: 10%;
				inset: 1rem;
				position-area: bottom left;

				/*left: calc(100% - var(--size) - 2rem);*/
				/*bottom: calc(100% - var(--size) - 4rem);*/

				@container (width <= 600px) {
					/*bottom: calc(100% - var(--size) - 1rem);*/
				}
			}
		}

		/* album art */
		& > img {
			opacity: 0;
			flex: 0 0 auto;
			object-fit: cover;
			aspect-ratio: 1 / 1;
			object-position: left;
			max-inline-size: 100%;
			border-radius: 0.25rem;
			background-color: oklch(from var(--accent-color) l c h / 10%);

			/* cheeky for chrome */
			text-indent: -100%;

			transition:
				opacity 0.2s,
				background-color 0.2s;

			@container (width > 600px) {
				inline-size: var(--album-size);
			}

			&[src] {
				opacity: 1;
				box-shadow: black 4px 0px 12px -4px;
			}
		}

		/* metadata */
		& > figcaption {
			flex: 0%;
			display: grid;
			overflow-wrap: break-word;

			transition: opacity 0.2s;

			/* metadata */
			& > dl {
				margin: 0;

				& > dt {
					color: dimgrey;
					font-size: small;
				}

				& > dd {
					margin: 0;

					&:first-of-type {
						max-width: 80%;
					}

					&:not(:last-of-type) {
						margin-bottom: 0.5rem;
					}
				}
			}

			/* wrap it all up */
			& > footer {
				gap: 1rem;
				display: flex;
				align-self: end;
				margin-block-start: 2rem;

				/* service link */
				& > a {
					font-weight: bold;
					padding: 0.5rem 1rem;
					border-radius: 0.25rem;
					text-decoration: none;
					inline-size: fit-content;
					color: var(--accent-color);
					background-color: oklch(from var(--accent-color) l c h / 20%);

					transition:
						color 0.2s,
						background-color 0.2s;

					&:hover {
						background-color: oklch(from var(--accent-color) l c h / 30%);
					}
				}

				/* copy button */
				& > button {
					border: none;
					outline: none;
					padding: 0.5rem;
					vertical-align: middle;
					border-radius: 0.25rem;
					background-color: oklch(from var(--accent-color) l c h / 20%);

					transition: background-color 0.2s;

					&:not(:disabled):hover {
						cursor: pointer;
						background-color: oklch(from var(--accent-color) l c h / 30%);
					}

					&::not(:disabled):active {
						background-color: oklch(from var(--accent-color) l c h / 40%);
					}

					/* for boefjes only! */
					&:disabled {
						color: unset;
						cursor: default;
						margin-inline-start: auto;
						background-color: oklch(from forestgreen l c h / 20%);
					}
				}

				/* copy message toast */
				& > [popover] {
					--toast-bar: 2px;

					font-size: small;
					color: whitesmoke;
					padding: 0.5rem 1rem;
					border-radius: 0.25rem;
					border: 1px solid color-mix(in srgb, var(--accent-color) 40%, transparent);

					/* Glass vibes - slightly more opaque for dark bg visibility */
					backdrop-filter: blur(10px);
					background-color: color-mix(in srgb, var(--bg-color) 92%, white 5%);

					/* for the countdown bar */
					background-repeat: no-repeat;
					background-position: bottom left;
					background-size: 0% var(--toast-bar);
					background-image: linear-gradient(var(--accent-color), var(--accent-color));

					/* placement - using anchor positioning */
					position: fixed;
					margin-block-start: 1rem;
					position-anchor: --host-anchor;
					position-area: block-end span-inline-start;

					/* Initial/Exit state */
					opacity: 0;
					transform: translateY(-0.25rem);

					transition:
						opacity 0.3s,
						transform 0.3s,
						display 0.3s allow-discrete;

					&:popover-open {
						opacity: 1;
						transform: translateY(0);
						animation: copy-toast 3s linear forwards;

						@starting-style {
							opacity: 0;
							transform: translateY(-0.25rem);
						}
					}
				}
			}
		}
	}

	/* pure CSS state messages, cheeky af */
	&::after {
		color: grey;
		position: fixed;
		font-size: small;
		padding: 0.5rem 1rem;
		border-radius: 0.25rem;
		margin-block-start: 1rem;
		border: solid 1px transparent;
		position-anchor: --host-anchor;
		position-area: span-inline-end block-end;
		background-color: oklch(from whitesmoke l c h / 5%);

		opacity: 1;
		transform: translateY(0);

		transition:
			opacity 0.3s,
			transform 0.3s,
			display 0.3s allow-discrete;

		@starting-style {
			opacity: 0;
			transform: translateY(-0.25rem);
		}
	}
}

/* copied toast animation */
@keyframes copy-toast {
	from {
		background-size: 100% var(--toast-bar);
	}

	to {
		background-size: 0% var(--toast-bar);
	}
}

:host([service="spotify"]) {
	--service-logo: var(--spt-logo);
	--accent-color: var(--spt-color);
}

:host([service="qobuz"]) {
	--service-logo: var(--qbz-logo);
	--accent-color: var(--qbz-color);
}

/* Lots of different messages */
:host(:state(thinking)) {
	& > figure {
		border-color: cornflowerblue;
		background-color: oklch(from cornflowerblue l c h / 10%);

		& > :is(img, figcaption) {
			opacity: 0;
		}
	}

	&::after {
		content: "Thinking about it...";
	}
}

:host(:state(gottem)) {
	& > figure {
		border-color: forestgreen;
		background-color: oklch(from forestgreen l c h / 5%);
	}

	&::after {
		content: "Gottem coach!";
	}
}

:host(:state(seems-legit)) {
	& > figure {
		border-color: darkgoldenrod;
		background-color: oklch(from darkgoldenrod l c h / 10%);
	}

	&::after {
		content: "Sweet! Let's try and find that badboy!";
	}
}

:host(:state(invalid-url)) {
	& > figure {
		border-color: crimson;
		background-color: oklch(from crimson l c h / 10%);
	}

	&::after {
		content: "Bro that's NOT a legit URL!";
	}
}

:host(:state(invalid-host)) {
	& > figure {
		border-color: crimson;
		background-color: oklch(from crimson l c h / 10%);
	}

	&::after {
		content: "That's not a valid " attr(service) " link, come on bro!";
	}
}

:host(:state(invalid-type)) {
	& > figure {
		border-color: crimson;
		background-color: oklch(from crimson l c h / 10%);
	}

	&::after {
		content: var(--type) " is not supported for " attr(service) " bro!";
	}
}

:host(:state(oooff)) {
	& > figure {
		border-color: red;
		background-color: oklch(from red l c h / 10%);
	}

	&::after {
		content: "Oooff sry bro, try again later :(";
	}
}

:host(:state(🙁)) {
	& > figure {
		border-color: red;
		background-color: oklch(from red l c h / 10%);

		/* sad boefje :( */
		& > figcaption > footer > button:last-of-type:disabled {
			background-color: oklch(from red l c h / 20%);
		}
	}

	&::after {
		content: "Oh noes, we couldn't be a boefje :(";
	}
}

:host(:state(😏)) {
	& > figure {
		border-color: forestgreen;
		background-color: oklch(from forestgreen l c h / 5%);
	}

	/* happy boefje :( */
	& > figcaption > footer > button:last-of-type:disabled {
		background-color: oklch(from forestgreen l c h / 20%);
	}

	&::after {
		content: "🤘";
	}
}