/* ══════════════════════════════════════════════════════════════════════
   Værn om øvelserne.

   Øvelsernes egen CSS er skrevet til at stå alene. På body-sds.dk er der
   to ting på siden, der griber ind i dem, og begge ophæves her — kun
   inde i .bsds-vejr, så resten af sitet er urørt.

   Indlæses før øvelsernes egne stylesheets (se tool.php).
   ══════════════════════════════════════════════════════════════════════ */

/* 1. Sitet har en global regel `svg{max-width:20px}`, tænkt til ikoner.
      Den rammer også øvelsernes tegninger, som derfor skrumper til en
      prik midt i cirklen. Én klasse foran er nok til at vinde over den. */
.bsds-vejr svg {
	max-width: none;
	max-height: none;
}

/* 2. Noget på siden pakker tekstindhold ind i <code>. Det gør teksten
      monospace, og fordi øvelsernes tegning måles i procent af sin
      forælder, klemmer indpakningen den også mindre.
      `display: contents` fjerner elementet fra layoutet uden at røre
      indholdet — teksten og tegningen opfører sig som om det ikke var
      der. */
.bsds-vejr code {
	display: contents;
	font: inherit;
	background: none;
	padding: 0;
}

/* ══════════════════════════════════════════════════════════════════════
   Knappernes ikoner

   Overleveringen bruger skrifttegn som ikoner, og de passer ikke sammen:

     ▶  U+25B6  sort trekant        — findes i de fleste skrifter, tung
     Ⅱ  U+2161  ROMERTALLET TO      — ikke et pausesymbol
     ↻  U+21BB  cirkelpil           — tynd streg

   Plus Jakarta Sans har ingen af dem, så browseren finder tre
   forskellige reservefonte. Især romertallet lander i en serif og ser
   ud som noget helt andet end de to andre.

   Her tegnes de tre ikoner i stedet som vektorer fra samme familie, så
   de har ens vægt og ser ens ud overalt. Tegnene bliver siddende i
   HTML'en (de er aria-hidden, så skærmlæsere er upåvirkede) — de bliver
   bare ikke vist.
   ══════════════════════════════════════════════════════════════════════ */

@supports (mask-image: none) or (-webkit-mask-image: none) {

	.bsds-vejr button[data-action] > [aria-hidden='true'],
	.bsds-vejr button[data-bsds-id] > [aria-hidden='true'] {
		position: relative;
		font-size: 0;
	}

	.bsds-vejr button[data-action] > [aria-hidden='true']::before,
	.bsds-vejr button[data-bsds-id] > [aria-hidden='true']::before {
		content: '';
		position: absolute;
		inset: 0;
		margin: auto;
		width: 44%;
		height: 44%;
		background: currentColor;
		-webkit-mask-position: center;
		mask-position: center;
		-webkit-mask-repeat: no-repeat;
		mask-repeat: no-repeat;
		-webkit-mask-size: contain;
		mask-size: contain;
	}

	/* Trekanten sidder en anelse til højre, så den ser centreret ud. */
	.bsds-vejr button[data-action='start'] > [aria-hidden='true']::before,
	.bsds-vejr button[data-bsds-id='start'] > [aria-hidden='true']::before {
		transform: translateX(6%);
		-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' stroke='%23000' stroke-width='2' stroke-linejoin='round' d='M8 5.6 18.4 12 8 18.4Z'/%3E%3C/svg%3E");
		mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' stroke='%23000' stroke-width='2' stroke-linejoin='round' d='M8 5.6 18.4 12 8 18.4Z'/%3E%3C/svg%3E");
	}

	.bsds-vejr button[data-action='pause'] > [aria-hidden='true']::before,
	.bsds-vejr button[data-bsds-id='pause'] > [aria-hidden='true']::before {
		-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M9 5.5v13M15 5.5v13'/%3E%3C/svg%3E");
		mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M9 5.5v13M15 5.5v13'/%3E%3C/svg%3E");
	}

	.bsds-vejr button[data-action='reset'] > [aria-hidden='true']::before,
	.bsds-vejr button[data-bsds-id='reset'] > [aria-hidden='true']::before {
		-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M17.65 6.35A7.95 7.95 0 0 0 12 4a8 8 0 1 0 7.73 10h-2.08A5.99 5.99 0 0 1 12 18a6 6 0 1 1 4.22-10.22L13 11h7V4z'/%3E%3C/svg%3E");
		mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M17.65 6.35A7.95 7.95 0 0 0 12 4a8 8 0 1 0 7.73 10h-2.08A5.99 5.99 0 0 1 12 18a6 6 0 1 1 4.22-10.22L13 11h7V4z'/%3E%3C/svg%3E");
	}
}