/* POPUPS: GEDEELDE BASIS
Geldt voor elke soort en layout uit backend/popups/registry.php. De opmaak
van een layout staat in een eigen bestand in deze map.
--------------------------------------------------- */

/* VARIABELEN
Elke tekstkleur haalt WCAG AA op zijn achtergrond: 4,5:1 voor kleine tekst,
3:1 voor grote tekst en voor de focusring.
--------------------------------------------------- */
.px-popup {
--popup-accent: var(--red);
--popup-accent-small: var(--red);
--popup-chip-bg: color-mix(in srgb, color-mix(in srgb, var(--pink) 25%, var(--white)) 95.5%, var(--text));
--popup-chip-color: color-mix(in srgb, var(--red) 85%, var(--text));
--popup-close-size: 36px;
--popup-close-icon: 13px;
--popup-close-offset: 12px;
--popup-focus-width: 3px;
}

/* ACCENTKLEUR
--popup-accent is voor de titel (grote tekst), --popup-accent-small voor de
bovenregel en de tweede link. Rood is de standaard. Blauw haalt op wit
4,47:1 en krijgt voor kleine tekst een iets donkerdere variant.
--------------------------------------------------- */
.px-popup--accent-blue {
--popup-accent: var(--blue);
--popup-accent-small: color-mix(in srgb, var(--blue) 90%, var(--text));
}

.px-popup--accent-black {
--popup-accent: var(--text);
--popup-accent-small: var(--text);
}

/* DATUMKLEUR
Achtergrond en tekst van de datumlabels. Lichtroze is de standaard en ligt
zo dicht mogelijk bij de mockup (#F2E6E4).
--------------------------------------------------- */
.px-popup--dates-light-yellow {
--popup-chip-bg: var(--light-yellow);
--popup-chip-color: var(--text);
}

.px-popup--dates-light-blue {
--popup-chip-bg: var(--light-blue);
--popup-chip-color: color-mix(in srgb, var(--blue) 55%, var(--text));
}

/* VERBERGEN
Tot de JS de popup opent, staat hij op hidden. !important omdat een layout
het rootelement zelf een display mag geven.
--------------------------------------------------- */
.px-popup[hidden] {
display:none !important;
}

/* SLUITKNOP
--------------------------------------------------- */
.px-popup .px-popup__close {
position:absolute;
top:var(--popup-close-offset);
right:var(--popup-close-offset);
z-index:2;
display:grid;
place-items:center;
width:var(--popup-close-size);
height:var(--popup-close-size);
margin:0;
padding:0;
border:0;
border-radius:var(--border-radius-button);
background:var(--white);
box-shadow:var(--box-shadow-hover);
cursor:pointer;
transition:var(--transition);
}

.px-popup .px-popup__close svg {
display:block;
width:var(--popup-close-icon);
height:var(--popup-close-icon);
}

.px-popup .px-popup__close svg path {
fill:var(--text);
}

.px-popup .px-popup__close:hover,
.px-popup .px-popup__close:focus-visible {
transform:rotate(90deg);
background:var(--light-yellow);
}

/* FOCUS
Zwarte ring van 3px met 3px ruimte: 21:1 op de witte kaart. font-styles.php
zet outline:0 !important op elke a en button, daarom hier ook !important.
De sluitknop staat op het beeld; een witte rand in die ruimte houdt de ring
daar zichtbaar, wat er ook op het beeld staat.
--------------------------------------------------- */
.px-popup .px-popup__close:focus-visible,
.px-popup a:focus-visible {
outline:var(--popup-focus-width) solid var(--text) !important;
outline-offset:var(--popup-focus-width);
}

.px-popup .px-popup__close:focus-visible {
box-shadow:var(--box-shadow-hover), 0 0 0 var(--popup-focus-width) var(--white);
}

/* MINDER BEWEGING
Geen schuifanimatie en geen overgangen. !important zodat het ook geldt
voor de overgangen uit de layout en de themaknop.
--------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
.px-popup,
.px-popup *,
.px-popup *::before,
.px-popup *::after {
transition:none !important;
animation:none !important;
}
}

/* PRINT
--------------------------------------------------- */
@media print {
.px-popup {
display:none !important;
}
}