/*
 Sellnex globale tekstgrootte
 Wordt geregeld via:
 html[data-font-size="compact"]
 html[data-font-size="normal"]
 html[data-font-size="large"]
*/

:root{
    --snx-font-scale-small:1;
    --snx-font-scale-body:1;
}

html[data-font-size="compact"]{
    --snx-font-scale-small:.92;
    --snx-font-scale-body:.96;
}

html[data-font-size="normal"]{
    --snx-font-scale-small:1;
    --snx-font-scale-body:1;
}

html[data-font-size="large"]{
    --snx-font-scale-small:1.18;
    --snx-font-scale-body:1.08;
}


/* Kleine Sellnex teksten */

html[data-font-size] :where(
    small,
    .muted,
    .meta,
    .sub,
    .subtitle,
    .description,
    .helper,
    .hint,
    .note,
    .section-kicker,
    .kicker,
    .results-meta,
    .order-copy small,
    .product-meta,
    .product-meta-item,
    .shipment-scan,
    .shipment-location,
    .shipment-attention,
    .shipment-next-action,
    .shipment-checked,
    .timeline-copy p,
    .timeline-copy small,
    .timeline-time,
    .info-card span,
    .hero-meta span,
    .metric-label,
    .metric-sub,
    .card-subtitle
){
    font-size:calc(
        1em * var(--snx-font-scale-small)
    );
}


/* Normale teksten iets subtieler schalen */

html[data-font-size="compact"] :where(
    p,
    .theme-copy small,
    .font-copy small
){
    font-size:calc(
        1em * var(--snx-font-scale-body)
    );
}

html[data-font-size="large"] :where(
    p,
    .theme-copy small,
    .font-copy small
){
    font-size:calc(
        1em * var(--snx-font-scale-body)
    );
}


/* Controls netjes houden */

html[data-font-size="large"] :where(
    button,
    input,
    select,
    textarea
){
    letter-spacing:normal;
}


/* Handige classes voor nieuwe pagina's */

.snx-font-small{
    font-size:calc(
        1em * var(--snx-font-scale-small)
    );
}

.snx-font-body{
    font-size:calc(
        1em * var(--snx-font-scale-body)
    );
}