/* components/meeting-grid: a table of areas by dates with a toggle where a meeting is. The toggle is the
   native checkbox restyled: a box of the touch target's size (44 by 44 CSS pixels) with a border in the text
   colour when off, the accent with a tick when on. The tick is tick.svg (next to this file) as a mask in the
   colour on the accent, never markup. Focus is a light ring inside a dark outline, so it shows on every
   background; an invalid toggle has the danger colour as its border. Forced colours use the system colours.
   Contrast with the default tokens: text 21:1, the box's border 21:1, the accent on the page 8.6:1, the tick
   on the accent 8.6:1. */
@layer components {
	.dv-meeting-grid {
		margin-block: var(--space-3);
	}

	.dv-meeting-grid-hint,
	.dv-meeting-grid-error,
	.dv-meeting-grid-status {
		margin-block: var(--space-2);
	}

	.dv-meeting-grid-error,
	.dv-meeting-grid-status {
		font-weight: bold;
		color: var(--color-danger);
	}

	.dv-meeting-grid-status:empty {
		display: none;
	}

	/* At phone width the table scrolls sideways inside its box, the page does not. */
	.dv-meeting-grid-scroll {
		max-inline-size: 100%;
		overflow-x: auto;
	}

	.dv-meeting-grid-table {
		border-collapse: collapse;
	}

	.dv-meeting-grid-table caption {
		padding-block: var(--space-2);
		font-weight: bold;
		text-align: start;
	}

	.dv-meeting-grid-table th,
	.dv-meeting-grid-table td {
		padding: var(--space-1) var(--space-2);
		border: 1px solid var(--color-border);
	}

	.dv-meeting-grid-table th {
		text-align: start;
		vertical-align: bottom;
	}

	.dv-meeting-grid-table td {
		text-align: center;
		vertical-align: middle;
	}

	.dv-meeting-grid-toggle {
		appearance: none;
		display: inline-grid;
		place-content: center;
		box-sizing: border-box;
		inline-size: var(--touch-target);
		block-size: var(--touch-target);
		margin: 0;
		background: var(--color-background);
		border: 2px solid var(--color-text);
		border-radius: var(--radius-panel);
		cursor: pointer;
		vertical-align: middle;
	}

	.dv-meeting-grid-toggle::before {
		content: "";
		inline-size: 1.6rem;
		block-size: 1.6rem;
		-webkit-mask-image: url(tick.svg);
		mask-image: url(tick.svg);
		-webkit-mask-size: contain;
		mask-size: contain;
		-webkit-mask-repeat: no-repeat;
		mask-repeat: no-repeat;
		background-color: transparent;
	}

	.dv-meeting-grid-toggle:checked {
		background: var(--color-accent);
		border-color: var(--color-accent);
	}

	.dv-meeting-grid-toggle:checked::before {
		background-color: var(--color-on-accent);
	}

	.dv-meeting-grid-toggle[aria-invalid="true"] {
		border-color: var(--color-danger);
		border-width: 3px;
	}

	.dv-meeting-grid-toggle:focus-visible {
		outline: var(--focus-outline-width) solid var(--color-focus-outline);
		outline-offset: var(--focus-outline-offset);
		box-shadow: 0 0 0 var(--focus-outline-offset) var(--color-focus-text);
	}

	@media (forced-colors: active) {
		.dv-meeting-grid-toggle {
			forced-color-adjust: none;
			background: Canvas;
			border-color: CanvasText;
		}

		.dv-meeting-grid-toggle:checked {
			background: Highlight;
			border-color: Highlight;
		}

		.dv-meeting-grid-toggle:checked::before {
			background-color: HighlightText;
		}

		.dv-meeting-grid-toggle:focus-visible {
			outline-color: CanvasText;
			box-shadow: 0 0 0 var(--focus-outline-offset) Canvas;
		}
	}
}