@layer components {
	@scope (resume-audio) {
		:scope {
			display: grid;
			gap: 0.25rem;
			min-inline-size: 0;
			padding-block-start: 1rem;
			border-block-start: 1px solid var(--border);
		}

		audio { display: none; }

		:scope > div {
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 1rem;
			margin-block-start: 0.75rem;
		}

		button {
			display: grid;
			place-items: center;
			inline-size: 2.75rem;
			block-size: 2.75rem;
			padding: 0;
			border: 0;
			border-radius: 50%;
			background: transparent;
			color: var(--accent);
			cursor: pointer;

			&:not([data-toggle]):hover:not(:disabled) {
				background: color-mix(in oklch, var(--accent) 12%, transparent);
			}

			&:disabled {
				opacity: 0.4;
				cursor: not-allowed;
			}

			&[data-toggle] {
				inline-size: 3.5rem;
				block-size: 3.5rem;
				background: var(--accent);
				color: var(--accent-ink);

				&:hover:not(:disabled) {
					background: color-mix(in oklch, var(--accent) 85%, var(--ink-muted));
				}

				svg { display: none; }
				&[data-state="play"] .icon-play,
				&[data-state="pause"] .icon-pause,
				&[data-state="retry"] .icon-retry { display: block; }
			}
		}

		svg {
			inline-size: 1.75rem;
			block-size: 1.75rem;
			fill: none;
			stroke: currentColor;
			stroke-width: 1.7;
			stroke-linecap: round;
			stroke-linejoin: round;
		}

		.icon-play, .icon-pause {
			fill: currentColor;
			stroke: none;
		}

		text {
			fill: currentColor;
			stroke: none;
			font: 700 9px var(--font-body);
			text-anchor: middle;
		}

		input[type="range"] {
			inline-size: 100%;
			min-inline-size: 0;
			min-block-size: 2.75rem;
			margin: 0;
			accent-color: var(--accent);
			cursor: pointer;
		}

		label {
			display: grid;
			grid-template-columns: 1fr auto;
			align-items: center;
			column-gap: var(--inline-space);
			font-size: 0.8rem;
			color: var(--ink-muted);

			input {
				grid-column: 1;
				grid-row: 2;
			}

			span {
				grid-column: 2;
				grid-row: 2;
				font-variant-numeric: tabular-nums;
			}
		}

		output, [role="status"] {
			font-size: 0.8rem;
			color: var(--ink-muted);
			font-variant-numeric: tabular-nums;
			text-align: center;
		}

		[role="status"]:empty { display: none; }
	}
}