/** * @license SEE LICENSE.md * Copyright (c) 2021 NL Design System Community * All rights reserved */ /* stylelint-disable no-duplicate-selectors */ /** * Do not edit directly * Generated on Thu, 27 Jun 2024 07:33:04 GMT */ .amsterdam-theme { --utrecht-unordered-list-item-margin-block-end: 16px; --utrecht-unordered-list-item-margin-block-start: 0; --utrecht-unordered-list-margin-block-end: 1rem; --utrecht-unordered-list-margin-block-start: 0; --utrecht-textbox-border-width: 1px; --utrecht-table-row-alternate-even-background-color: hsl(0deg 0% 100%); --utrecht-table-row-alternate-odd-background-color: hsl(0deg 0% 90%); --utrecht-table-cell-padding-inline-start: 6px; --utrecht-table-cell-padding-inline-end: 6px; --utrecht-table-cell-padding-block-start: 15px; --utrecht-table-cell-padding-block-end: 15px; --utrecht-table-header-font-weight: bold; --utrecht-separator-margin-block-end: 1em; --utrecht-separator-margin-block-start: 1em; --utrecht-separator-block-size: 1px; --utrecht-separator-color: hsl(0 0% 80%); --utrecht-radio-button-border-width: 2px; --utrecht-page-max-inline-size: 960px; --utrecht-page-footer-padding-inline-end: 30px; --utrecht-page-footer-padding-inline-start: 30px; --utrecht-page-footer-padding-block-end: 40px; --utrecht-page-footer-padding-block-start: 40px; --utrecht-link-hover-text-decoration: none; --utrecht-link-text-decoration: underline; --utrecht-heading-6-margin-block-start: 0; --utrecht-heading-6-margin-block-end: 0; --utrecht-heading-5-margin-block-start: 0; --utrecht-heading-5-margin-block-end: 8px; --utrecht-heading-4-margin-block-start: 0; --utrecht-heading-4-margin-block-end: 8px; --utrecht-heading-3-margin-block-start: 0; --utrecht-heading-3-margin-block-end: 8px; --utrecht-heading-2-margin-block-start: 0; --utrecht-heading-2-margin-block-end: 8px; --utrecht-heading-1-margin-block-start: 0; --utrecht-heading-1-margin-block-end: 0; --utrecht-form-select-max-inline-size: 100%; --utrecht-form-select-font-size: 1rem; --utrecht-form-select-border-width: 1px; --utrecht-form-input-padding-inline-start: 24px; --utrecht-form-input-padding-block-end: 9px; --utrecht-form-input-padding-block-start: 9px; --utrecht-form-input-border-width: 2px; --utrecht-emphasis-strong-font-weight: 800; --utrecht-document-line-height: 22px; --utrecht-document-font-size: 16px; --utrecht-custom-radio-button-hover-border-width: 3px; --utrecht-custom-radio-button-size: 24px; --utrecht-custom-radio-button-border-width: 2px; --utrecht-custom-checkbox-icon-size: 16px; --utrecht-custom-checkbox-focus-border-width: 2px; --utrecht-custom-checkbox-padding: 0; --utrecht-custom-checkbox-border-radius: 0; --utrecht-custom-checkbox-border-width: 2px; --utrecht-custom-checkbox-size: 24px; --utrecht-checkbox-hover-border-width: 3px; --utrecht-checkbox-border-width: 2px; --utrecht-button-subtle-border-width: 2px; --utrecht-button-subtle-border-color: transparent; --utrecht-button-secondary-action-hover-border-width: 3px; --utrecht-button-secondary-action-border-width: 2px; --utrecht-button-min-block-size: 48px; --utrecht-button-padding-block-end: 9px; --utrecht-button-padding-block-start: 9px; --utrecht-button-padding-inline-end: 16px; --utrecht-button-padding-inline-start: 16px; --utrecht-blockquote-margin-inline-block-end: 20px; --utrecht-blockquote-margin-inline-block-start: 20px; --utrecht-blockquote-margin-inline-end: 0; --utrecht-blockquote-margin-inline-start: 16px; --utrecht-badge-padding-inline: 8px; --utrecht-badge-border-radius: 0; --utrecht-badge-counter-padding-inline: 1ex; --utrecht-badge-counter-padding-block: 1ex; --utrecht-badge-counter-border-radius: 3ex; --utrecht-backdrop-fade-in-animation-duration: 0.2s; --utrecht-backdrop-z-index: 500; --utrecht-backdrop-opacity: 0.5; --utrecht-article-max-inline-size: 640px; /* FIXME new */ --utrecht-alert-ok-border-width: 4px; --utrecht-alert-error-border-width: 4px; --utrecht-alert-padding-inline-end: 24px; --utrecht-alert-padding-inline-start: 24px; --utrecht-alert-padding-block-end: 24px; --utrecht-alert-padding-block-start: 18px; --utrecht-space-column-5xl: 40px; --utrecht-space-column-4xl: 36px; --utrecht-space-column-3xl: 32px; --utrecht-space-column-2xl: 28px; --utrecht-space-column-xl: 24px; --utrecht-space-column-lg: 20px; --utrecht-space-column-md: 16px; --utrecht-space-column-sm: 12px; --utrecht-space-column-xs: 8px; --utrecht-space-column-2xs: 4px; --utrecht-space-column-3xs: 0; --utrecht-space-row-5xl: 40px; --utrecht-space-row-4xl: 36px; --utrecht-space-row-3xl: 32px; --utrecht-space-row-2xl: 28px; --utrecht-space-row-xl: 24px; --utrecht-space-row-lg: 20px; --utrecht-space-row-md: 16px; --utrecht-space-row-sm: 12px; --utrecht-space-row-xs: 8px; --utrecht-space-row-2xs: 4px; --utrecht-space-row-3xs: 0; --utrecht-space-inline-3xl: 3ch; --utrecht-space-inline-2xl: 2ch; --utrecht-space-inline-xl: 1.75ch; --utrecht-space-inline-lg: 1.5ch; --utrecht-space-inline-md: 1ch; --utrecht-space-inline-sm: 0.75ch; --utrecht-space-inline-xs: 0.5ch; --utrecht-space-inline-2xs: 0.25ch; --utrecht-space-inline-3xs: 0.125ch; --utrecht-space-block-5xl: 40px; --utrecht-space-block-4xl: 36px; --utrecht-space-block-3xl: 32px; --utrecht-space-block-2xl: 28px; --utrecht-space-block-xl: 24px; --utrecht-space-block-lg: 20px; --utrecht-space-block-md: 16px; --utrecht-space-block-sm: 12px; --utrecht-space-block-xs: 8px; --utrecht-space-block-2xs: 4px; --utrecht-space-block-3xs: 0; --utrecht-action-submit-cursor: pointer; --utrecht-action-navigate-cursor: pointer; --utrecht-action-disabled-cursor: not-allowed; --utrecht-action-busy-cursor: wait; --utrecht-action-activate-cursor: pointer; --amsterdam-button-sm-min-inline-block-size: 49px; --amsterdam-viewport-lg-margin-inline-end: 42.67px; --amsterdam-viewport-lg-margin-inline-start: 42.67px; --amsterdam-viewport-lg-gap: 32px; --amsterdam-viewport-lg-columns: 12; --amsterdam-viewport-lg-min-width: 820px; --amsterdam-viewport-lg-max-width: null; --amsterdam-viewport-md-margin-inline-end: 18.22px; --amsterdam-viewport-md-margin-inline-start: 18.22px; --amsterdam-viewport-md-gap: 13.67px; --amsterdam-viewport-md-columns: 12; --amsterdam-viewport-md-min-width: 428px; --amsterdam-viewport-md-max-width: 820px; --amsterdam-viewport-sm-margin-inline-end: 18.21px; --amsterdam-viewport-sm-margin-inline-start: 18.21px; --amsterdam-viewport-sm-gap: 18.21px; --amsterdam-viewport-sm-columns: 4; --amsterdam-viewport-sm-max-width: 428px; --amsterdam-viewport-sm-min-width: 0; --amsterdam-space-block-mobile-6: 72px; --amsterdam-space-block-mobile-5: 56px; --amsterdam-space-block-mobile-4: 40px; --amsterdam-space-block-mobile-3: 24px; --amsterdam-space-block-mobile-2: 16px; --amsterdam-space-block-mobile-1: 8px; --amsterdam-space-block-mobile-0: 0px; --amsterdam-space-block-6: 120px; --amsterdam-space-block-5: 80px; --amsterdam-space-block-4: 40px; --amsterdam-space-block-3: 24px; --amsterdam-space-block-2: 16px; --amsterdam-space-block-1: 8px; --amsterdam-space-block-0: 0px; --amsterdam-action-secondary-color: #EC0000; --amsterdam-action-secondary-dark-color: bc0000; --amsterdam-action-primary-color: #00A03C; --amsterdam-action-primary-dark-color: 00387a; --amsterdam-typography-weight-scale-normal-font-weight: 400; --amsterdam-typography-weight-scale-semi-bold-font-weight: 500; --amsterdam-typography-weight-scale-bold-font-weight: 800; --amsterdam-typography-scale-sm-quote-line-height: 130%; --amsterdam-typography-scale-sm-quote-font-weight: 800; --amsterdam-typography-scale-sm-quote-font-size: 24px; --amsterdam-typography-scale-sm-body-small-line-height: 150%; --amsterdam-typography-scale-sm-body-small-font-weight: 400; --amsterdam-typography-scale-sm-body-small-font-size: 16px; --amsterdam-typography-scale-sm-body-line-height: 160%; --amsterdam-typography-scale-sm-body-font-weight: 400; --amsterdam-typography-scale-sm-body-font-size: 18px; --amsterdam-typography-scale-sm-intro-line-height: 160%; --amsterdam-typography-scale-sm-intro-font-weight: 400; --amsterdam-typography-scale-sm-intro-font-size: 22px; --amsterdam-typography-scale-sm-h6-line-height: 140%; --amsterdam-typography-scale-sm-h6-font-weight: 800; --amsterdam-typography-scale-sm-h6-font-size: 16px; --amsterdam-typography-scale-sm-h5-line-height: 140%; --amsterdam-typography-scale-sm-h5-font-weight: 800; --amsterdam-typography-scale-sm-h5-font-size: 18px; --amsterdam-typography-scale-sm-h4-line-height: 140%; --amsterdam-typography-scale-sm-h4-font-weight: 800; --amsterdam-typography-scale-sm-h4-font-size: 22px; --amsterdam-typography-scale-sm-h3-line-height: 130%; --amsterdam-typography-scale-sm-h3-font-weight: 800; --amsterdam-typography-scale-sm-h3-font-size: 24px; --amsterdam-typography-scale-sm-h2-line-height: 120%; --amsterdam-typography-scale-sm-h2-font-weight: 800; --amsterdam-typography-scale-sm-h2-font-size: 28px; --amsterdam-typography-scale-sm-h1-small-line-height: 110%; --amsterdam-typography-scale-sm-h1-small-font-weight: 800; --amsterdam-typography-scale-sm-h1-small-font-size: 30px; --amsterdam-typography-scale-sm-h1-line-height: 100%; --amsterdam-typography-scale-sm-h1-font-weight: 800; --amsterdam-typography-scale-sm-h1-font-size: 32px; --amsterdam-typography-scale-md-quote-line-height: 110%; --amsterdam-typography-scale-md-quote-font-weight: 800; --amsterdam-typography-scale-md-quote-font-size: 40px; --amsterdam-typography-scale-md-body-small-line-height: 160%; --amsterdam-typography-scale-md-body-small-font-weight: 400; --amsterdam-typography-scale-md-body-small-font-size: 18px; --amsterdam-typography-scale-md-body-line-height: 160%; --amsterdam-typography-scale-md-body-font-weight: 400; --amsterdam-typography-scale-md-body-font-size: 24px; --amsterdam-typography-scale-md-intro-line-height: 150%; --amsterdam-typography-scale-md-intro-font-weight: 400; --amsterdam-typography-scale-md-intro-font-size: 30px; --amsterdam-typography-scale-md-h6-line-height: 130%; --amsterdam-typography-scale-md-h6-font-weight: 800; --amsterdam-typography-scale-md-h6-font-size: 18px; --amsterdam-typography-scale-md-h5-line-height: 130%; --amsterdam-typography-scale-md-h5-font-weight: 800; --amsterdam-typography-scale-md-h5-font-size: 24px; --amsterdam-typography-scale-md-h4-line-height: 120%; --amsterdam-typography-scale-md-h4-font-weight: 800; --amsterdam-typography-scale-md-h4-font-size: 32px; --amsterdam-typography-scale-md-h3-line-height: 110%; --amsterdam-typography-scale-md-h3-font-weight: 800; --amsterdam-typography-scale-md-h3-font-size: 40px; --amsterdam-typography-scale-md-h2-line-height: 110%; --amsterdam-typography-scale-md-h2-font-weight: 800; --amsterdam-typography-scale-md-h2-font-size: 56px; --amsterdam-typography-scale-md-h1-small-line-height: 110%; --amsterdam-typography-scale-md-h1-small-font-weight: 800; --amsterdam-typography-scale-md-h1-small-font-size: 60px; --amsterdam-typography-scale-md-h1-line-height: 100%; --amsterdam-typography-scale-md-h1-font-weight: 800; --amsterdam-typography-scale-md-h1-font-size: 80px; --amsterdam-typography-scale-lg-quote-line-height: 110%; --amsterdam-typography-scale-lg-quote-font-weight: 800; --amsterdam-typography-scale-lg-quote-font-size: 51.93px; --amsterdam-typography-scale-lg-body-small-line-height: 160%; --amsterdam-typography-scale-lg-body-small-font-weight: 400; --amsterdam-typography-scale-lg-body-small-font-size: 23.37px; --amsterdam-typography-scale-lg-body-line-height: 160%; --amsterdam-typography-scale-lg-body-font-weight: 400; --amsterdam-typography-scale-lg-body-font-size: 31.16px; --amsterdam-typography-scale-lg-intro-line-height: 150%; --amsterdam-typography-scale-lg-intro-font-weight: 400; --amsterdam-typography-scale-lg-intro-font-size: 38.95px; --amsterdam-typography-scale-lg-h6-line-height: 130%; --amsterdam-typography-scale-lg-h6-font-weight: 800; --amsterdam-typography-scale-lg-h6-font-size: 24.12px; --amsterdam-typography-scale-lg-h5-line-height: 120%; --amsterdam-typography-scale-lg-h5-font-weight: 800; --amsterdam-typography-scale-lg-h5-font-size: 31.16px; --amsterdam-typography-scale-lg-h4-line-height: 120%; --amsterdam-typography-scale-lg-h4-font-weight: 800; --amsterdam-typography-scale-lg-h4-font-size: 41.54px; --amsterdam-typography-scale-lg-h3-line-height: 110%; --amsterdam-typography-scale-lg-h3-font-weight: 800; --amsterdam-typography-scale-lg-h3-font-size: 51.93px; --amsterdam-typography-scale-lg-h2-line-height: 110%; --amsterdam-typography-scale-lg-h2-font-weight: 800; --amsterdam-typography-scale-lg-h2-font-size: 72.7px; --amsterdam-typography-scale-lg-h1-small-line-height: 110%; --amsterdam-typography-scale-lg-h1-small-font-weight: 800; --amsterdam-typography-scale-lg-h1-small-font-size: 77.98px; --amsterdam-typography-scale-lg-h1-line-height: 100%; --amsterdam-typography-scale-lg-h1-font-weight: 800; --amsterdam-typography-scale-lg-h1-font-size: 103.85px; --amsterdam-typography-sans-serif-font-family: Amsterdam Sans, Arial, sans-serif; --amsterdam-color-v1-yellow-50: hsl(54 100% 50%); /* Supplement-Yellow */ --amsterdam-color-v1-lightblue-50: hsl(200 100% 46%); /* Supplement-Lightblue */ --amsterdam-color-v1-lightgreen-40: hsl(66 100% 41%); /* Supplement-Lightgreen */ --amsterdam-color-v1-orange-50: hsl(34 100% 50%); /* Supplement-Orange */ --amsterdam-color-v1-pink-50: hsl(326 100% 45%); /* Supplement-Pink */ --amsterdam-color-v1-purple-30: hsl(315 100% 31%); /* Supplement-Purple */ --amsterdam-color-v1-amber-50: hsl(46 99% 54%); --amsterdam-color-v1-green-30: hsl(143 100% 31%); /* Supplement-Darkgreen */ --amsterdam-color-v1-grey-100: hsl(0 0% 100%); --amsterdam-color-v1-grey-95: hsl(0 0% 96%); /* neutral-grey1 */ --amsterdam-color-v1-grey-90: hsl(0 0% 90%); /* neutral-grey2 */ --amsterdam-color-v1-grey-70: hsl(0 0% 71%); /* neutral-grey3 */ --amsterdam-color-v1-grey-50: hsl(0 0% 46%); /* neutral-grey4 */ --amsterdam-color-v1-grey-20: hsl(0 0% 20%); /* neutral-grey5 */ --amsterdam-color-v1-grey-0: hsl(0 0% 0%); --amsterdam-color-v1-black-overlay: hsla(0 0% 0% / 70%); /* Overlay-Black70 */ --amsterdam-color-v1-black: hsl(0 0% 0%); /* Primary-Black */ --amsterdam-color-v1-white: hsl(0 0% 100%); /* Primary-White */ --amsterdam-color-v1-blue-30: hsl(213 100% 30%); /* Primary-Darkblue */ --amsterdam-color-v1-blue-25: hsl(212 100% 24%); --amsterdam-color-v1-red-50: hsl(0 100% 46%); /* Primary-Red */ --amsterdam-color-v1-red-40: hsl(0 100% 37%); --amsterdam-color-neutral-grey4: #323232; --amsterdam-color-neutral-grey3: #767676; --amsterdam-color-neutral-grey2: #B4B4B4; --amsterdam-color-neutral-grey1: #E6E6E6; --amsterdam-color-yellow: #FFE600; --amsterdam-color-lightblue: #009DEC; --amsterdam-color-lightgreen: #BED200; --amsterdam-color-orange: #FF9100; --amsterdam-color-magenta: #E50082; --amsterdam-color-purple: #A00078; --amsterdam-color-dark-blue: #00387A; --amsterdam-color-primary-red: #EC0000; --amsterdam-color-primary-blue: #004699; --amsterdam-color-primary-white: #ffffff; --amsterdam-color-primary-black: #000000; --utrecht-unordered-list-marker-color: var(--amsterdam-color-v1-grey-50); --utrecht-textbox-invalid-border-color: var(--amsterdam-color-primary-red); --utrecht-textbox-disabled-color: var(--amsterdam-color-neutral-grey2); --utrecht-textbox-disabled-border-color: var(--amsterdam-color-neutral-grey2); --utrecht-textbox-placeholder-color: var(--amsterdam-color-neutral-grey3); --utrecht-textbox-color: var(--amsterdam-color-primary-black); --utrecht-textbox-border-color: var(--amsterdam-color-primary-black); --utrecht-select-invalid-border-color: var(--amsterdam-color-primary-red); --utrecht-select-focus-border-color: var(--amsterdam-color-primary-blue); --utrecht-select-disabled-color: var(--amsterdam-color-neutral-grey2); --utrecht-select-disabled-background-color: var(--amsterdam-color-neutral-grey2); --utrecht-select-color: var(--amsterdam-color-primary-blue); --utrecht-select-border-color: var(--amsterdam-color-primary-blue); --utrecht-radio-button-invalid-border-color: var(--amsterdam-color-primary-red); --utrecht-radio-button-disabled-background-color: var(--amsterdam-color-neutral-grey2); --utrecht-radio-button-disabled-border-color: var(--amsterdam-color-neutral-grey2); --utrecht-radio-button-checked-background-color: var(--amsterdam-color-primary-blue); --utrecht-radio-button-border-color: var(--amsterdam-color-primary-blue); --utrecht-paragraph-font-family: var(--amsterdam-typography-sans-serif-font-family); --utrecht-page-footer-content-max-inline-size: var(--utrecht-page-max-inline-size); --utrecht-page-footer-color: var(--amsterdam-color-primary-white); --utrecht-page-footer-background-color: var(--amsterdam-color-primary-blue); --utrecht-link-visited-color: var(--amsterdam-color-v1-purple-30); --utrecht-link-color: var(--amsterdam-color-v1-blue-30); --utrecht-heading-6-font-family: var(--amsterdam-typography-sans-serif-font-family); --utrecht-heading-5-font-family: var(--amsterdam-typography-sans-serif-font-family); --utrecht-heading-4-font-family: var(--amsterdam-typography-sans-serif-font-family); --utrecht-heading-3-font-family: var(--amsterdam-typography-sans-serif-font-family); --utrecht-heading-2-font-family: var(--amsterdam-typography-sans-serif-font-family); --utrecht-heading-1-font-family: var(--amsterdam-typography-sans-serif-font-family); --utrecht-heading-font-family: var(--amsterdam-typography-sans-serif-font-family); --utrecht-form-select-padding-inline-start: var(--utrecht-space-block-sm); --utrecht-form-select-padding-inline-end: var(--utrecht-space-block-sm); --utrecht-form-select-padding-block-start: var(--utrecht-space-block-xs); --utrecht-form-select-padding-block-end: var(--utrecht-space-block-xs); --utrecht-form-select-color: var(--amsterdam-color-v1-grey-0); --utrecht-form-select-border-color: var(--amsterdam-color-v1-grey-50); --utrecht-form-select-background-color: var(--amsterdam-color-v1-grey-100); --utrecht-form-label-radio-font-weight: var(--amsterdam-typography-weight-scale-normal-font-weight); --utrecht-form-label-checkbox-font-weight: var(--amsterdam-typography-weight-scale-normal-font-weight); --utrecht-form-input-hover-border-color: var(--amsterdam-color-primary-black); --utrecht-form-input-focus-border-color: var(--amsterdam-color-primary-black); --utrecht-form-input-disabled-color: var(--amsterdam-color-neutral-grey2); --utrecht-form-input-disabled-border-color: var(--amsterdam-color-neutral-grey2); --utrecht-form-input-invalid-border-color: var(--amsterdam-color-primary-red); --utrecht-form-input-placeholder-color: var(--amsterdam-color-neutral-grey3); --utrecht-form-input-border-color: var(--amsterdam-color-neutral-grey3); --utrecht-form-input-color: var(--amsterdam-color-primary-black); --utrecht-form-field-description-invalid-color: var(--amsterdam-color-primary-red); --utrecht-form-field-description-color: var(--amsterdam-color-neutral-grey3); --utrecht-document-font-family: var(--amsterdam-typography-sans-serif-font-family); --utrecht-document-color: var(--amsterdam-color-v1-black); --utrecht-document-background-color: var(--amsterdam-color-v1-white); --utrecht-custom-radio-button-invalid-border-color: var(--amsterdam-color-primary-red); --utrecht-custom-radio-button-disabled-color: var(--amsterdam-color-neutral-grey2); --utrecht-custom-radio-button-disabled-border-color: var(--amsterdam-color-neutral-grey2); --utrecht-custom-radio-button-checked-color: var(--amsterdam-color-primary-white); --utrecht-custom-radio-button-checked-background-color: var(--amsterdam-color-primary-blue); --utrecht-custom-radio-button-border-color: var(--amsterdam-color-primary-blue); --utrecht-custom-radio-button-background-color: var(--amsterdam-color-primary-white); --utrecht-custom-checkbox-invalid-checked-color: var(--amsterdam-color-primary-white); --utrecht-custom-checkbox-invalid-checked-background-color: var(--amsterdam-color-primary-red); --utrecht-custom-checkbox-invalid-checked-border-color: var(--amsterdam-color-primary-red); --utrecht-custom-checkbox-invalid-color: var(--amsterdam-color-primary-red); --utrecht-custom-checkbox-invalid-background-color: var(--amsterdam-color-primary-white); --utrecht-custom-checkbox-invalid-border-color: var(--amsterdam-color-primary-red); --utrecht-custom-checkbox-checked-color: var(--amsterdam-color-primary-white); --utrecht-custom-checkbox-checked-background-color: var(--amsterdam-color-primary-blue); --utrecht-custom-checkbox-disabled-checked-color: var(--amsterdam-color-primary-white); --utrecht-custom-checkbox-disabled-checked-background-color: var(--amsterdam-color-neutral-grey2); --utrecht-custom-checkbox-disabled-color: var(--amsterdam-color-neutral-grey2); --utrecht-custom-checkbox-disabled-border-color: var(--amsterdam-color-neutral-grey2); --utrecht-custom-checkbox-background-color: var(--amsterdam-color-primary-white); --utrecht-custom-checkbox-color: var(--amsterdam-color-primary-blue); --utrecht-custom-checkbox-border-color: var(--amsterdam-color-primary-blue); --utrecht-checkbox-invalid-background-color: var(--amsterdam-color-primary-red); --utrecht-checkbox-checked-background-color: var(--amsterdam-color-primary-blue); --utrecht-checkbox-disabled-background-color: var(--amsterdam-color-neutral-grey2); --utrecht-checkbox-disabled-border-color: var(--amsterdam-color-neutral-grey2); --utrecht-checkbox-color: var(--amsterdam-color-primary-black); --utrecht-checkbox-border-color: var(--amsterdam-color-primary-blue); --utrecht-button-disabled-color: var(--amsterdam-color-primary-white); --utrecht-button-disabled-background-color: var(--amsterdam-color-neutral-grey2); --utrecht-button-subtle-disabled-color: var(--amsterdam-color-neutral-grey2); --utrecht-button-subtle-disabled-border-color: var(--amsterdam-color-neutral-grey2); --utrecht-button-subtle-hover-color: var(--amsterdam-color-dark-blue); --utrecht-button-subtle-hover-border-color: var(--amsterdam-color-neutral-grey1); --utrecht-button-subtle-color: var(--amsterdam-color-primary-blue); --utrecht-button-subtle-background-color: var(--amsterdam-color-primary-white); --utrecht-button-secondary-action-disabled-color: var(--amsterdam-color-neutral-grey2); --utrecht-button-secondary-action-disabled-border-color: var(--amsterdam-color-neutral-grey2); --utrecht-button-secondary-action-hover-color: var(--amsterdam-color-dark-blue); --utrecht-button-secondary-action-hover-border-color: var(--amsterdam-color-dark-blue); --utrecht-button-secondary-action-border-color: var(--amsterdam-color-primary-blue); --utrecht-button-secondary-action-color: var(--amsterdam-color-primary-blue); --utrecht-button-secondary-action-background-color: var(--amsterdam-color-primary-white); --utrecht-button-primary-action-disabled-color: var(--amsterdam-color-primary-white); --utrecht-button-primary-action-disabled-background-color: var(--amsterdam-color-neutral-grey2); --utrecht-button-primary-action-hover-background-color: var(--amsterdam-color-dark-blue); --utrecht-button-primary-action-color: var(--amsterdam-color-primary-white); --utrecht-button-primary-action-background-color: var(--amsterdam-color-primary-blue); --utrecht-button-hover-background-color: var(--amsterdam-color-dark-blue); --utrecht-button-color: var(--amsterdam-color-primary-white); --utrecht-button-background-color: var(--amsterdam-color-primary-blue); --utrecht-button-font-family: var(--amsterdam-typography-sans-serif-font-family); --utrecht-badge-line-height: var(--amsterdam-typography-scale-sm-body-small-line-height); --utrecht-badge-font-weight: var(--amsterdam-typography-scale-sm-body-small-font-weight); --utrecht-badge-font-size: var(--amsterdam-typography-scale-sm-body-small-font-size); --utrecht-badge-color: var(--amsterdam-color-primary-white); --utrecht-badge-background-color: var(--amsterdam-color-primary-blue); --utrecht-badge-counter-font-weight: var(--amsterdam-typography-scale-sm-body-small-font-weight); --utrecht-badge-counter-color: var(--amsterdam-color-primary-white); --utrecht-badge-counter-background-color: var(--amsterdam-color-primary-blue); --utrecht-backdrop-background-color: var(--amsterdam-color-primary-black); --utrecht-alert-icon-color: var(--amsterdam-color-primary-black); --utrecht-alert-ok-border-color: var(--amsterdam-color-v1-green-30); --utrecht-alert-ok-background-color: var(--amsterdam-color-primary-white); --utrecht-alert-error-border-color: var(--amsterdam-color-primary-red); --utrecht-alert-error-background-color: var(--amsterdam-color-primary-white); --utrecht-alert-color: var(--amsterdam-color-primary-black); --utrecht-alert-background-color: var(--amsterdam-color-yellow); --amsterdam-action-disabled-fill-color: var(--amsterdam-color-v1-grey-70); --amsterdam-action-disabled-fill-background-color: var(--amsterdam-color-v1-grey-90); --amsterdam-action-secondary-fill-color: var(--amsterdam-color-v1-white); --amsterdam-action-secondary-fill-background-color: var(--amsterdam-action-secondary-color); --amsterdam-action-primary-fill-color: var(--amsterdam-color-v1-white); --amsterdam-action-primary-fill-background-color: var(--amsterdam-action-primary-color); --amsterdam-typography-scale-quote-line-height: var(--amsterdam-typography-scale-md-quote-line-height); --amsterdam-typography-scale-quote-font-weight: var(--amsterdam-typography-scale-md-quote-font-weight); --amsterdam-typography-scale-quote-font-size: var(--amsterdam-typography-scale-md-quote-font-size); --amsterdam-typography-scale-body-small-line-height: var(--amsterdam-typography-scale-md-body-small-line-height); --amsterdam-typography-scale-body-small-font-weight: var(--amsterdam-typography-scale-md-body-small-font-weight); --amsterdam-typography-scale-body-small-font-size: var(--amsterdam-typography-scale-md-body-small-font-size); --amsterdam-typography-scale-body-line-height: var(--amsterdam-typography-scale-md-body-line-height); --amsterdam-typography-scale-body-font-weight: var(--amsterdam-typography-scale-md-body-font-weight); --amsterdam-typography-scale-body-font-size: var(--amsterdam-typography-scale-md-body-font-size); --amsterdam-typography-scale-intro-line-height: var(--amsterdam-typography-scale-md-intro-line-height); --amsterdam-typography-scale-intro-font-weight: var(--amsterdam-typography-scale-md-intro-font-weight); --amsterdam-typography-scale-intro-font-size: var(--amsterdam-typography-scale-md-intro-font-size); --amsterdam-typography-scale-h6-line-height: var(--amsterdam-typography-scale-md-h6-line-height); --amsterdam-typography-scale-h6-font-weight: var(--amsterdam-typography-scale-md-h6-font-weight); --amsterdam-typography-scale-h6-font-size: var(--amsterdam-typography-scale-md-h6-font-size); --amsterdam-typography-scale-h5-line-height: var(--amsterdam-typography-scale-md-h5-line-height); --amsterdam-typography-scale-h5-font-weight: var(--amsterdam-typography-scale-md-h5-font-weight); --amsterdam-typography-scale-h5-font-size: var(--amsterdam-typography-scale-md-h5-font-size); --amsterdam-typography-scale-h4-line-height: var(--amsterdam-typography-scale-md-h4-line-height); --amsterdam-typography-scale-h4-font-weight: var(--amsterdam-typography-scale-md-h4-font-weight); --amsterdam-typography-scale-h4-font-size: var(--amsterdam-typography-scale-md-h4-font-size); --amsterdam-typography-scale-h3-line-height: var(--amsterdam-typography-scale-md-h3-line-height); --amsterdam-typography-scale-h3-font-weight: var(--amsterdam-typography-scale-md-h3-font-weight); --amsterdam-typography-scale-h3-font-size: var(--amsterdam-typography-scale-md-h3-font-size); --amsterdam-typography-scale-h2-line-height: var(--amsterdam-typography-scale-md-h2-line-height); --amsterdam-typography-scale-h2-font-weight: var(--amsterdam-typography-scale-md-h2-font-weight); --amsterdam-typography-scale-h2-font-size: var(--amsterdam-typography-scale-md-h2-font-size); --amsterdam-typography-scale-h1-small-line-height: var(--amsterdam-typography-scale-md-h1-small-line-height); --amsterdam-typography-scale-h1-small-font-weight: var(--amsterdam-typography-scale-md-h1-small-font-weight); --amsterdam-typography-scale-h1-small-font-size: var(--amsterdam-typography-scale-md-h1-small-font-size); --amsterdam-typography-scale-h1-line-height: var(--amsterdam-typography-scale-md-h1-line-height); --amsterdam-typography-scale-h1-font-weight: var(--amsterdam-typography-scale-md-h1-font-weight); --amsterdam-typography-scale-h1-font-size: var(--amsterdam-typography-scale-md-h1-font-size); --utrecht-unordered-list-line-height: var(--amsterdam-typography-scale-body-line-height); --utrecht-unordered-list-font-size: var(--amsterdam-typography-scale-body-font-size); --utrecht-textarea-line-height: var(--amsterdam-typography-scale-body-line-height); --utrecht-table-caption-line-height: var(--amsterdam-typography-scale-h6-line-height); --utrecht-table-caption-font-weight: var(--amsterdam-typography-scale-h6-font-weight); --utrecht-table-caption-font-size: var(--amsterdam-typography-scale-h6-font-size); --utrecht-table-line-height: var(--amsterdam-typography-scale-body-line-height); --utrecht-table-font-size: var(--amsterdam-typography-scale-body-font-size); --utrecht-paragraph-small-line-height: var(--amsterdam-typography-scale-body-small-line-height); --utrecht-paragraph-small-font-weight: var(--amsterdam-typography-scale-body-small-font-weight); --utrecht-paragraph-small-font-size: var(--amsterdam-typography-scale-body-small-font-size); --utrecht-paragraph-lead-line-height: var(--amsterdam-typography-scale-intro-line-height); --utrecht-paragraph-lead-font-weight: var(--amsterdam-typography-scale-intro-font-weight); --utrecht-paragraph-lead-font-size: var(--amsterdam-typography-scale-intro-font-size); --utrecht-paragraph-line-height: var(--amsterdam-typography-scale-body-line-height); --utrecht-paragraph-font-weight: var(--amsterdam-typography-scale-body-font-weight); --utrecht-paragraph-font-size: var(--amsterdam-typography-scale-body-font-size); --utrecht-heading-6-line-height: var(--amsterdam-typography-scale-h6-line-height); --utrecht-heading-6-font-weight: var(--amsterdam-typography-scale-h6-font-weight); --utrecht-heading-6-font-size: var(--amsterdam-typography-scale-h6-font-size); --utrecht-heading-5-line-height: var(--amsterdam-typography-scale-h5-line-height); --utrecht-heading-5-font-weight: var(--amsterdam-typography-scale-h5-font-weight); --utrecht-heading-5-font-size: var(--amsterdam-typography-scale-h5-font-size); --utrecht-heading-4-line-height: var(--amsterdam-typography-scale-h4-line-height); --utrecht-heading-4-font-weight: var(--amsterdam-typography-scale-h4-font-weight); --utrecht-heading-4-font-size: var(--amsterdam-typography-scale-h4-font-size); --utrecht-heading-3-line-height: var(--amsterdam-typography-scale-h3-line-height); --utrecht-heading-3-font-weight: var(--amsterdam-typography-scale-h3-font-weight); --utrecht-heading-3-font-size: var(--amsterdam-typography-scale-h3-font-size); --utrecht-heading-2-line-height: var(--amsterdam-typography-scale-h2-line-height); --utrecht-heading-2-font-weight: var(--amsterdam-typography-scale-h2-font-weight); --utrecht-heading-2-font-size: var(--amsterdam-typography-scale-h2-font-size); --utrecht-heading-1-line-height: var(--amsterdam-typography-scale-h1-line-height); --utrecht-heading-1-font-weight: var(--amsterdam-typography-scale-h1-font-weight); --utrecht-heading-1-font-size: var(--amsterdam-typography-scale-h1-font-size); --utrecht-form-label-line-height: var(--amsterdam-typography-scale-h5-line-height); /* TODO: This is not supported yet */ --utrecht-form-label-font-weight: var(--amsterdam-typography-scale-h5-font-weight); --utrecht-form-label-font-size: var(--amsterdam-typography-scale-h5-font-size); --utrecht-form-input-font-size: var(--amsterdam-typography-scale-body-font-size); --utrecht-form-fieldset-legend-line-height: var(--amsterdam-typography-scale-h4-line-height); --utrecht-form-fieldset-legend-font-weight: var(--amsterdam-typography-scale-h4-font-weight); --utrecht-form-fieldset-legend-font-size: var(--amsterdam-typography-scale-h4-font-size); --utrecht-form-field-description-font-size: var(--amsterdam-typography-scale-body-small-font-size); --utrecht-button-font-size: var(--amsterdam-typography-scale-body-font-size); --amsterdam-button-sm-font-size: var(--amsterdam-typography-scale-body-small-font-size); } :root { /* * Don't mess with the user stylesheet! * 1rem is whatever the browser says it is. */ font-size: initial !important; } .amsterdam-theme { /* button secondary width */ } .amsterdam-theme .utrecht-button--secondary-action:hover { border-width: 3px; } .amsterdam-theme .utrecht-button, .amsterdam-theme .utrecht-textarea--html-textarea, .amsterdam-theme .utrecht-select--html-select, .amsterdam-theme .utrecht-link, .amsterdam-theme .utrecht-textbox--html-input { --utrecht-focus-outline-style: solid; } @media screen { .amsterdam-theme--responsive { /* * Prefer `vi` over `vw` when available. * Like `inline-size` and other logical properties, `vi` is based on the `inline` axis, * instead of making assumptions about the text direction. * The `vi` unit is unfortunately not yet implemented by all evergreen browsers. */ --_viewport-inline-size: 100vw; /* stylelint-disable-next-line declaration-block-no-duplicate-custom-properties,unit-no-unknown */ --_viewport-inline-size: 100vi; --_viewport-min-inline-size: 20rem; --_viewport-max-inline-size: 120rem; --amsterdam-typography-scale-h1-font-size: clamp(2rem, 2rem + 0.03 * (var(--_viewport-inline-size, 100vw) - 20rem), 5rem); --amsterdam-typography-scale-h1-line-height: clamp(2rem, 2rem + 0.03 * (var(--_viewport-inline-size, 100vw) - 20rem), 5rem); --amsterdam-typography-scale-h1-small-font-size: clamp(1.875rem, 1.875rem + 0.01875 * (var(--_viewport-inline-size, 100vw) - 20rem), 3.75rem); --amsterdam-typography-scale-h1-small-line-height: clamp(2.0625rem, 2.0625rem + 0.020625 * (var(--_viewport-inline-size, 100vw) - 20rem), 4.125rem); --amsterdam-typography-scale-h2-font-size: clamp(1.75rem, 1.75rem + 0.0175 * (var(--_viewport-inline-size, 100vw) - 20rem), 3.5rem); --amsterdam-typography-scale-h2-line-height: clamp(2.1rem, 2.1rem + 0.0175 * (var(--_viewport-inline-size, 100vw) - 20rem), 3.85rem); --amsterdam-typography-scale-h3-font-size: clamp(1.5rem, 1.5rem + 0.01 * (var(--_viewport-inline-size, 100vw) - 20rem), 2.5rem); --amsterdam-typography-scale-h3-line-height: clamp(1.95rem, 1.95rem + 0.008 * (var(--_viewport-inline-size, 100vw) - 20rem), 2.75rem); --amsterdam-typography-scale-h4-font-size: clamp(1.375rem, 1.375rem + 0.00625 * (var(--_viewport-inline-size, 100vw) - 20rem), 2rem); --amsterdam-typography-scale-h4-line-height: clamp(1.925rem, 1.925rem + 0.00475 * (var(--_viewport-inline-size, 100vw) - 20rem), 2.4rem); --amsterdam-typography-scale-h5-font-size: clamp(1.125rem, 1.125rem + 0.00375 * (var(--_viewport-inline-size, 100vw) - 20rem), 1.5rem); --amsterdam-typography-scale-h5-line-height: clamp(1.575rem, 1.575rem + 0.00375 * (var(--_viewport-inline-size, 100vw) - 20rem), 1.95rem); --amsterdam-typography-scale-h6-font-size: clamp(1rem, 1rem + 0.00125 * (var(--_viewport-inline-size, 100vw) - 20rem), 1.125rem); --amsterdam-typography-scale-h6-line-height: clamp(1.4rem, 1.4rem + 0.000625 * (var(--_viewport-inline-size, 100vw) - 20rem), 1.4625rem); --amsterdam-typography-scale-body-font-size: clamp(1.125rem, 1.125rem + 0.00375 * (var(--_viewport-inline-size, 100vw) - 20rem), 1.5rem); --amsterdam-typography-scale-body-line-height: clamp(1.8rem, 1.8rem + 0.006 * (var(--_viewport-inline-size, 100vw) - 20rem), 2.4rem); --amsterdam-typography-scale-intro-font-size: clamp(1.375rem, 1.375rem + 0.005 * (var(--_viewport-inline-size, 100vw) - 20rem), 1.875rem); --amsterdam-typography-scale-intro-line-height: clamp(2.2rem, 2.2rem + 0.006125 * (var(--_viewport-inline-size, 100vw) - 20rem), 2.8125rem); --amsterdam-typography-scale-body-small-font-size: clamp(1rem, 1rem + 0.00125 * (var(--_viewport-inline-size, 100vw) - 20rem), 1.125rem); --amsterdam-typography-scale-body-small-line-height: clamp(1.5rem, 1.5rem + 0.003 * (var(--_viewport-inline-size, 100vw) - 20rem), 1.8rem); --amsterdam-typography-scale-quote-font-size: clamp(1.5rem, 1.5rem + 0.01 * (var(--_viewport-inline-size, 100vw) - 20rem), 2.5rem); --amsterdam-typography-scale-quote-line-height: clamp(1.95rem, 1.95rem + 0.008 * (var(--_viewport-inline-size, 100vw) - 20rem), 2.75rem); --utrecht-form-input-font-size: var(--amsterdam-typography-scale-body-small-font-size); --utrecht-paragraph-margin-block-end: 1.6666666667em; --utrecht-ordered-list-margin-block-end: 1.6666666667em; --utrecht-unordered-list-margin-block-end: 1.6666666667em; } }