/** * @license EUPL-1.2 * Copyright (c) 2020-2024 Frameless B.V. * Copyright (c) 2021-2024 Gemeente Utrecht */ /** * @license EUPL-1.2 * Copyright (c) 2020-2024 Frameless B.V. * Copyright (c) 2021-2024 Gemeente Utrecht */ :host { /* * Goals: * * - take up 100% of the space, both horizontally and vertically. * - create a scrollable viewport experience both on `` in the root, * as well as on a `
` somewhere in a document. * - override commonly applied `font-smoothing` CSS that reduces text contrast. * - the root must be a "positioned ancestor", so elements that are positioned * outside the normal document flow (`absolute`, `fixed` and `sticky`) * are positioned relative to the root component. * - ensure text content fits at 400% zoom by enabling hypenation. */ /* reset `font-smoothing: antialiasing`, prefer automatic (`subpixel-antialiasing`) behavior for high-dpi screens */ -webkit-font-smoothing: auto !important; -moz-osx-font-smoothing: auto !important; background-color: var(--utrecht-root-background-color); block-size: 100%; color: var(--utrecht-root-color); font-family: var(--utrecht-root-font-family); -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; hyphens: auto; inline-size: 100%; overflow-block: auto; overflow-inline: auto; position: relative; text-rendering: optimizeLegibility; -moz-text-size-adjust: none; -webkit-text-size-adjust: none; text-size-adjust: none; word-break: break-word; } :host([hidden]) { display: none !important; }