/*
 * Keuzelijsten en datumvelden uit assets/js/forms.js. Het dichte veld houdt de
 * klassen van het oorspronkelijke veld, en dus de opmaak uit het formulier; hier
 * staat wat erbij komt: de uitgeklapte lijst en de kalender.
 *
 * Figma heeft alleen de dichte velden. Lijst en kalender volgen dezelfde taal:
 * wit vlak, petrol voor wat gekozen is, een oranje stip zoals bij de keuzerondjes.
 */

/* Wit vlak dat onder het veld uitklapt, in de bovenste laag van de pagina */

.sm-listbox,
.sm-calendar {
	--focus-color: var(--color-focus);
	inset: auto;
	margin: 0;
	border: 0;
	border-top: 1px solid var(--sm-border-subtle);
	background: var(--sm-bg-default);
	box-shadow: 0 0.75rem 2rem color-mix(in srgb, var(--sm-petrol) 20%, transparent);
	color: var(--sm-text-primary);
	font-family: var(--sm-font);
	font-size: var(--sm-body-size);
}

/* Keuzelijst */

select[hidden] {
	display: none;
}

.sm-select {
	display: flex;
	align-items: center;
	cursor: pointer;
	user-select: none;
}

.sm-select__value {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Zonder keuze lijkt de lege optie op de voorbeeldtekst in de andere velden. */
.sm-select.is-empty {
	color: var(--sm-text-muted);
	font-size: var(--sm-klein-size);
}

.sm-select[aria-expanded="true"],
.sm-date:has([aria-expanded="true"]) .sm-date__input {
	border-bottom-color: var(--sm-teal-tint-2);
}

.sm-select[aria-invalid="true"] {
	border-bottom-color: var(--sm-oranje);
}

.sm-listbox {
	width: var(--anchor-width);
	max-height: min(17.5rem, 50vh);
	padding: 0.5rem 0;
	overflow-y: auto;
	line-height: 1.5rem;
	list-style: none;
}

.sm-listbox__option {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: 3rem;
	padding: 0.75rem 1rem;
	cursor: pointer;
}

.sm-listbox__option.is-active {
	background: var(--sm-bg-warm);
	box-shadow: inset 3px 0 0 var(--sm-petrol);
}

.sm-listbox__option[aria-selected="true"] {
	color: var(--sm-text-brand);
}

.sm-listbox__option[aria-selected="true"]::after {
	content: "";
	flex: none;
	width: 0.625rem;
	height: 0.625rem;
	border-radius: 50%;
	background: var(--sm-oranje);
}

.sm-listbox__option[aria-disabled="true"] {
	color: var(--sm-text-muted);
	cursor: default;
}

/* Melding onder een keuzelijst die nog leeg is */

.sm-field-error {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	font-size: var(--sm-klein-size);
	line-height: var(--sm-klein-line-height);
}

.sm-field-error::before {
	content: "";
	flex: none;
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: var(--sm-oranje);
}

.sm-field-error[hidden] {
	display: none;
}

/* Datumveld: tekstveld met de knop voor de kalender rechts erin */

.sm-date {
	position: relative;
	display: block;
}

.sm-date .sm-date__input {
	padding-right: 3.5rem;
}

/* Een getypte datum houdt de gewone letter, ook als hij nog niet klopt. */
.sm-date .sm-date__input:not(:placeholder-shown) {
	color: var(--sm-text-primary);
	font-size: inherit;
}

.sm-date__toggle {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 3.25rem;
	padding: 0;
	border: 0;
	background: url("../images/icons/kalender.svg") center / 1.25rem no-repeat;
	cursor: pointer;
}

/* Kalender */

.sm-calendar {
	width: min(var(--anchor-width), 22.5rem);
	padding: 0.75rem 1rem 1rem;
	line-height: 1.5rem;
}

.sm-calendar__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	margin-bottom: 0.5rem;
}

.sm-calendar__month {
	color: var(--sm-text-brand);
	text-align: center;
}

.sm-calendar__nav {
	display: grid;
	flex: none;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.sm-calendar__nav::before {
	content: "";
	width: 1.25rem;
	height: 1.25rem;
	background: url("../images/icons/chevron.svg") center / contain no-repeat;
}

.sm-calendar__nav--previous::before {
	transform: rotate(90deg);
}

.sm-calendar__nav--next::before {
	transform: rotate(-90deg);
}

.sm-calendar__nav:hover {
	background: var(--sm-bg-warm);
}

.sm-calendar__nav[aria-disabled="true"] {
	background: none;
	cursor: default;
	opacity: 0.3;
}

.sm-calendar__grid {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
}

.sm-calendar__grid th {
	height: 2rem;
	padding: 0;
	color: var(--sm-text-secondary);
	font-size: var(--sm-klein-size);
	font-weight: 400;
	text-align: center;
}

.sm-calendar__grid td {
	height: 2.75rem;
	padding: 0;
	text-align: center;
}

.sm-calendar__day {
	position: relative;
	cursor: pointer;
}

.sm-calendar__day:hover {
	background: var(--sm-bg-warm);
}

.sm-calendar__day:focus-visible {
	outline-offset: -3px;
}

/* Vandaag: een oranje stip onder het getal */
.sm-calendar__day[aria-current="date"]::after {
	content: "";
	position: absolute;
	bottom: 0.375rem;
	left: calc(50% - 0.15625rem);
	width: 0.3125rem;
	height: 0.3125rem;
	border-radius: 50%;
	background: var(--sm-oranje);
}

.sm-calendar__day[aria-selected="true"] {
	background: var(--sm-bg-brand);
	color: var(--sm-text-on-brand);
}

.sm-calendar__day[aria-disabled="true"] {
	background: none;
	color: var(--sm-text-muted);
	cursor: default;
}