/* node_modules/@digdir/designsystemet-css/dist/src/index.css */ @layer ds.theme, ds.base, ds.components; @layer ds.base { .ds-sr-only { border: 0; clip: rect(0 0 0 0); height: 1px; overflow: hidden; padding: 0; position: absolute; white-space: nowrap; width: 1px; } :root { --ds-font-size-minus-1:max(0.9em, 0.875rem); --ds-font-size-plus-1:1.1em; --ds-readonly-icon-size:var(--ds-icon-size); --ds-readonly-icon-url:url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20aria-hidden%3D%22true%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M12%202.25A4.75%204.75%200%200%200%207.25%207v2.25H7A1.75%201.75%200%200%200%205.25%2011v9c0%20.41.34.75.75.75h12a.75.75%200%200%200%20.75-.75v-9A1.75%201.75%200%200%200%2017%209.25h-.25V7A4.75%204.75%200%200%200%2012%202.25m3.25%207V7a3.25%203.25%200%200%200-6.5%200v2.25zM12%2013a1.5%201.5%200%200%200-.75%202.8V17a.75.75%200%200%200%201.5%200v-1.2A1.5%201.5%200%200%200%2012%2013%22%2F%3E%3C%2Fsvg%3E); --ds-icon-size:var(--ds-size-6); } @supports (width:round(down, 0.1em, 1px)) { :root { --ds-font-size-minus-1:round(down, max(0.9em, 0.875rem), 1px); --ds-font-size-plus-1:round(down, 1.1em, 1px); } } :root, [data-color-scheme] { --dsc-focus-boxShadow:0 0 0 var(--ds-border-width-focus) var(--ds-color-focus-inner); --dsc-focus-boxShadow-inset:inset 0 0 0 calc(var(--ds-border-width-focus)*2) var(--ds-color-focus-inner); --dsc-focus-boxShadow-middle:inset 0 0 0 var(--ds-border-width-focus) var(--ds-color-focus-inner); --dsc-focus-outline:var(--ds-color-focus-outer) solid var(--ds-border-width-focus); } [data-color-scheme], body { color: var(--ds-color-neutral-text-default); background: var(--ds-color-neutral-background-default); } .ds-icon { display: inline-block; flex-shrink: 0; font-size: 1em; height: var(--ds-icon-size); vertical-align: middle; width: var(--ds-icon-size); } .ds-readonly-icon:before { background: currentcolor; content: ""; display: inline-block; height: calc(1em*var(--ds-line-height-md)); height: 1lh; margin-inline-end: .25ch; -webkit-mask: center/contain no-repeat var(--ds-readonly-icon-url); mask: center/contain no-repeat var(--ds-readonly-icon-url); vertical-align: bottom; width: var(--ds-readonly-icon-size); -webkit-print-color-adjust: exact; print-color-adjust: exact; } @media (forced-colors: active) { .ds-readonly-icon:before { background: CanvasText; } } .ds-print-preserve { -webkit-print-color-adjust: exact; print-color-adjust: exact; } .ds-focus:focus-visible { box-shadow: var(--_ds--focus,var(--dsc-focus-boxShadow)); outline: var(--_ds--focus,var(--dsc-focus-outline)); outline-offset: var(--_ds--focus,var(--ds-border-width-focus)); } .ds-focus:focus-visible * { --_ds--focus:; } .ds-focus--inset:focus-visible { box-shadow: var(--_ds--focus,var(--dsc-focus-boxShadow-inset)); outline: var(--_ds--focus,var(--dsc-focus-outline)); outline-offset: calc(var(--_ds--focus, var(--ds-border-width-focus))*-1); } .ds-focus--inset:focus-visible * { --_ds--focus:; } .ds-focus--middle:focus-visible { box-shadow: var(--_ds--focus,var(--dsc-focus-boxShadow-middle)); outline: var(--_ds--focus,var(--dsc-focus-outline)); outline-offset: calc(var(--_ds--focus, 0)); } .ds-focus--middle:focus-visible * { --_ds--focus:; } .ds-focus--visible { box-shadow: var(--_ds--focus,var(--dsc-focus-boxShadow)); outline: var(--_ds--focus,var(--dsc-focus-outline)); outline-offset: var(--_ds--focus,var(--ds-border-width-focus)); } .ds-focus--visible * { --_ds--focus:; } .ds-focus--visible--inset { box-shadow: var(--_ds--focus,var(--dsc-focus-boxShadow-inset)); outline: var(--_ds--focus,var(--dsc-focus-outline)); outline-offset: calc(var(--_ds--focus, var(--ds-border-width-focus))*-1); } .ds-focus--visible--inset * { --_ds--focus:; } .ds-focus--visible--middle { box-shadow: var(--_ds--focus,var(--dsc-focus-boxShadow-middle)); outline: var(--_ds--focus,var(--dsc-focus-outline)); outline-offset: calc(var(--_ds--focus, 0)); } .ds-focus--visible--middle * { --_ds--focus:; } .ds-checkbox--checked { --_stroke-width-fallback:0.05em; --_diagonal-1:transparent calc(48% - var(--_stroke-width, var(--_stroke-width-fallback))); --_diagonal-2:currentcolor calc(50% - var(--_stroke-width, var(--_stroke-width-fallback))); --_diagonal-3:currentcolor calc(50% + var(--_stroke-width, var(--_stroke-width-fallback))); --_diagonal-4:transparent calc(52% + var(--_stroke-width, var(--_stroke-width-fallback))); background-origin: content-box; background-repeat: no-repeat; background-position: 10% 73%, 90% 50%; background-size: 35% 35%, 65% 65%; background-image: linear-gradient( 45deg, var(--_diagonal-1), var(--_diagonal-2), var(--_diagonal-3), var(--_diagonal-4)), linear-gradient( -45deg, var(--_diagonal-1), var(--_diagonal-2), var(--_diagonal-3), var(--_diagonal-4)); } @media (forced-colors: active) { .ds-checkbox--checked { background-color: LinkText; border-color: LinkText; forced-color-adjust: none; } } .ds-floating { --_ds-floating:top; --_ds-floating-arrow-size:0; --_ds-floating-arrow-visibility:inherit; animation: ds-fade-in .15s ease-in-out forwards; inset: 0 auto auto 0; margin: 0; overflow: visible; position: absolute; } .ds-floating:before { background: inherit; border: inherit; border-left-color: transparent; border-top-color: transparent; box-sizing: border-box; content: ""; height: var(--_ds-floating-arrow-size); left: var(--_ds-floating-arrow-x,50%); position: absolute; rotate: 45deg; top: var(--_ds-floating-arrow-y,100%); translate: -50% -50%; visibility: var(--_ds-floating-arrow-visibility); width: var(--_ds-floating-arrow-size); } .ds-floating[data-overscroll=contain] { --_ds-floating-overscroll:contain; overscroll-behavior: contain; overflow: auto; } .ds-floating { &[data-floating|=top]:before { top: 100%; rotate: 45deg; } &[data-floating|=right]:before { left: 0; rotate: 135deg; } &[data-floating|=bottom]:before { top: 0; rotate: -135deg; } &[data-floating|=left]:before { left: 100%; rotate: -45deg; } } @keyframes ds-fade-in { 0% { opacity: 0; } } body { font-weight: var(--ds-body-md-font-weight); line-height: var(--ds-body-md-line-height); letter-spacing: var(--ds-body-md-letter-spacing); } [data-size], body { font-size: var(--ds-body-md-font-size); } [data-size] { --ds-icon-size:var(--ds-size-6); } .ds-heading { -moz-column-break-after: avoid; break-after: avoid-page; font-size: 1.3em; font-size: round(down, 1.3em, 1px); font-weight: var(--ds-heading-md-font-weight); letter-spacing: var(--ds-heading-md-letter-spacing); line-height: var(--ds-heading-md-line-height); margin: 0; } .ds-heading[data-size="2xs"] { font-weight: var(--ds-heading-2xs-font-weight); line-height: var(--ds-heading-2xs-line-height); font-size: var(--ds-heading-2xs-font-size); letter-spacing: var(--ds-heading-2xs-letter-spacing); } .ds-heading[data-size=xs] { font-weight: var(--ds-heading-xs-font-weight); line-height: var(--ds-heading-xs-line-height); font-size: var(--ds-heading-xs-font-size); letter-spacing: var(--ds-heading-xs-letter-spacing); } .ds-heading[data-size=sm] { font-weight: var(--ds-heading-sm-font-weight); line-height: var(--ds-heading-sm-line-height); font-size: var(--ds-heading-sm-font-size); letter-spacing: var(--ds-heading-sm-letter-spacing); } .ds-heading[data-size=md] { font-size: var(--ds-heading-md-font-size); } .ds-heading[data-size=lg] { font-weight: var(--ds-heading-lg-font-weight); line-height: var(--ds-heading-lg-line-height); font-size: var(--ds-heading-lg-font-size); letter-spacing: var(--ds-heading-lg-letter-spacing); } .ds-heading[data-size=xl] { font-weight: var(--ds-heading-xl-font-weight); line-height: var(--ds-heading-xl-line-height); font-size: var(--ds-heading-xl-font-size); letter-spacing: var(--ds-heading-xl-letter-spacing); } .ds-heading[data-size="2xl"] { font-weight: var(--ds-heading-2xl-font-weight); line-height: var(--ds-heading-2xl-line-height); font-size: var(--ds-heading-2xl-font-size); letter-spacing: var(--ds-heading-2xl-letter-spacing); } .ds-label { font-weight: var(--ds-font-weight-medium); line-height: var(--ds-body-md-line-height); } .ds-label[data-weight=semibold] { font-weight: var(--ds-font-weight-semibold); } .ds-label[data-weight=regular] { font-weight: var(--ds-font-weight-regular); } } @layer ds.base { :where(.ds-paragraph) { margin-block: 0; } .ds-paragraph[data-size=xs] { font-weight: var(--ds-body-xs-font-weight); line-height: var(--ds-body-xs-line-height); font-size: var(--ds-body-xs-font-size); letter-spacing: var(--ds-body-xs-letter-spacing); } .ds-paragraph[data-size=sm] { font-weight: var(--ds-body-sm-font-weight); line-height: var(--ds-body-sm-line-height); font-size: var(--ds-body-sm-font-size); letter-spacing: var(--ds-body-sm-letter-spacing); } .ds-paragraph[data-size=md] { font-weight: var(--ds-body-md-font-weight); line-height: var(--ds-body-md-line-height); font-size: var(--ds-body-md-font-size); letter-spacing: var(--ds-body-md-letter-spacing); } .ds-paragraph[data-size=lg] { font-weight: var(--ds-body-lg-font-weight); line-height: var(--ds-body-lg-line-height); font-size: var(--ds-body-lg-font-size); letter-spacing: var(--ds-body-lg-letter-spacing); } .ds-paragraph[data-size=xl] { font-weight: var(--ds-body-xl-font-weight); line-height: var(--ds-body-xl-line-height); font-size: var(--ds-body-xl-font-size); letter-spacing: var(--ds-body-xl-letter-spacing); } .ds-paragraph[data-variant=long] { line-height: var(--ds-line-height-lg); } .ds-paragraph[data-variant=short] { line-height: var(--ds-line-height-sm); } } @layer ds.components { .ds-link { --dsc-link-color:var(--ds-color-text-subtle); --dsc-link-color--hover:var(--ds-color-text-default); --dsc-link-color--active:var(--ds-color-text-default); --dsc-link-color--visited:var(--dsc-link-color); --dsc-link-background--active:transparent; --dsc-link-text-decoration-thickness--hover:0.125em; --dsc-link-text-decoration-thickness:0.0625em; --dsc-link-border-radius:0; color: var(--dsc-link-color); outline: none; text-decoration-line: underline; text-decoration-style: solid; text-decoration-thickness: var(--dsc-link-text-decoration-thickness); text-underline-offset: .24em; border-radius: var(--dsc-link-border-radius); } .ds-link:is(button) { background: none; border: none; cursor: pointer; font: inherit; margin: 0; padding: 0; text-align: inherit; } .ds-link > :is(img, svg) { display: inline-block; flex-shrink: 0; font-size: 1em; height: var(--ds-icon-size); vertical-align: middle; width: var(--ds-icon-size); } :is(.ds-link:has(> span) > :is(img, svg)):first-child { margin-inline-end: var(--ds-size-1); } :is(.ds-link:has(> span) > :is(img, svg)):last-child { margin-inline-start: var(--ds-size-1); } .ds-link[data-color=neutral] { --dsc-link-color--active:var(--ds-color-neutral-text-subtle); --dsc-link-color--hover:var(--ds-color-neutral-text-subtle); --dsc-link-color:var(--ds-color-neutral-text-default); } .ds-link:where(:visited) { color: var(--dsc-link-color--visited); } @media (hover: hover) and (pointer: fine) { .ds-link:where(:hover) { color: var(--dsc-link-color--hover); text-decoration-thickness: var(--dsc-link-text-decoration-thickness--hover); } } .ds-link:focus-visible { box-shadow: var(--_ds--focus,var(--dsc-focus-boxShadow)); outline: var(--_ds--focus,var(--dsc-focus-outline)); outline-offset: var(--_ds--focus,var(--ds-border-width-focus)); } .ds-link:focus-visible * { --_ds--focus:; } .ds-link:where(:active) { background: var(--dsc-link-background--active); color: var(--dsc-link-color--active); } } @layer ds.base { :where(.ds-validation-message) { margin: 0; } .ds-validation-message { --dsc-validation-message-icon-url:url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M7.74%202.47a.75.75%200%200%201%20.53-.22h7.46a.75.75%200%200%201%20.53.22l5.27%205.27c.14.14.22.33.22.53v7.46a.75.75%200%200%201-.22.53l-5.27%205.27a.75.75%200%200%201-.53.22H8.27a.75.75%200%200%201-.53-.22l-5.27-5.27a.75.75%200%200%201-.22-.53V8.27a.75.75%200%200%201%20.22-.53zm1.29%205.5a.75.75%200%200%200-1.06%201.06L10.94%2012l-2.97%202.97a.75.75%200%201%200%201.06%201.06L12%2013.06l2.97%202.97a.75.75%200%201%200%201.06-1.06L13.06%2012l2.97-2.97a.75.75%200%200%200-1.06-1.06L12%2010.94z%22%2F%3E%3C%2Fsvg%3E); --dsc-validation-message-icon-size:var(--ds-icon-size); --dsc-validation-message-spacing:var(--ds-size-2); --dsc-validation-message-color:var(--ds-color-danger-text-subtle); color: var(--dsc-validation-message-color); position: relative; padding-inline-start: calc(var(--dsc-validation-message-icon-size) + var(--dsc-validation-message-spacing)); -webkit-print-color-adjust: exact; print-color-adjust: exact; } .ds-validation-message:before { background: currentcolor; content: ""; height: var(--dsc-validation-message-icon-size); margin-inline: calc((var(--dsc-validation-message-icon-size) + var(--dsc-validation-message-spacing))*-1); -webkit-mask: var(--dsc-validation-message-icon-url) center /contain no-repeat; mask: var(--dsc-validation-message-icon-url) center /contain no-repeat; position: absolute; translate: 0 calc((1lh - var(--dsc-validation-message-icon-size))/2); width: var(--dsc-validation-message-icon-size); } @media (forced-colors: active) { .ds-validation-message:before { background: CanvasText; } } .ds-validation-message[data-color=success] { --dsc-validation-message-icon-url:url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M12%2021.75a9.75%209.75%200%201%200%200-19.5%209.75%209.75%200%200%200%200%2019.5m4.95-12.47a.81.81%200%200%200-1.24-1.05l-5.39%206.36-2.62-2.62a.81.81%200%200%200-1.15%201.15l3.25%203.25a.81.81%200%200%200%201.2-.05z%22%2F%3E%3C%2Fsvg%3E); --dsc-validation-message-color:var(--ds-color-success-text-subtle); } .ds-validation-message[data-color=warning] { --dsc-validation-message-icon-url:url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M12%202.25a.75.75%200%200%201%20.66.39l9.52%2017.25a.75.75%200%200%201-.65%201.11H2.47a.75.75%200%200%201-.65-1.11l9.52-17.25a.75.75%200%200%201%20.66-.39m0%206.5a.75.75%200%200%201%20.75.75v4a.75.75%200%200%201-1.5%200v-4a.75.75%200%200%201%20.75-.75m-1%207.75a1%201%200%201%201%202%200%201%201%200%200%201-2%200%22%2F%3E%3C%2Fsvg%3E); --dsc-validation-message-color:var(--ds-color-warning-text-subtle); } .ds-validation-message[data-color=info] { --dsc-validation-message-icon-url:url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M3.25%204A.75.75%200%200%201%204%203.25h16a.75.75%200%200%201%20.75.75v16a.75.75%200%200%201-.75.75H4a.75.75%200%200%201-.75-.75zM11%207.75a1%201%200%201%201%202%200%201%201%200%200%201-2%200m-1.25%203a.75.75%200%200%201%20.75-.75H12a.75.75%200%200%201%20.75.75v4.75h.75a.75.75%200%200%201%200%201.5h-3a.75.75%200%200%201%200-1.5h.75v-4h-.75a.75.75%200%200%201-.75-.75%22%2F%3E%3C%2Fsvg%3E); --dsc-validation-message-color:var(--ds-color-info-text-subtle); } } @layer ds.components { [data-size]:is(.ds-avatar, .ds-heading, .ds-paragraph, .ds-spinner) { --ds-size:var(--ds-size--md); } [data-size]:not(.ds-avatar, .ds-heading, .ds-paragraph, .ds-spinner) { --_ds-size-mode__hack:var(--ds-size-mode-font-size); } [data-size] :is(.ds-avatar, .ds-heading, .ds-paragraph, .ds-spinner) { --ds-size-mode-font-size:var(--_ds-size-mode__hack); } } @layer ds.components { .ds-button { --dsc-button-background--active:var(--ds-color-base-active); --dsc-button-background--hover:var(--ds-color-base-hover); --dsc-button-background:var(--ds-color-base-default); --dsc-button-border-color:transparent; --dsc-button-border-radius:var(--ds-border-radius-default); --dsc-button-border-style:solid; --dsc-button-border-width:var(--ds-border-width-default); --dsc-button-color--active:var(--dsc-button-color--hover); --dsc-button-color--hover:var(--dsc-button-color); --dsc-button-color:var(--ds-color-base-contrast-default); --dsc-button-gap:var(--ds-size-2); --dsc-button-padding:var(--ds-size-2) var(--ds-size-4); --dsc-button-size:var(--ds-size-12); align-items: center; background: var(--dsc-button-background); border-color: var(--dsc-button-border-color); border-radius: var(--dsc-button-border-radius); border-style: var(--dsc-button-border-style); border-width: var(--dsc-button-border-width); box-sizing: border-box; color: var(--dsc-button-color); cursor: pointer; flex-shrink: 0; font-family: inherit; font-weight: var(--ds-font-weight-medium); gap: var(--dsc-button-gap); height: -moz-fit-content; height: fit-content; justify-content: center; line-height: var(--ds-line-height-sm); min-height: var(--dsc-button-size); min-width: var(--dsc-button-size); outline: none; padding: var(--dsc-button-padding); text-align: inherit; text-decoration: none; width: -moz-fit-content; width: fit-content; -webkit-print-color-adjust: exact; print-color-adjust: exact; } .ds-button:focus-visible { box-shadow: var(--_ds--focus,var(--dsc-focus-boxShadow)); outline: var(--_ds--focus,var(--dsc-focus-outline)); outline-offset: var(--_ds--focus,var(--ds-border-width-focus)); } .ds-button:focus-visible * { --_ds--focus:; } .ds-button[data-variant=secondary], .ds-button[data-variant=tertiary] { --dsc-button-background--active:var(--ds-color-surface-active); --dsc-button-background--hover:var(--ds-color-surface-hover); --dsc-button-background:transparent; --dsc-button-color--active:var(--dsc-button-color); --dsc-button-color--hover:var(--dsc-button-color); --dsc-button-color:var(--ds-color-text-subtle); } .ds-button[data-variant=secondary] { --dsc-button-border-color:var(--ds-color-border-strong); } .ds-button:not([data-size]) { font-size: inherit; } .ds-button :is(img, svg) { display: inline-block; flex-shrink: 0; font-size: 1em; height: var(--ds-icon-size); vertical-align: middle; width: var(--ds-icon-size); } .ds-button:focus-visible { position: relative; } .ds-button:not([hidden]) { display: flex; } .ds-button[data-icon] { width: var(--dsc-button-size); height: var(--dsc-button-size); padding: 0; } .ds-button[data-fullwidth] { width: 100%; text-align: center; } @media (hover: hover) and (pointer: fine) { .ds-button:hover { background: var(--dsc-button-background--hover); color: var(--dsc-button-color--hover); } } .ds-button:active { background: var(--dsc-button-background--active); color: var(--dsc-button-color--active); } .ds-button[aria-busy=true] { cursor: progress; } .ds-button:is(:disabled, [aria-disabled=true], [readonly], [aria-readonly=true], label:has(input[readonly])) { cursor: not-allowed; opacity: var(--ds-opacity-disabled); background: var(--dsc-button-background); color: var(--dsc-button-color); } .ds-button[aria-busy=true]:is(:disabled, [aria-disabled=true], [readonly], [aria-readonly=true], label:has(input[readonly])) { opacity: 1; cursor: progress; } } @layer ds.components { :where(.ds-input) { margin: 0; } .ds-input { --dsc-input-padding-block:var(--ds-size-2); --dsc-input-padding-inline:var(--ds-size-3); --dsc-input-padding:var(--dsc-input-padding-block) var(--dsc-input-padding-inline); --dsc-input-size--toggle:var(--ds-size-6); --dsc-input-size:var(--ds-size-12); --dsc-input-font-size:max(1rem, 1em); --dsc-input-line-height:var(--ds-line-height-md); --dsc-input-background--readonly:var(--ds-color-neutral-surface-tinted); --dsc-input-background:var(--ds-color-neutral-surface-default); --dsc-input-border-color--readonly:var(--ds-color-neutral-border-subtle); --dsc-input-border-color:var(--ds-color-neutral-border-default); --dsc-input-border-radius:var(--ds-border-radius-md); --dsc-input-border-style:solid; --dsc-input-border-width--toggle:max(var(--ds-border-width-default), calc(var(--ds-size-1)/2)); --dsc-input-border-width:var(--ds-border-width-default); --dsc-input-outline-color--hover:var(--ds-color-neutral-border-default); --dsc-input-outline-color--toggle--hover:var(--dsc-input-accent-color); --dsc-input-outline-width--hover:var(--ds-border-width-default); --dsc-input-outline-style--hover:solid; --dsc-input-color--readonly:var(--ds-color-neutral-text-default); --dsc-input-color-placeholder:color-mix(in srgb, var(--dsc-input-color), transparent 30%); --dsc-input-color:var(--ds-color-neutral-text-default); --dsc-input-stroke-color:var(--ds-color-base-contrast-default); --dsc-input-stroke-color--invalid:var(--ds-color-danger-base-contrast-default); --dsc-input-stroke-width:0.05em; --dsc-input-accent-color:var(--ds-color-base-default); --dsc-input-accent-color--invalid:var(--ds-color-danger-text-subtle); --_dsc-input-diagonal-1:transparent calc(48% - var(--dsc-input-stroke-width)); --_dsc-input-diagonal-2:currentcolor calc(50% - var(--dsc-input-stroke-width)); --_dsc-input-diagonal-3:currentcolor calc(50% + var(--dsc-input-stroke-width)); --_dsc-input-diagonal-4:transparent calc(52% + var(--dsc-input-stroke-width)); --_dsc-input-spacing--toggle:calc(var(--ds-size-1)/2); -webkit-appearance: none; -moz-appearance: none; appearance: none; background: var(--dsc-input-background); border-color: var(--dsc-input-border-color); border-radius: var(--dsc-input-border-radius); border-style: var(--dsc-input-border-style); border-width: var(--dsc-input-border-width); box-sizing: border-box; color: var(--dsc-input-color); font-family: inherit; height: var(--dsc-input-size); line-height: var(--dsc-input-line-height); max-width: 100%; min-width: 0; padding: var(--dsc-input-padding); position: relative; vertical-align: middle; -webkit-print-color-adjust: exact; print-color-adjust: exact; } .ds-input:focus-visible { box-shadow: var(--_ds--focus,var(--dsc-focus-boxShadow)); outline: var(--_ds--focus,var(--dsc-focus-outline)); outline-offset: var(--_ds--focus,var(--ds-border-width-focus)); } .ds-input:focus-visible * { --_ds--focus:; } .ds-input:is([type=radio], [type=checkbox]):not(:focus-visible, :disabled, [readonly], [aria-readonly=true]):where(:hover, .\:click-delegate-hover), :has(label):not(:has(label:hover)) .ds-input:not(:focus-visible, :disabled, [readonly], [aria-readonly=true]):hover { outline-color: var(--dsc-input-outline-color--hover); outline-width: var(--dsc-input-outline-width--hover); outline-style: var(--dsc-input-outline-style--hover); } :is(:has(label):not(:has(label:hover)) .ds-input:not(:focus-visible, :disabled, [readonly], [aria-readonly=true]):hover, .ds-input:is([type=radio], [type=checkbox]):not(:focus-visible, :disabled, [readonly], [aria-readonly=true]):where(:hover, .\:click-delegate-hover)):is(:checked, :indeterminate:where([type=checkbox])):not([aria-invalid=true]) { outline-color: var(--dsc-input-outline-color--toggle--hover); } :is(:has(label):not(:has(label:hover)) .ds-input:not(:focus-visible, :disabled, [readonly], [aria-readonly=true]):hover, .ds-input:is([type=radio], [type=checkbox]):not(:focus-visible, :disabled, [readonly], [aria-readonly=true]):where(:hover, .\:click-delegate-hover)):is([aria-invalid=true]) { outline-color: var(--dsc-input-accent-color--invalid); } .ds-input::-moz-placeholder { color: var(--dsc-input-color-placeholder); } .ds-input::placeholder { color: var(--dsc-input-color-placeholder); } @supports (-webkit-hyphens:none) { .ds-input[type=date] { color: initial; } } @media (forced-colors: active) { .ds-input { border-color: ButtonText; background-color: Canvas; } .ds-input:disabled, .ds-input[aria-disabled=true], .ds-input[aria-readonly=true], .ds-input[readonly] { border-color: GrayText; } } @supports (width:round(down, 0.1em, 1px)) { .ds-input { border-width: round(up, var(--dsc-input-border-width), 1px); } } .ds-input:not([data-size]) { font-size: var(--dsc-input-font-size); } .ds-input:is(select) { padding-inline-end: 2.4em; background-image: linear-gradient( 45deg, var(--_dsc-input-diagonal-1), var(--_dsc-input-diagonal-2), var(--_dsc-input-diagonal-3), var(--_dsc-input-diagonal-4)), linear-gradient( -45deg, var(--_dsc-input-diagonal-1), var(--_dsc-input-diagonal-2), var(--_dsc-input-diagonal-3), var(--_dsc-input-diagonal-4)); background-position: calc(100% - 1.2em + var(--dsc-input-stroke-width)), calc(100% - .8em); background-size: .4em .4em; background-repeat: no-repeat; text-overflow: ellipsis; } :dir(rtl) .ds-input:is(select) { background-position: calc(1.2em - var(--dsc-input-stroke-width)), .8em; } .ds-input:is(select):open { background-image: linear-gradient( -45deg, var(--_dsc-input-diagonal-1), var(--_dsc-input-diagonal-2), var(--_dsc-input-diagonal-3), var(--_dsc-input-diagonal-4)), linear-gradient( 45deg, var(--_dsc-input-diagonal-1), var(--_dsc-input-diagonal-2), var(--_dsc-input-diagonal-3), var(--_dsc-input-diagonal-4)); } @media (forced-colors: active) { .ds-input:is(select) { -webkit-appearance: auto; -moz-appearance: auto; appearance: auto; } } .ds-input:is(textarea) { height: auto; min-height: calc(var(--dsc-input-size)*1.5); resize: vertical; } .ds-input:is(textarea):not([rows]) { field-sizing: content; height: var(--_ds-field-sizing); } .ds-input:where([type=text], [type=email], [type=tel], [type=url], [type=search]) { height: unset; padding-block: calc((var(--dsc-input-size) - var(--dsc-input-line-height)*1em)/2 - var(--dsc-input-border-width)); } .ds-input:not([size], [cols], select:where([data-width=auto])) { width: 100%; } .ds-input:checked, .ds-input:indeterminate:where([type=checkbox]) { background: var(--dsc-input-accent-color); border-color: var(--dsc-input-accent-color); color: var(--dsc-input-stroke-color); } .ds-input:disabled, .ds-input[aria-disabled=true] { cursor: not-allowed; opacity: var(--ds-opacity-disabled); } .ds-input[aria-invalid=true] { border-color: var(--dsc-input-accent-color--invalid); } .ds-input[aria-invalid=true]:where(:checked) { background: var(--dsc-input-accent-color--invalid); color: var(--dsc-input-stroke-color--invalid); } .ds-input[type=checkbox][aria-invalid=true]:where(:indeterminate) { background: var(--dsc-input-accent-color--invalid); color: var(--dsc-input-stroke-color--invalid); } .ds-input[aria-readonly=true], .ds-input[readonly] { background-color: var(--dsc-input-background--readonly); border-color: var(--dsc-input-border-color--readonly); color: var(--dsc-input-color--readonly); } @media (forced-colors: active) { .ds-input[aria-readonly=true], .ds-input[readonly] { border-color: GrayText; } } .ds-input:-moz-read-only:not([readonly], [aria-readonly=true], [aria-disabled=true], :disabled) { cursor: pointer; } .ds-input:read-only:not([readonly], [aria-readonly=true], [aria-disabled=true], :disabled) { cursor: pointer; } .ds-input[type=checkbox], .ds-input[type=radio] { border-width: var(--dsc-input-border-width--toggle); padding: var(--_dsc-input-spacing--toggle); flex-shrink: 0; line-height: inherit; height: var(--dsc-input-size--toggle); width: var(--dsc-input-size--toggle); } @media (forced-colors: active) { .ds-input[type=checkbox], .ds-input[type=radio] { color: Canvas; } :is(.ds-input[type=checkbox], .ds-input[type=radio]):disabled, [aria-disabled=true]:is(.ds-input[type=checkbox], .ds-input[type=radio]), [aria-readonly=true]:is(.ds-input[type=checkbox], .ds-input[type=radio]), [readonly]:is(.ds-input[type=checkbox], .ds-input[type=radio]) { border-color: GrayText; } } .ds-input[type=radio] { border-radius: var(--ds-border-radius-full); } .ds-input[type=radio]:checked { background-image: radial-gradient( circle closest-side, currentcolor 45%, transparent 50%); } @media (forced-colors: active) { .ds-input[type=radio]:checked { background-color: LinkText; border-color: LinkText; color: Canvas; forced-color-adjust: none; } } .ds-input[type=checkbox] { border-radius: var(--ds-border-radius-sm); } .ds-input[type=checkbox]:checked { --_stroke-width:var(--dsc-input-stroke-width); --_stroke-width-fallback:0.05em; --_diagonal-1:transparent calc(48% - var(--_stroke-width, var(--_stroke-width-fallback))); --_diagonal-2:currentcolor calc(50% - var(--_stroke-width, var(--_stroke-width-fallback))); --_diagonal-3:currentcolor calc(50% + var(--_stroke-width, var(--_stroke-width-fallback))); --_diagonal-4:transparent calc(52% + var(--_stroke-width, var(--_stroke-width-fallback))); background-origin: content-box; background-repeat: no-repeat; background-position: 10% 73%, 90% 50%; background-size: 35% 35%, 65% 65%; background-image: linear-gradient( 45deg, var(--_diagonal-1), var(--_diagonal-2), var(--_diagonal-3), var(--_diagonal-4)), linear-gradient( -45deg, var(--_diagonal-1), var(--_diagonal-2), var(--_diagonal-3), var(--_diagonal-4)); } @media (forced-colors: active) { .ds-input[type=checkbox]:checked { background-color: LinkText; border-color: LinkText; forced-color-adjust: none; } } .ds-input[type=checkbox]:indeterminate { background-origin: content-box; background-position: 50%; background-repeat: no-repeat; background-size: contain; background-image: linear-gradient( transparent calc(48% - var(--dsc-input-stroke-width)), currentcolor calc(50% - var(--dsc-input-stroke-width)), currentcolor calc(50% + var(--dsc-input-stroke-width)), transparent calc(52% + var(--dsc-input-stroke-width))); } @media (forced-colors: active) { .ds-input[type=checkbox]:indeterminate { background-color: LinkText; border-color: LinkText; forced-color-adjust: none; } } .ds-input[role=switch]:is([type=radio], [type=checkbox]) { --_dsc-input-circle-position:left; background-image: radial-gradient( circle closest-side, currentcolor 95%, transparent); background-origin: content-box; background-position: var(--_dsc-input-circle-position); background-repeat: no-repeat; background-size: calc(var(--dsc-input-size--toggle) - var(--_dsc-input-spacing--toggle)*2) 100%; border-radius: var(--ds-border-radius-full); padding-inline: 0; transition: background-position .2s; width: calc(var(--dsc-input-size--toggle)*2); } .ds-input[role=switch]:is([type=radio], [type=checkbox]):checked { --_dsc-input-circle-position:right; } @media (forced-colors: active) { .ds-input[role=switch]:is([type=radio], [type=checkbox]):checked { color: initial; } } @media (forced-colors: active) { .ds-input[role=switch]:is([type=radio], [type=checkbox]) { color: GrayText; forced-color-adjust: none; } .ds-input[role=switch][aria-readonly=true]:is([type=radio], [type=checkbox]), .ds-input[role=switch][readonly]:is([type=radio], [type=checkbox]) { color: GrayText; } .ds-input[role=switch]:is([type=radio], [type=checkbox]):disabled, .ds-input[role=switch][aria-disabled=true]:is([type=radio], [type=checkbox]), .ds-input[role=switch][aria-readonly=true]:is([type=radio], [type=checkbox]), .ds-input[role=switch][readonly]:is([type=radio], [type=checkbox]) { border-color: GrayText; } } } @layer ds.components { .ds-field { --dsc-field-content-spacing:var(--ds-size-2); --dsc-field-counter-over:"%d tegn for mye"; --dsc-field-counter-under:"%d tegn igjen"; --dsc-field-description-color:var(--ds-color-neutral-text-subtle); -webkit-print-color-adjust: exact; print-color-adjust: exact; } .ds-field > * { margin-block: 0; } .ds-field > * + * { margin-top: var(--dsc-field-content-spacing); } .ds-field [data-field=description] { color: var(--dsc-field-description-color); margin-top: 0; margin-block: 0; } .ds-field [data-field=counter] { --_ds-data-over:var(--dsc-field-counter-over); --_ds-data-under:var(--dsc-field-counter-under); } .ds-field [data-field=counter]:not([data-state=over]) { color: inherit; padding-left: 0; } .ds-field [data-field=counter]:not([data-state=over]):before { display: none; } .ds-field [data-field=counter]:after { content: attr(data-label); } .ds-field :where(label, .ds-input):not([hidden]), .ds-field:not([hidden]) { display: block; } .ds-field:has(.ds-input[aria-disabled=true], .ds-input:disabled) > * { cursor: not-allowed; opacity: var(--ds-opacity-disabled); } :is(.ds-field:where(:has(.ds-input[aria-readonly=true], .ds-input[readonly])) label):before { background: currentcolor; content: ""; display: inline-block; height: calc(1em*var(--ds-line-height-md)); height: 1lh; margin-inline-end: .25ch; -webkit-mask: center/contain no-repeat var(--ds-readonly-icon-url); mask: center/contain no-repeat var(--ds-readonly-icon-url); vertical-align: bottom; width: var(--ds-readonly-icon-size); -webkit-print-color-adjust: exact; print-color-adjust: exact; } @media (forced-colors: active) { :is(.ds-field:where(:has(.ds-input[aria-readonly=true], .ds-input[readonly])) label):before { background: CanvasText; } } .ds-field[data-clickdelegatefor] { cursor: pointer; } .ds-field:has(input[type=radio], input[type=checkbox]) { grid-template-areas: "input content"; grid-template-columns: auto 1fr; width: -moz-fit-content; width: fit-content; } .ds-field:has(input[type=radio], input[type=checkbox]):not([hidden]) { display: grid; } .ds-field:has(input[type=radio], input[type=checkbox]):has(input:not(:only-child)) { -moz-column-gap: var(--dsc-field-content-spacing); column-gap: var(--dsc-field-content-spacing); } .ds-field:has(input[type=radio], input[type=checkbox]) > * { margin-block: 0; grid-column: content; } .ds-field:has(input[type=radio], input[type=checkbox]) label { font-weight: var(--ds-font-weight-regular); } .ds-field:has(input[type=radio], input[type=checkbox]) label:before { content: none; } .ds-field:has(input[type=radio], input[type=checkbox]) input { grid-column: input; grid-row: 1; } .ds-field:has(input[type=radio], input[type=checkbox]):not(:has(.ds-input[readonly], .ds-input[aria-disabled=true], .ds-input:disabled)) label { cursor: pointer; } .ds-field:has(input[type=radio], input[type=checkbox]):has(input:focus-visible) { box-shadow: var(--_ds--focus,var(--dsc-focus-boxShadow)); outline: var(--_ds--focus,var(--dsc-focus-outline)); outline-offset: var(--_ds--focus,var(--ds-border-width-focus)); } .ds-field:has(input[type=radio], input[type=checkbox]):has(input:focus-visible) * { --_ds--focus:; } .ds-field:has(input[type=radio], input[type=checkbox]) .ds-input:is([type=radio], [type=checkbox]):not([aria-label]) { translate: 0 calc(.5lh - 50%); } .ds-field[data-position=end]:has(input[type=radio], input[type=checkbox]) { grid-template-areas: "content input"; grid-template-columns: 1fr auto; width: auto; } .ds-field[data-variant=outline]:has(input[type=radio], input[type=checkbox]) { --dsc-field-border-color:var(--ds-color-neutral-border-default); --dsc-field-border-color--checked:var(--ds-color-border-default); --dsc-field-border-color--invalid:var(--ds-color-danger-border-default); --dsc-field-border-color--readonly:var(--ds-color-neutral-border-subtle); --dsc-field-border-radius:var(--ds-border-radius-lg); --dsc-field-border-style:solid; --dsc-field-border-width:var(--ds-border-width-default); --dsc-field-border-width--active:max(2px, 0.125rem); --dsc-field-padding:var(--ds-size-4); --_dsc-field-border-color:var(--dsc-field-border-color); --_dsc-field-outline-width:0; border-color: var(--_dsc-field-border-color); border-radius: var(--dsc-field-border-radius); border-style: var(--dsc-field-border-style); border-width: var(--dsc-field-border-width); box-shadow: inset 0 0 0 calc(var(--_dsc-field-outline-width) - var(--dsc-field-border-width)) var(--_dsc-field-border-color); padding: var(--dsc-field-padding); width: auto; } .ds-field[data-variant=outline]:has(input[type=radio], input[type=checkbox]) > [data-field=validation] { grid-column: input/content; } .ds-field[data-variant=outline]:has(input[type=radio], input[type=checkbox]):hover { --_dsc-field-outline-width:var(--dsc-field-border-width--active); } .ds-field[data-variant=outline]:has(input[type=radio], input[type=checkbox]):has(input:checked) { --_dsc-field-border-color:var(--dsc-field-border-color--checked); --_dsc-field-outline-width:var(--dsc-field-border-width--active); } @media (forced-colors: active) { .ds-field[data-variant=outline]:has(input[type=radio], input[type=checkbox]):has(input:checked) { border-color: LinkText; } } .ds-field[data-variant=outline]:has(input[type=radio], input[type=checkbox]):has(input[aria-invalid=true]) { --_dsc-field-border-color:var(--dsc-field-border-color--invalid); } .ds-field[data-variant=outline]:has(input[type=radio], input[type=checkbox]):has(input:disabled, input[aria-disabled=true]) { cursor: not-allowed; opacity: var(--ds-opacity-disabled); --_dsc-field-outline-width:var(--ds-border-width-default); } .ds-field[data-variant=outline]:has(input[type=radio], input[type=checkbox]):has(input:disabled, input[aria-disabled=true]):has(input:checked) { --_dsc-field-outline-width:var(--dsc-field-border-width--active); } .ds-field[data-variant=outline]:has(input[type=radio], input[type=checkbox]):has(input:disabled, input[aria-disabled=true]) * { opacity: 1; } .ds-field[data-variant=outline]:has(input[type=radio], input[type=checkbox]):has(input[readonly], input[aria-readonly=true]) { --_dsc-field-border-color:var(--dsc-field-border-color--readonly); --_dsc-field-outline-width:var(--ds-border-width-default); } .ds-field[data-variant=outline]:has(input[type=radio], input[type=checkbox]):has(input[readonly], input[aria-readonly=true]):has(input:checked) { --_dsc-field-outline-width:var(--dsc-field-border-width--active); } .ds-field[data-variant=outline]:has(input[type=radio], input[type=checkbox]):has(input[readonly], input[aria-readonly=true]) { cursor: default; } @media (forced-colors: active) { .ds-field[data-variant=outline]:has(input[type=radio], input[type=checkbox]):has(input[readonly], input[aria-readonly=true]) { border-color: GrayText; } } .ds-field-affixes { --dsc-field-affix-border-width:var(--ds-border-width-default); --dsc-field-affix-border-style:solid; --dsc-field-affix-border-color:var(--ds-color-neutral-border-default); --dsc-field-affix-padding-inline:var(--ds-size-4); --dsc-field-affix-background:var(--ds-color-neutral-surface-tinted); --dsc-field-affix-color:var(--ds-color-neutral-text-subtle); background: var(--dsc-field-affix-background); border-radius: var(--ds-border-radius-md); box-sizing: border-box; color: var(--dsc-field-affix-color); max-width: 100%; white-space: nowrap; } .ds-field-affixes:not([hidden]) { display: flex; } .ds-field-affixes:has([size]) { width: -moz-fit-content; width: fit-content; } .ds-field-affixes .ds-field-affix { align-items: center; border-width: var(--dsc-field-affix-border-width); border-style: var(--dsc-field-affix-border-style); border-color: var(--dsc-field-affix-border-color); flex-shrink: 0; padding-inline: var(--dsc-field-affix-padding-inline); } :is(.ds-field-affixes .ds-field-affix):not([hidden]) { display: flex; } :is(.ds-field-affixes .ds-field-affix):first-child { border-start-start-radius: inherit; border-end-start-radius: inherit; border-inline-end: 0; } :is(.ds-field-affixes .ds-field-affix):last-child { border-start-end-radius: inherit; border-end-end-radius: inherit; border-inline-start: 0; } .ds-field-affixes .ds-input { border-width: var(--dsc-field-affix-border-width); border-style: var(--dsc-field-affix-border-style); flex: 1 1 auto; } :is(.ds-field-affixes .ds-input):not(:last-child) { border-start-end-radius: 0; border-end-end-radius: 0; } :is(.ds-field-affixes .ds-input):not(:first-child) { border-start-start-radius: 0; border-end-start-radius: 0; } } @layer ds.components { .ds-fieldset { --dsc-fieldset-gap:var(--ds-size-4); --_dsc-fieldset-gap--half:calc(var(--dsc-fieldset-gap)/2); --dsc-fieldset-description-color:var(--ds-color-neutral-text-subtle); border: 0; margin: 0; min-width: 0; padding: 0; } .ds-fieldset > legend { padding: 0; } :is(.ds-fieldset:has(.ds-input[readonly]):not(:has(.ds-input:not([readonly]))) > legend):before { background: currentcolor; content: ""; display: inline-block; height: calc(1em*var(--ds-line-height-md)); height: 1lh; margin-inline-end: .25ch; -webkit-mask: center/contain no-repeat var(--ds-readonly-icon-url); mask: center/contain no-repeat var(--ds-readonly-icon-url); vertical-align: bottom; width: var(--ds-readonly-icon-size); -webkit-print-color-adjust: exact; print-color-adjust: exact; } @media (forced-colors: active) { :is(.ds-fieldset:has(.ds-input[readonly]):not(:has(.ds-input:not([readonly]))) > legend):before { background: CanvasText; } } .ds-fieldset > * + * { margin-block: var(--dsc-fieldset-gap) 0; } .ds-fieldset > [data-field=description], .ds-fieldset > legend + p { color: var(--dsc-fieldset-description-color); } .ds-fieldset > legend + [data-field=description], .ds-fieldset > legend + p { margin-block-start: 0; } .ds-fieldset:disabled > [data-field=description], .ds-fieldset:disabled > legend, .ds-fieldset:disabled > legend + p { opacity: var(--ds-opacity-disabled); } .ds-file-upload { --dsc-file-upload-background:var(--ds-color-surface-default); --dsc-file-upload-background--hover:var(--ds-color-surface-tinted); --dsc-file-upload-icon-color:var(--ds-color-text-subtle); --dsc-file-upload-border-color:var(--ds-color-border-default); --dsc-file-upload-border-radius:var(--ds-border-radius-md); --dsc-file-upload-border-width:max(2px, 0.125rem); --dsc-file-upload-border-style:dashed; --dsc-file-upload-border-style--hover:dashed; --dsc-file-upload-color:currentcolor; --dsc-file-upload-padding:var(--ds-size-7) var(--ds-size-6); --dsc-file-upload-icon-size:var(--ds-size-8); --dsc-file-upload-icon-url:url('data:image/svg+xml;charset=utf-8,'); --dsc-file-upload-icon-url--readonly:url('data:image/svg+xml;charset=utf-8,'); --_icon-url:var(--dsc-file-upload-icon-url); position: relative; border: var(--dsc-file-upload-border-width) var(--dsc-file-upload-border-style) var(--dsc-file-upload-border-color); border-radius: var(--dsc-file-upload-border-radius); padding: var(--dsc-file-upload-padding); background: var(--dsc-file-upload-background); -webkit-user-select: none; -moz-user-select: none; user-select: none; outline: none; text-align: center; -webkit-print-color-adjust: exact; print-color-adjust: exact; } } @layer ds.components { .ds-field[tabindex]:focus-visible:has(:is(.ds-file-upload)) { outline: none; } .ds-field[tabindex]:focus-visible .ds-file-upload, .ds-file-upload:focus-within { box-shadow: var(--_ds--focus,var(--dsc-focus-boxShadow)); outline: var(--_ds--focus,var(--dsc-focus-outline)); outline-offset: var(--_ds--focus,var(--ds-border-width-focus)); } :is(.ds-field[tabindex]:focus-visible .ds-file-upload, .ds-file-upload:focus-within) * { --_ds--focus:; } .ds-file-upload:hover { border-style: var(--dsc-file-upload-border-style--hover); background-color: var(--dsc-file-upload-background--hover); cursor: pointer; } .ds-file-upload:has(:is([readonly], [aria-readonly=true])) { cursor: not-allowed; pointer-events: none; --_icon-url:var(--dsc-file-upload-icon-url--readonly); --dsc-file-upload-background:var(--ds-color-surface-tinted); --dsc-file-upload-background--hover:var(--ds-color-surface-tinted); --ds-color-background-default:var(--ds-color-neutral-background-default); --ds-color-background-tinted:var(--ds-color-neutral-background-tinted); --ds-color-surface-default:var(--ds-color-neutral-surface-default); --ds-color-surface-tinted:var(--ds-color-neutral-surface-tinted); --ds-color-surface-hover:var(--ds-color-neutral-surface-hover); --ds-color-surface-active:var(--ds-color-neutral-surface-active); --ds-color-border-subtle:var(--ds-color-neutral-border-subtle); --ds-color-border-default:var(--ds-color-neutral-border-default); --ds-color-border-strong:var(--ds-color-neutral-border-strong); --ds-color-text-subtle:var(--ds-color-neutral-text-subtle); --ds-color-text-default:var(--ds-color-neutral-text-default); --ds-color-base-default:var(--ds-color-neutral-base-default); --ds-color-base-hover:var(--ds-color-neutral-base-hover); --ds-color-base-active:var(--ds-color-neutral-base-active); --ds-color-base-contrast-subtle:var(--ds-color-neutral-base-contrast-subtle); --ds-color-base-contrast-default:var(--ds-color-neutral-base-contrast-default); } .ds-file-upload:has([aria-invalid=true]) { border-color: var(--ds-color-danger-border-default); } .ds-file-upload > input[type=file] { position: absolute; inset: 0; margin: 0; z-index: 1; opacity: 0; cursor: inherit; } .ds-file-upload:not(:has(> svg)):before, .ds-file-upload > svg { color: var(--dsc-file-upload-icon-color); display: block; height: var(--dsc-file-upload-icon-size); margin: 0 auto var(--ds-size-2); width: var(--dsc-file-upload-icon-size); } @media (forced-colors: active) { .ds-file-upload:not(:has(> svg)):before, .ds-file-upload > svg { color: initial; } } .ds-file-upload:not(:has(> svg)):before { content: ""; background: currentColor; -webkit-mask: var(--_icon-url) center /contain no-repeat; mask: var(--_icon-url) center /contain no-repeat; } @media (forced-colors: active) { .ds-file-upload:not(:has(> svg)):before { background: CanvasText; } } .ds-file-upload > [data-field=description]:not([data-field=description] + [data-field=description]) { color: var(--dsc-file-upload-color); } .ds-file-upload > .ds-button { width: -moz-fit-content; width: fit-content; margin: var(--ds-size-4) auto 0; } .ds-alert { --dsc-alert-background:var(--ds-color-info-surface-tinted); --dsc-alert-border-width:var(--ds-border-width-default); --dsc-alert-border-style:solid; --dsc-alert-border-color:var(--ds-color-info-border-default); --dsc-alert-border-radius:var(--ds-border-radius-lg); --dsc-alert-icon-color:var(--ds-color-info-text-subtle); --dsc-alert-icon-url:url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M3.25%204A.75.75%200%200%201%204%203.25h16a.75.75%200%200%201%20.75.75v16a.75.75%200%200%201-.75.75H4a.75.75%200%200%201-.75-.75zM11%207.75a1%201%200%201%201%202%200%201%201%200%200%201-2%200m-1.25%203a.75.75%200%200%201%20.75-.75H12a.75.75%200%200%201%20.75.75v4.75h.75a.75.75%200%200%201%200%201.5h-3a.75.75%200%200%201%200-1.5h.75v-4h-.75a.75.75%200%200%201-.75-.75%22%2F%3E%3C%2Fsvg%3E); --dsc-alert-color:var(--ds-color-info-text-default); --dsc-alert-spacing:var(--ds-size-2); --dsc-alert-icon-size:var(--ds-icon-size); --dsc-alert-padding-block:var(--ds-size-6); --dsc-alert-padding-inline-end:var(--ds-size-6); background: var(--dsc-alert-background); border-radius: var(--dsc-alert-border-radius); border-width: var(--dsc-alert-border-width); border-style: var(--dsc-alert-border-style); border-color: var(--dsc-alert-border-color); box-sizing: border-box; color: var(--dsc-alert-color); padding-block: var(--dsc-alert-padding-block); padding-inline-start: calc(var(--dsc-alert-padding-inline-end) + var(--dsc-alert-icon-size) + var(--dsc-alert-spacing)); padding-inline-end: var(--dsc-alert-padding-inline-end); position: relative; } } @layer ds.components { .ds-alert:not(:has(> :is(h1, h2, h3, h4, h5, h6):first-child)):before, .ds-alert > :is(h1, h2, h3, h4, h5, h6):first-child:before { background: var(--dsc-alert-icon-color); content: ""; height: var(--dsc-alert-icon-size); margin-inline: calc((var(--dsc-alert-icon-size) + var(--dsc-alert-spacing))*-1); -webkit-mask: var(--dsc-alert-icon-url) center /contain no-repeat; mask: var(--dsc-alert-icon-url) center /contain no-repeat; position: absolute; translate: 0 calc((1lh - var(--dsc-alert-icon-size))/2); width: var(--dsc-alert-icon-size); -webkit-print-color-adjust: exact; print-color-adjust: exact; } @media (forced-colors: active) { .ds-alert:not(:has(> :is(h1, h2, h3, h4, h5, h6):first-child)):before, .ds-alert > :is(h1, h2, h3, h4, h5, h6):first-child:before { background: CanvasText; } } .ds-alert[data-color] { --dsc-alert-background:var(--ds-color-surface-tinted); --dsc-alert-border-color:var(--ds-color-border-default); --dsc-alert-icon-color:var(--ds-color-text-subtle); --dsc-alert-color:var(--ds-color-text-default); } .ds-alert[data-color=warning] { --dsc-alert-icon-url:url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M12%202.25a.75.75%200%200%201%20.66.39l9.52%2017.25a.75.75%200%200%201-.65%201.11H2.47a.75.75%200%200%201-.65-1.11l9.52-17.25a.75.75%200%200%201%20.66-.39m0%206.5a.75.75%200%200%201%20.75.75v4a.75.75%200%200%201-1.5%200v-4a.75.75%200%200%201%20.75-.75m-1%207.75a1%201%200%201%201%202%200%201%201%200%200%201-2%200%22%2F%3E%3C%2Fsvg%3E); } .ds-alert[data-color=success] { --dsc-alert-icon-url:url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M12%2021.75a9.75%209.75%200%201%200%200-19.5%209.75%209.75%200%200%200%200%2019.5m4.95-12.47a.81.81%200%200%200-1.24-1.05l-5.39%206.36-2.62-2.62a.81.81%200%200%200-1.15%201.15l3.25%203.25a.81.81%200%200%200%201.2-.05z%22%2F%3E%3C%2Fsvg%3E); } .ds-alert[data-color=danger] { --dsc-alert-icon-url:url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M7.74%202.47a.75.75%200%200%201%20.53-.22h7.46a.75.75%200%200%201%20.53.22l5.27%205.27c.14.14.22.33.22.53v7.46a.75.75%200%200%201-.22.53l-5.27%205.27a.75.75%200%200%201-.53.22H8.27a.75.75%200%200%201-.53-.22l-5.27-5.27a.75.75%200%200%201-.22-.53V8.27a.75.75%200%200%201%20.22-.53zm1.29%205.5a.75.75%200%200%200-1.06%201.06L10.94%2012l-2.97%202.97a.75.75%200%201%200%201.06%201.06L12%2013.06l2.97%202.97a.75.75%200%201%200%201.06-1.06L13.06%2012l2.97-2.97a.75.75%200%200%200-1.06-1.06L12%2010.94z%22%2F%3E%3C%2Fsvg%3E); } .ds-popover { --_ds-floating:top; --_ds-floating-arrow-size:0; --_ds-floating-arrow-visibility:inherit; animation: ds-fade-in .15s ease-in-out forwards; inset: 0 auto auto 0; margin: 0; overflow: visible; position: absolute; } .ds-popover:before { background: inherit; border: inherit; border-left-color: transparent; border-top-color: transparent; box-sizing: border-box; content: ""; height: var(--_ds-floating-arrow-size); left: var(--_ds-floating-arrow-x,50%); position: absolute; rotate: 45deg; top: var(--_ds-floating-arrow-y,100%); translate: -50% -50%; visibility: var(--_ds-floating-arrow-visibility); width: var(--_ds-floating-arrow-size); } .ds-popover[data-overscroll=contain] { --_ds-floating-overscroll:contain; overscroll-behavior: contain; overflow: auto; } } @layer ds.components { .ds-popover { &[data-floating|=top]:before { top: 100%; rotate: 45deg; } &[data-floating|=right]:before { left: 0; rotate: 135deg; } &[data-floating|=bottom]:before { top: 0; rotate: -135deg; } &[data-floating|=left]:before { left: 100%; rotate: -45deg; } --_ds-floating:var(--dsc-popover-placement); --_ds-floating-arrow-size:var(--dsc-popover-arrow-size); --dsc-popover-background:var(--ds-color-surface-default); --dsc-popover-border-width:var(--ds-border-width-default); --dsc-popover-border-style:solid; --dsc-popover-border-color:var(--ds-color-border-default); --dsc-popover-color:var(--ds-color-text-default); --dsc-popover-arrow-size:var(--ds-size-3); --dsc-popover-border-radius:var(--ds-border-radius-md); --dsc-popover-max-width:300px; --dsc-popover-padding:var(--ds-size-3) var(--ds-size-4); --dsc-popover-box-shadow:var(--ds-shadow-md); --dsc-popover-placement:top; background: var(--dsc-popover-background); border-radius: var(--dsc-popover-border-radius); border-width: var(--dsc-popover-border-width); border-style: var(--dsc-popover-border-style); border-color: var(--dsc-popover-border-color); box-shadow: var(--dsc-popover-box-shadow); box-sizing: border-box; color: var(--dsc-popover-color); max-width: var(--dsc-popover-max-width); padding: var(--dsc-popover-padding); } .ds-popover[data-variant=default] { --dsc-popover-background:var(--ds-color-surface-default); } .ds-popover[data-variant=tinted] { --dsc-popover-background:var(--ds-color-surface-tinted); } [data-popover=inline] { all: unset; cursor: pointer; text-decoration: underline dotted; text-underline-offset: .27em; font-size: inherit; } [data-popover=inline]:not([hidden]) { display: inline; } [data-popover=inline]:focus-visible { box-shadow: var(--_ds--focus,var(--dsc-focus-boxShadow)); outline: var(--_ds--focus,var(--dsc-focus-outline)); outline-offset: var(--_ds--focus,var(--ds-border-width-focus)); } [data-popover=inline]:focus-visible * { --_ds--focus:; } } @layer ds.components { .ds-skip-link, .ds-skiplink { --dsc-skiplink-padding:var(--ds-size-4) var(--ds-size-4) var(--ds-size-5) var(--ds-size-4); --dsc-skiplink-background:var(--ds-color-surface-hover); --dsc-skiplink-color:var(--ds-color-text-default); border: 0; clip: rect(0 0 0 0); height: 1px; overflow: hidden; padding: 0; position: absolute; white-space: nowrap; width: 1px; } .ds-skip-link:focus, .ds-skiplink:focus { place-items: center; outline: 0; position: static; width: auto; height: auto; margin: inherit; overflow: visible; clip: auto; clip-path: none; white-space: inherit; padding: var(--dsc-skiplink-padding); color: var(--dsc-skiplink-color); background: var(--dsc-skiplink-background); box-sizing: border-box; text-decoration: underline; text-decoration-thickness: max(1px, .0625rem); text-underline-offset: max(5px, .25rem); } :is(.ds-skip-link:focus, .ds-skiplink:focus):not([hidden]) { display: grid; } } @layer ds.components { .ds-details { --dsc-details-border-block-wdith:var( --ds-border-width-default ); --dsc-details-border-block-width:var(--dsc-details-border-block-wdith); --dsc-details-border-block-style:solid; --dsc-details-border-color:var(--ds-color-border-subtle); --dsc-details-icon-gap:var(--ds-size-2); --dsc-details-icon-size:var(--ds-icon-size); --dsc-details-icon-url:url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M5.97%209.47a.75.75%200%200%201%201.06%200L12%2014.44l4.97-4.97a.75.75%200%201%201%201.06%201.06l-5.5%205.5a.75.75%200%200%201-1.06%200l-5.5-5.5a.75.75%200%200%201%200-1.06%22%2F%3E%3C%2Fsvg%3E); --dsc-details-padding:var(--ds-size-2) var(--ds-size-4); --dsc-details-size:var(--ds-size-14); --dsc-details-background:var(--ds-color-surface-default); --dsc-details-summary-color:var(--ds-color-text-default); --dsc-details-summary-background--hover:var(--ds-color-surface-tinted); --dsc-details-summary-background--open:var(--ds-color-surface-tinted); --dsc-details-summary-background:var(--ds-color-surface-default); background: var(--dsc-details-background); border-block-width: var(--dsc-details-border-block-width); border-block-style: var(--dsc-details-border-block-style); border-color: var(--dsc-details-border-color); box-sizing: border-box; } .ds-details + .ds-details { border-top: 0; margin-top: 0; } .ds-details[data-variant=default] { --dsc-details-background:var(--ds-color-surface-default); --dsc-details-summary-background--hover:var(--ds-color-surface-tinted); --dsc-details-summary-background--open:var(--ds-color-surface-tinted); --dsc-details-summary-background:var(--ds-color-surface-default); } .ds-card[data-variant=tinted] > .ds-details, .ds-details[data-variant=tinted] { --dsc-details-background:var(--ds-color-surface-tinted); --dsc-details-summary-background--hover:var(--ds-color-surface-hover); --dsc-details-summary-background--open:var(--ds-color-surface-hover); --dsc-details-summary-background:var(--ds-color-surface-tinted); --dsc-details-border-color:var(--ds-color-border-subtle); } .ds-details > summary::-webkit-details-marker { display: none; } .ds-details > :is(summary, u-summary) { color: var(--dsc-details-summary-color); align-items: center; background: var(--dsc-details-summary-background); box-sizing: border-box; cursor: pointer; list-style: none; min-height: var(--dsc-details-size); gap: var(--dsc-details-icon-gap); outline: none; padding: var(--dsc-details-padding); position: relative; } :is(.ds-details > :is(summary, u-summary)):not([hidden]) { display: flex; } :is(.ds-details > :is(summary, u-summary)):focus-visible { box-shadow: var(--_ds--focus,var(--dsc-focus-boxShadow-inset)); outline: var(--_ds--focus,var(--dsc-focus-outline)); outline-offset: calc(var(--_ds--focus, var(--ds-border-width-focus))*-1); } :is(.ds-details > :is(summary, u-summary)):focus-visible * { --_ds--focus:; } .ds-details > :is(summary, u-summary) { -webkit-print-color-adjust: exact; print-color-adjust: exact; } :is(.ds-details > :is(summary, u-summary)):before { all: unset; background: currentcolor; border-radius: var(--ds-border-radius-md); content: ""; flex-shrink: 0; height: var(--dsc-details-icon-size); -webkit-mask: 50%/contain no-repeat var(--dsc-details-icon-url); mask: 50%/contain no-repeat var(--dsc-details-icon-url); width: var(--dsc-details-icon-size); } @media (forced-colors: active) { .ds-details > :is(summary, u-summary) { color: ButtonText; } :is(.ds-details > :is(summary, u-summary)):before { background: ButtonText; } } .ds-details[open] > :is(summary, u-summary) { background: var(--dsc-details-summary-background--open); } :is(.ds-details[open] > :is(summary, u-summary)):before { rotate: 180deg; } @media (hover: hover) and (pointer: fine) { .ds-details :is(summary, u-summary):hover { background: var(--dsc-details-summary-background--hover); } } @media (prefers-reduced-motion: no-preference) { .ds-details { interpolate-size: allow-keywords; } } .ds-details::details-content, .ds-details::part(details-content) { block-size: 0; overflow-y: hidden; transition: content-visibility allow-discrete .4s, height .4s; } .ds-details[open]::details-content, .ds-details[open]::part(details-content) { height: auto; } :where(.ds-details > :not(summary, u-summary)) { border-radius: inherit; margin-inline: var(--ds-size-5,1rem); } :where(.ds-details > :not(summary, u-summary)):nth-child(2) { margin-block-start: var(--ds-size-5,1rem); } :where(.ds-details > :not(summary, u-summary)):last-child { margin-block-end: var(--ds-size-5,1rem); } } @layer ds.components { .ds-dialog { --dsc-dialog-backdrop-background:rgba(0,0,0,.5); --dsc-dialog-background:var(--ds-color-neutral-surface-default); --dsc-dialog-icon-spacing:var(--ds-size-3); --dsc-dialog-icon-size:var(--ds-icon-size); --dsc-dialog-icon-url:url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20fill%3D%22none%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M6.53%205.47a.75.75%200%200%200-1.06%201.06L10.94%2012l-5.47%205.47a.75.75%200%201%200%201.06%201.06L12%2013.06l5.47%205.47a.75.75%200%201%200%201.06-1.06L13.06%2012l5.47-5.47a.75.75%200%200%200-1.06-1.06L12%2010.94z%22%2F%3E%3C%2Fsvg%3E); --dsc-dialog-color:var(--ds-color-neutral-text-default); --dsc-dialog-divider-border-width:var(--ds-border-width-default); --dsc-dialog-divider-border-style:solid; --dsc-dialog-divider-border-color:var(--ds-color-neutral-border-subtle); --dsc-dialog-border-width:var(--ds-border-width-default); --dsc-dialog-border-style:solid; --dsc-dialog-border-color:var(--ds-color-neutral-border-subtle); --dsc-dialog-max-height:80vh; --dsc-dialog-max-width:40rem; --dsc-dialog-spacing:var(--ds-size-6); --dsc-dialog-placement-inline-max-width:40rem; --dsc-dialog-placement-block-max-width:100%; --dsc-dialog-transition-duration:300ms; --_dsc-dialog-icon-top-right-margin:calc(var(--dsc-dialog-spacing)*-1 + var(--dsc-dialog-icon-spacing)); background: var(--dsc-dialog-background); border-color: var(--dsc-dialog-border-color); border-radius: clamp(0px, ((100vw - 4px) - 100%) * 100000, var(--ds-border-radius-lg)); border-style: var(--dsc-dialog-border-style); border-width: var(--dsc-dialog-border-width); box-shadow: var(--ds-shadow-xl); box-sizing: border-box; color: var(--dsc-dialog-color); inset: 0; margin: auto; max-height: var(--dsc-dialog-max-height); max-width: var(--dsc-dialog-max-width); outline: none; overflow: auto; overscroll-behavior: contain; padding: var(--dsc-dialog-spacing); position: fixed; width: 100%; z-index: 2147483647; z-index: calc(infinity); } .ds-dialog::backdrop { animation: ds-dialog-fade-in var(--dsc-dialog-transition-duration) ease-in-out; background: var(--dsc-dialog-backdrop-background,rgba(0,0,0,.5)); overflow: hidden; overscroll-behavior: contain; } .ds-dialog:where([data-placement=bottom], [data-placement=top]) { max-width: var(--dsc-dialog-placement-block-max-width); width: 100%; margin-inline: auto; } .ds-dialog:where([data-placement=left], [data-placement=right]) { border-radius: 0; border-block-width: 0; height: 100%; height: -webkit-fill-available; height: -moz-available; height: stretch; max-height: unset; max-width: var(--dsc-dialog-placement-inline-max-width); } .ds-dialog[data-placement=bottom] { top: auto; border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom-width: 0; } .ds-dialog[data-placement=top] { bottom: auto; border-top-left-radius: 0; border-top-right-radius: 0; border-top-width: 0; } .ds-dialog[data-placement=left] { right: auto; border-left-width: 0; } .ds-dialog[data-placement=right] { left: auto; border-right-width: 0; } .ds-dialog:not([data-placement]), .ds-dialog[data-placement=center] { align-self: center; } .ds-dialog[open] { animation: ds-dialog-slide-up var(--dsc-dialog-transition-duration) ease-in-out, ds-dialog-fade-in var(--dsc-dialog-transition-duration) ease-in-out; } .ds-dialog[open][data-placement=bottom] { animation: ds-dialog-slide-up var(--dsc-dialog-transition-duration) ease; } .ds-dialog[open][data-placement=top] { animation: ds-dialog-slide-down var(--dsc-dialog-transition-duration) ease; } .ds-dialog[open][data-placement=left] { animation: ds-dialog-slide-left var(--dsc-dialog-transition-duration) ease; } .ds-dialog[open][data-placement=right] { animation: ds-dialog-slide-right var(--dsc-dialog-transition-duration) ease; } .ds-dialog:has(> .ds-dialog__block) { --_dsc-dialog-icon-top-right-margin:var(--dsc-dialog-icon-spacing); padding: 0; } @media (prefers-reduced-motion: reduce) { .ds-dialog::backdrop, .ds-dialog[open] { animation: none; } } .ds-dialog button[command=close]:empty:before, .ds-dialog button[data-command=close]:empty:before { content: ""; background: currentcolor; height: var(--dsc-dialog-icon-size); width: var(--dsc-dialog-icon-size); -webkit-mask: center/contain no-repeat var(--dsc-dialog-icon-url); mask: center/contain no-repeat var(--dsc-dialog-icon-url); } @media (forced-colors: active) { .ds-dialog button[command=close]:empty:before, .ds-dialog button[data-command=close]:empty:before { background: ButtonText; } } .ds-dialog > button[command=close]:first-child, .ds-dialog > button[data-command=close]:first-child, .ds-dialog > form[method=dialog]:first-child > button:only-child { float: inline-end; margin-block-start: var(--_dsc-dialog-icon-top-right-margin); margin-block-end: var(--dsc-dialog-icon-spacing); margin-inline-start: var(--dsc-dialog-icon-spacing); margin-inline-end: var(--_dsc-dialog-icon-top-right-margin); color: inherit; } :is(.ds-dialog > form[method=dialog]:first-child > button:only-child):before { content: ""; background: currentcolor; height: var(--ds-size-6); width: var(--ds-size-6); -webkit-mask: center/contain no-repeat var(--dsc-dialog-icon-url); mask: center/contain no-repeat var(--dsc-dialog-icon-url); } @media (forced-colors: active) { :is(.ds-dialog > form[method=dialog]:first-child > button:only-child):before { background: ButtonText; } } .ds-dialog__block { padding: var(--dsc-dialog-spacing); } .ds-dialog__block + .ds-dialog__block { border-top: var(--dsc-dialog-divider-border-width) var(--dsc-dialog-divider-border-style) var(--dsc-dialog-divider-border-color); } body:has(.ds-dialog:modal) { overflow: hidden; } @keyframes ds-dialog-fade-in { 0% { opacity: 0; } } @keyframes ds-dialog-slide-up { 0% { opacity: 0; translate: 0 3rem; } } @keyframes ds-dialog-slide-down { 0% { opacity: 0; translate: 0 -3rem; } } @keyframes ds-dialog-slide-left { 0% { opacity: 0; translate: -3rem 0; } } @keyframes ds-dialog-slide-right { 0% { opacity: 0; translate: 3rem 0; } } } @layer ds.components { .ds-list { --dsc-list-padding-inline:var(--ds-size-6) 0; --dsc-list-margin-top:var(--ds-size-3); --dsc-list-margin-top-nested:var(--ds-size-2); margin: 0; padding-inline: var(--dsc-list-padding-inline); } .ds-list > li + li { margin-top: var(--dsc-list-margin-top); } .ds-list > li > :is(ol, ul) > li + li { margin-top: var(--dsc-list-margin-top-nested); } .ds-list > li:before { content: "\200b"; position: absolute; } .ds-card { --dsc-card-background--active:var(--ds-color-surface-active); --dsc-card-background--hover:var(--ds-color-surface-hover); --dsc-card-background:var(--ds-color-surface-default); --dsc-card-border-width:var(--ds-border-width-default); --dsc-card-border-style:solid; --dsc-card-border-color:var(--ds-color-border-subtle); --dsc-card-block-border-width:var(--dsc-card-border-width); --dsc-card-block-border-style:var(--dsc-card-border-style); --dsc-card-block-border-color:var(--dsc-card-border-color); --dsc-card-color:var(--ds-color-text-default); --dsc-card-content-margin-block:var(--ds-size-3) 0; --dsc-card-padding:var(--ds-size-6); --dsc-card-border-radius:var(--ds-border-radius-lg); background: var(--dsc-card-background); border-radius: var(--dsc-card-border-radius); border-width: var(--dsc-card-border-width); border-style: var(--dsc-card-border-style); border-color: var(--dsc-card-border-color); box-sizing: border-box; color: var(--dsc-card-color); overflow: clip; padding: var(--dsc-card-padding); text-align: inherit; } .ds-card[data-variant=default] { background: var(--ds-color-surface-default); } .ds-card[data-variant=tinted] { background: var(--ds-color-surface-tinted); } .ds-card:not([hidden]) { display: block; } } @layer ds.components { .ds-card:where(a, button, [role=button], [data-clickdelegatefor]) { cursor: pointer; text-decoration: none; } .ds-card:where(a, button, [role=button], [data-clickdelegatefor]):focus-visible { box-shadow: var(--_ds--focus,var(--dsc-focus-boxShadow)); outline: var(--_ds--focus,var(--dsc-focus-outline)); outline-offset: var(--_ds--focus,var(--ds-border-width-focus)); } .ds-card:where(a, button, [role=button], [data-clickdelegatefor]):focus-visible * { --_ds--focus:; } .ds-card:where(a, button, [role=button], [data-clickdelegatefor]) > .ds-card__block > :is(h1, h2, h3, h4, h5, h6), .ds-card:where(a, button, [role=button], [data-clickdelegatefor]) > :is(h1, h2, h3, h4, h5, h6) { text-decoration-line: underline; text-decoration-style: solid; text-decoration-thickness: max(1px, .0625rem, .1025em); text-underline-offset: .24em; } :is(.ds-card:where(a, button, [role=button], [data-clickdelegatefor]) > :is(h1, h2, h3, h4, h5, h6), .ds-card:where(a, button, [role=button], [data-clickdelegatefor]) > .ds-card__block > :is(h1, h2, h3, h4, h5, h6)) > a { text-decoration: none; color: inherit; } :is(:is(.ds-card:where(a, button, [role=button], [data-clickdelegatefor]) > :is(h1, h2, h3, h4, h5, h6), .ds-card:where(a, button, [role=button], [data-clickdelegatefor]) > .ds-card__block > :is(h1, h2, h3, h4, h5, h6)) > a):focus-visible { box-shadow: var(--_ds--focus,var(--dsc-focus-boxShadow)); outline: var(--_ds--focus,var(--dsc-focus-outline)); outline-offset: var(--_ds--focus,var(--ds-border-width-focus)); } :is(:is(.ds-card:where(a, button, [role=button], [data-clickdelegatefor]) > :is(h1, h2, h3, h4, h5, h6), .ds-card:where(a, button, [role=button], [data-clickdelegatefor]) > .ds-card__block > :is(h1, h2, h3, h4, h5, h6)) > a):focus-visible * { --_ds--focus:; } @media (hover: hover) and (pointer: fine) { .ds-card:where(a, button, [role=button]):hover, .ds-card[data-clickdelegatefor]:has(.\:click-delegate-hover) { background: var(--dsc-card-background--hover); } :is(.ds-card:where(a, button, [role=button]):hover, .ds-card[data-clickdelegatefor]:has(.\:click-delegate-hover)):active { background: var(--dsc-card-background--active); } } .ds-card:has(> .ds-card__block, > .ds-details) { padding: 0; } .ds-card > .ds-details:first-child { border-top: 0; } :is(.ds-card > .ds-details:first-child) > summary, :is(.ds-card > .ds-details:first-child) > u-summary { border-top-left-radius: var(--dsc-card-border-radius); border-top-right-radius: var(--dsc-card-border-radius); } .ds-card > .ds-details:last-child { border-bottom: 0; } :is(.ds-card > .ds-details:last-child):not([open]) > summary, :is(.ds-card > .ds-details:last-child):not([open]) > u-summary { border-bottom-left-radius: var(--dsc-card-border-radius); border-bottom-right-radius: var(--dsc-card-border-radius); } :where(.ds-card) { font: inherit; margin: 0; } :where(.ds-card, .ds-card__block) > :first-child { margin-block: 0; } :where(.ds-card, .ds-card__block) > * + * { margin-block: var(--dsc-card-content-margin-block); } .ds-card__block { box-sizing: border-box; margin: 0; padding: var(--dsc-card-padding); position: relative; } .ds-card__block:before { border-top-width: var(--dsc-card-block-border-width); border-top-style: var(--dsc-card-block-border-style); inset: 0 0 auto; translate: 0 -100%; } .ds-card__block:after, .ds-card__block:before { content: ""; border-color: var(--dsc-card-block-border-color); position: absolute; } .ds-card__block:after { border-left-width: var(--dsc-card-block-border-width); border-left-style: var(--dsc-card-block-border-style); inset: 0 auto 0 0; translate: -100%; } .ds-card__block:has(> :is(audio, figure, iframe, img, picture, video):only-child) { padding: 0; } .ds-card__block:has(> :is(audio, figure, iframe, img, picture, video):only-child) > :not([hidden]), .ds-card__block:has(> :is(audio, figure, iframe, img, picture, video):only-child) > picture img:not([hidden]) { border: 0; display: block; height: auto; width: 100%; } .ds-card__block:has(> :is(audio, figure, iframe, img, picture, video):only-child) > iframe { aspect-ratio: 16/9; } } @layer ds.components { .ds-dropdown { --_ds-floating:top; --_ds-floating-arrow-size:0; --_ds-floating-arrow-visibility:inherit; animation: ds-fade-in .15s ease-in-out forwards; inset: 0 auto auto 0; margin: 0; overflow: visible; position: absolute; } .ds-dropdown:before { background: inherit; border: inherit; border-left-color: transparent; border-top-color: transparent; box-sizing: border-box; content: ""; height: var(--_ds-floating-arrow-size); left: var(--_ds-floating-arrow-x,50%); position: absolute; rotate: 45deg; top: var(--_ds-floating-arrow-y,100%); translate: -50% -50%; visibility: var(--_ds-floating-arrow-visibility); width: var(--_ds-floating-arrow-size); } .ds-dropdown[data-overscroll=contain] { --_ds-floating-overscroll:contain; overscroll-behavior: contain; overflow: auto; } .ds-dropdown { &[data-floating|=top]:before { top: 100%; rotate: 45deg; } &[data-floating|=right]:before { left: 0; rotate: 135deg; } &[data-floating|=bottom]:before { top: 0; rotate: -135deg; } &[data-floating|=left]:before { left: 100%; rotate: -45deg; } --_ds-floating:var(--dsc-dropdown-placement); --_ds-floating-arrow-size:var(--dsc-dropdown-arrow-size); --_ds-floating-arrow-visibility:hidden; --dsc-dropdown-padding:var(--ds-size-3) var(--ds-size-2); --dsc-dropdown-item-padding:var(--ds-size-2) var(--ds-size-4); --dsc-dropdown-item-size:var(--ds-size-12); --dsc-dropdown-background:var(--ds-color-neutral-surface-default); --dsc-dropdown-border-width:var(--ds-border-width-default); --dsc-dropdown-border-style:solid; --dsc-dropdown-border-color:var(--ds-color-neutral-border-subtle); --dsc-dropdown-box-shadow:var(--ds-shadow-md); --dsc-dropdown-placement:bottom; --dsc-dropdown-arrow-size:var(--ds-size-2); background: var(--dsc-dropdown-background); border-color: var(--dsc-dropdown-border-color); border-radius: var(--ds-border-radius-md); border-style: var(--dsc-dropdown-border-style); border-width: var(--dsc-dropdown-border-width); box-shadow: var(--dsc-dropdown-box-shadow); box-sizing: border-box; list-style: none; min-width: 15em; padding: var(--dsc-dropdown-padding); } .ds-dropdown > :is(h2, h3, h4, h5, h6) { align-items: center; box-sizing: border-box; color: var(--ds-color-neutral-text-default); font-size: inherit; margin: 0; min-height: var(--dsc-dropdown-item-size); padding: var(--dsc-dropdown-item-padding); } :is(.ds-dropdown > :is(h2, h3, h4, h5, h6)):not([hidden]) { display: flex; } .ds-dropdown > ul { margin: 0; padding: 0; list-style: none; } .ds-dropdown > ul > li > :is(a, button, [role=button]) { justify-content: start; padding: var(--dsc-dropdown-item-padding); min-height: var(--dsc-dropdown-item-size); width: 100%; font-weight: var(--ds-font-weight-regular); } } @layer ds.components { .ds-chip { --dsc-chip-background--active:var(--ds-color-surface-active); --dsc-chip-background--checked--active:var(--ds-color-base-active); --dsc-chip-background--checked--hover:var(--ds-color-base-hover); --dsc-chip-background--checked:var(--ds-color-base-default); --dsc-chip-background--hover:var(--ds-color-surface-hover); --dsc-chip-background:var(--ds-color-surface-tinted); --dsc-chip-border-color--checked:transparent; --dsc-chip-border-color:var(--ds-color-border-subtle); --dsc-chip-border-radius--checkbox-input:var(--ds-border-radius-sm); --dsc-chip-border-radius--checkbox:var(--ds-border-radius-md); --dsc-chip-border-radius:calc(var(--dsc-chip-height)/2); --dsc-chip-border-style:solid; --dsc-chip-border-width:var(--ds-border-width-default); --dsc-chip-color:var(--ds-color-text-default); --dsc-chip-height:var(--ds-size-8); --dsc-chip-icon-size:var(--ds-icon-size); --dsc-chip-icon-url:url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20fill%3D%22none%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M6.53%205.47a.75.75%200%200%200-1.06%201.06L10.94%2012l-5.47%205.47a.75.75%200%201%200%201.06%201.06L12%2013.06l5.47%205.47a.75.75%200%201%200%201.06-1.06L13.06%2012l5.47-5.47a.75.75%200%200%200-1.06-1.06L12%2010.94z%22%2F%3E%3C%2Fsvg%3E); --dsc-chip-input-accent-color:var(--ds-color-base-contrast-default); --dsc-chip-input-color:var(--ds-color-text-subtle); --dsc-chip-input-size:var(--ds-size-5); --dsc-chip-input-stroke-color:var(--ds-color-base-default); --dsc-chip-padding-inline:var(--ds-size-3); --dsc-chip-spacing:calc((var(--dsc-chip-height) - var(--dsc-chip-input-size))/2); background: var(--dsc-chip-background); border-color: var(--dsc-chip-border-color); border-radius: var(--dsc-chip-border-radius); border-style: var(--dsc-chip-border-style); border-width: var(--dsc-chip-border-width); box-sizing: border-box; color: var(--dsc-chip-color); cursor: pointer; font-family: inherit; font-size: var(--ds-body-sm-font-size); line-height: var(--ds-line-height-sm); margin: 0; max-height: -moz-fit-content; max-height: fit-content; max-width: -moz-fit-content; max-width: fit-content; min-width: 0; min-height: var(--dsc-chip-height); padding-block: calc((var(--dsc-chip-height) - 1lh)/2 - var(--dsc-chip-border-width)); padding-inline: var(--dsc-chip-padding-inline); position: relative; text-align: inherit; text-decoration: none; } .ds-chip:not([data-wrap=wrap]) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ds-chip { -webkit-print-color-adjust: exact; print-color-adjust: exact; } .ds-chip:focus-visible { box-shadow: var(--_ds--focus,var(--dsc-focus-boxShadow)); outline: var(--_ds--focus,var(--dsc-focus-outline)); outline-offset: var(--_ds--focus,var(--ds-border-width-focus)); } .ds-chip:focus-visible * { --_ds--focus:; } .ds-chip > input { inset-block-start: calc((var(--dsc-chip-height) - var(--dsc-chip-input-size))/2 - var(--dsc-chip-border-width)); inset-inline-start: var(--dsc-chip-spacing); position: absolute; --dsc-input-background:transparent; --dsc-input-border-color:var(--dsc-chip-input-color); --dsc-input-accent-color:var(--dsc-chip-input-accent-color); --dsc-input-stroke-color:var(--dsc-chip-input-stroke-color); --dsc-input-size--toggle:var(--dsc-chip-input-size); --dsc-input-outline-width--hover:0; } .ds-chip:not([hidden]) { display: inline-block; } .ds-chip:has(:focus-visible) { box-shadow: var(--_ds--focus,var(--dsc-focus-boxShadow)); outline: var(--_ds--focus,var(--dsc-focus-outline)); outline-offset: var(--_ds--focus,var(--ds-border-width-focus)); } .ds-chip:has(:focus-visible) * { --_ds--focus:; } .ds-chip:disabled, .ds-chip:has(input:disabled), .ds-chip[aria-disabled=true] { cursor: not-allowed; opacity: var(--ds-opacity-disabled); } .ds-chip[data-removable] { padding-inline-end: calc(var(--dsc-chip-spacing)*2 + var(--dsc-chip-icon-size)); } .ds-chip[data-removable]:after { content: ""; position: absolute; inset-block-start: calc((var(--dsc-chip-height) - var(--dsc-chip-icon-size))/2 - var(--dsc-chip-border-width)); inset-inline-end: var(--dsc-chip-spacing); background: currentcolor; height: var(--dsc-chip-icon-size); -webkit-mask: center/contain no-repeat var(--dsc-chip-icon-url); mask: center/contain no-repeat var(--dsc-chip-icon-url); width: var(--dsc-chip-icon-size); padding-inline: 0; flex-shrink: 0; } .ds-chip:has(input) { padding-inline-start: calc(var(--dsc-chip-spacing)*2 + var(--dsc-chip-icon-size)); } .ds-chip:has(input[type=checkbox]) { border-radius: var(--dsc-chip-border-radius--checkbox); } .ds-chip:has(input:checked), .ds-chip[data-removable] { color: var(--dsc-chip-input-accent-color); background: var(--dsc-chip-background--checked); border-color: var(--dsc-chip-border-color--checked); } @media (hover: hover) and (pointer: fine) { .ds-chip:not(:has(:disabled, [aria-disabled=true])):hover { background: var(--dsc-chip-background--hover); } .ds-chip:not(:has(:disabled, [aria-disabled=true])):active { background: var(--dsc-chip-background--active); } :is(.ds-chip:not(:has(:disabled, [aria-disabled=true])):has(input:checked), .ds-chip[data-removable]:not(:has(:disabled, [aria-disabled=true]))):hover { background: var(--dsc-chip-background--checked--hover); } :is(.ds-chip:not(:has(:disabled, [aria-disabled=true])):has(input:checked), .ds-chip[data-removable]:not(:has(:disabled, [aria-disabled=true]))):active { background: var(--dsc-chip-background--checked--active); } } } @layer ds.components { .ds-divider { --dsc-divider-border-width:var(--ds-border-width-default); --dsc-divider-border-style:solid; --dsc-divider-border-color:var(--ds-color-neutral-border-subtle); border-width: 0; border-top-width: var(--dsc-divider-border-width); border-top-style: var(--dsc-divider-border-style); border-color: var(--dsc-divider-border-color); box-sizing: border-box; margin-block: .5em; width: 100%; } .ds-tabs { --dsc-tabs-tab-padding:var(--ds-size-3) var(--ds-size-5); --dsc-tabs-tab-color:var(--ds-color-neutral-text-subtle); --dsc-tabs-tab-color--hover:var(--ds-color-neutral-text-default); --dsc-tabs-tab-color--selected:var(--ds-color-text-subtle); --dsc-tabs-content-padding:var(--ds-size-4) var(--ds-size-5); --dsc-tabs-list-border-color:var(--ds-color-neutral-border-subtle); --dsc-tabs-list-border-bottom-width:var(--ds-border-width-default); --dsc-tabs-list-border-bottom-style:solid; } } @layer ds.components { .ds-tabs :is([role=tabpanel], .ds-tabs ds-tabpanel, .ds-tabs u-tabpanel) { padding: var(--dsc-tabs-content-padding); } :is(.ds-tabs :is([role=tabpanel], .ds-tabs ds-tabpanel, .ds-tabs u-tabpanel)):focus-visible { box-shadow: var(--_ds--focus,var(--dsc-focus-boxShadow)); outline: var(--_ds--focus,var(--dsc-focus-outline)); outline-offset: var(--_ds--focus,var(--ds-border-width-focus)); } :is(.ds-tabs :is([role=tabpanel], .ds-tabs ds-tabpanel, .ds-tabs u-tabpanel)):focus-visible * { --_ds--focus:; } .ds-tabs :is([role=tablist], .ds-tabs ds-tablist, .ds-tabs u-tablist) { flex-direction: row; border-bottom-width: var(--dsc-tabs-list-border-bottom-width); border-bottom-style: var(--dsc-tabs-list-border-bottom-style); border-color: var(--dsc-tabs-list-border-color); position: relative; overflow-x: auto; } :is(.ds-tabs :is([role=tablist], .ds-tabs ds-tablist, .ds-tabs u-tablist)):not([hidden]) { display: flex; } :is(.ds-tabs :is([role=tablist], .ds-tabs ds-tablist, .ds-tabs u-tablist)) > :is([role=tab], ds-tab, u-tab) { align-items: center; background: none; border: 0; box-sizing: border-box; color: var(--dsc-tabs-tab-color); cursor: pointer; flex-direction: row; flex-shrink: 0; font-family: inherit; font-size: inherit; gap: var(--ds-size-1); justify-content: center; line-height: var(--ds-line-height-sm); margin: 0; padding: var(--dsc-tabs-tab-padding); position: relative; text-align: center; white-space: nowrap; } :is(:is(.ds-tabs :is([role=tablist], .ds-tabs ds-tablist, .ds-tabs u-tablist)) > :is([role=tab], ds-tab, u-tab)):focus-visible { box-shadow: var(--_ds--focus,var(--dsc-focus-boxShadow-inset)); outline: var(--_ds--focus,var(--dsc-focus-outline)); outline-offset: calc(var(--_ds--focus, var(--ds-border-width-focus))*-1); } :is(:is(.ds-tabs :is([role=tablist], .ds-tabs ds-tablist, .ds-tabs u-tablist)) > :is([role=tab], ds-tab, u-tab)):focus-visible * { --_ds--focus:; } :is(:is(.ds-tabs :is([role=tablist], .ds-tabs ds-tablist, .ds-tabs u-tablist)) > :is([role=tab], ds-tab, u-tab)):not([hidden]) { display: flex; } :is(:is(.ds-tabs :is([role=tablist], .ds-tabs ds-tablist, .ds-tabs u-tablist)) > :is([role=tab], ds-tab, u-tab)):not([data-size]) { font-size: inherit; } :is(:is(.ds-tabs :is([role=tablist], .ds-tabs ds-tablist, .ds-tabs u-tablist)) > :is([role=tab], ds-tab, u-tab)) :is(img, svg) { display: inline-block; flex-shrink: 0; font-size: 1em; height: var(--ds-icon-size); vertical-align: middle; width: var(--ds-icon-size); } :is(:is(.ds-tabs :is([role=tablist], .ds-tabs ds-tablist, .ds-tabs u-tablist)) > :is([role=tab], ds-tab, u-tab)):after { content: ""; display: block; height: .15em; width: 100%; position: absolute; bottom: 0; left: 0; } [aria-selected=true]:is(:is(.ds-tabs :is([role=tablist], .ds-tabs ds-tablist, .ds-tabs u-tablist)) > :is([role=tab], ds-tab, u-tab)) { color: var(--dsc-tabs-tab-color--selected); } [aria-selected=true]:is(:is(.ds-tabs :is([role=tablist], .ds-tabs ds-tablist, .ds-tabs u-tablist)) > :is([role=tab], ds-tab, u-tab)):after { background: var(--dsc-tabs-tab-color--selected); } [aria-selected=true]:is(:is(.ds-tabs :is([role=tablist], .ds-tabs ds-tablist, .ds-tabs u-tablist)) > :is([role=tab], ds-tab, u-tab)):focus-visible:after { z-index: -1; } @media (forced-colors: active) { [aria-selected=true]:is(:is(.ds-tabs :is([role=tablist], .ds-tabs ds-tablist, .ds-tabs u-tablist)) > :is([role=tab], ds-tab, u-tab)) { color: initial; border-bottom: 2px solid CanvasText; } } :is(:is(.ds-tabs :is([role=tablist], .ds-tabs ds-tablist, .ds-tabs u-tablist)) > :is([role=tab], ds-tab, u-tab)):focus-visible { z-index: 2; } @media (hover: hover) and (pointer: fine) { :is(:is(.ds-tabs :is([role=tablist], .ds-tabs ds-tablist, .ds-tabs u-tablist)) > :is([role=tab], ds-tab, u-tab)):hover:not([aria-selected=true]) { color: var(--dsc-tabs-tab-color--hover); } :is(:is(.ds-tabs :is([role=tablist], .ds-tabs ds-tablist, .ds-tabs u-tablist)) > :is([role=tab], ds-tab, u-tab)):hover:not([aria-selected=true]):after { background: var(--dsc-tabs-list-border-color); } } } @layer ds.components { .ds-pagination { --dsc-pagination-gap:var(--ds-size-2); --dsc-pagination-icon-size:var(--ds-icon-size); --dsc-pagination-icon-url:url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M9.47%205.97a.75.75%200%200%201%201.06%200l5.5%205.5a.75.75%200%200%201%200%201.06l-5.5%205.5a.75.75%200%201%201-1.06-1.06L14.44%2012%209.47%207.03a.75.75%200%200%201%200-1.06%22%2F%3E%3C%2Fsvg%3E); --dsc-pagination-ellipsis:"\2026"; --_ds-aria-label:var(--dsc-pagination-label); } .ds-pagination:is(:lang(no), :lang(nb), :lang(nn)) { --dsc-pagination-label:"Bla i sider"; } .ds-pagination :is(ol, ul) { align-items: center; flex-wrap: wrap; gap: var(--dsc-pagination-gap); list-style: none; margin: 0; padding: 0; } :is(.ds-pagination :is(ol, ul)):not([hidden]) { display: flex; } :is(.ds-pagination :is(ol, ul)) > li:first-child > [aria-hidden=true], :is(.ds-pagination :is(ol, ul)) > li:last-child > [aria-hidden=true] { visibility: hidden; } :is(.ds-pagination :is(ol, ul)) > li > :not([aria-current=true]) { --dsc-button-background--active:var(--ds-color-surface-active); --dsc-button-background--hover:var(--ds-color-surface-hover); --dsc-button-background:transparent; --dsc-button-color--active:var(--dsc-button-color); --dsc-button-color--hover:var(--dsc-button-color); --dsc-button-color:var(--ds-color-text-subtle); } :is(.ds-pagination :is(ol, ul)) > li > [data-variant=tertiary][aria-current=true] { --dsc-button-background--active:var(--ds-color-base-active); --dsc-button-background--hover:var(--ds-color-base-hover); --dsc-button-background:var(--ds-color-base-default); --dsc-button-color--active:var(--dsc-button-color); --dsc-button-color--hover:var(--dsc-button-color); --dsc-button-color:var(--ds-color-base-contrast-default); } :is(.ds-pagination :is(ol, ul)) > li:has([aria-label=hidden]) { display: none; } :is(.ds-pagination :is(ol, ul)) > li > [aria-label]:empty:before { content: attr(aria-label); } :is(.ds-pagination :is(ol, ul)) > li > [aria-label="0"]:empty { color: inherit; pointer-events: none; text-decoration: none; } :is(.ds-pagination :is(ol, ul)) > li > [aria-label="0"]:empty:before { content: var(--dsc-pagination-ellipsis) /""; } :is(.ds-pagination :is(ol, ul)) > li:first-child > :before, :is(.ds-pagination :is(ol, ul)) > li:last-child > :before { content: ""; background: currentcolor; height: var(--dsc-pagination-icon-size); -webkit-mask: center/contain no-repeat var(--dsc-pagination-icon-url); mask: center/contain no-repeat var(--dsc-pagination-icon-url); width: var(--dsc-pagination-icon-size); order: 1; } @media (forced-colors: active) { :is(.ds-pagination :is(ol, ul)) > li:first-child > :before, :is(.ds-pagination :is(ol, ul)) > li:last-child > :before { background: LinkText; } } :is(.ds-pagination :is(ol, ul)) > li:first-child > :before { rotate: 180deg; order: 0; } :dir(rtl) :is(.ds-pagination :is(ol, ul)) > li:first-child > :before { rotate: 0deg; } :dir(rtl) :is(.ds-pagination :is(ol, ul)) > li:last-child > :before { rotate: 180deg; } :is(.ds-pagination :is(ol, ul)) > li:empty:before { content: var(--dsc-pagination-ellipsis); display: block; text-align: center; min-width: var(--ds-size-12); } } @layer ds.components { .ds-skeleton { --dsc-skeleton-animation-duration:0.8s; --dsc-skeleton-animation:ds-skeleton-opacity-fade var(--dsc-skeleton-animation-duration) linear infinite alternate; --dsc-skeleton-background:var(--ds-color-neutral-surface-tinted); animation: var(--dsc-skeleton-animation); border-radius: var(--ds-border-radius-lg); box-sizing: border-box; height: 1.3em; pointer-events: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; width: 100%; } .ds-skeleton:not([hidden]) { display: block; } .ds-skeleton[data-variant=circle] { aspect-ratio: 1/1; border-radius: var(--ds-border-radius-full); width: 1.3em; } .ds-skeleton[data-variant=text] { border-radius: var(--ds-border-radius-full); -webkit-box-decoration-break: clone; box-decoration-break: clone; color: transparent; font-size: .8em; letter-spacing: .1em; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .ds-skeleton[data-variant=text]:not([hidden]) { display: inline; } .ds-skeleton[data-variant=text]:empty:before { content: attr(data-text); word-break: break-word; } .ds-skeleton:not(:empty) { width: -moz-fit-content; width: fit-content; height: -moz-fit-content; height: fit-content; color: transparent; } .ds-skeleton:not(:empty) > * { visibility: hidden; } @media (prefers-reduced-motion: reduce) { .ds-skeleton { animation-duration: 1.6s; } } @media (forced-colors: active) { .ds-skeleton { opacity: 0; } } @keyframes ds-skeleton-opacity-fade { 0% { background: var(--dsc-skeleton-background); } to { background: rgb(from var(--dsc-skeleton-background) r g b/.4); } } } @layer ds.components { .ds-tag { --dsc-tag-background:var(--ds-color-surface-tinted); --dsc-tag-color:var(--ds-color-text-default); --dsc-tag-min-height:var(--ds-size-8); --dsc-tag-padding:0 var(--ds-size-2); --dsc-tag-border-radius:var(--ds-border-radius-sm); --dsc-tag-border-width:var(--ds-border-width-default); --dsc-tag-border-color:transparent; --dsc-tag-border-style:solid; align-items: center; background: var(--dsc-tag-background); border-color: var(--dsc-tag-border-color); border-radius: var(--dsc-tag-border-radius); border-style: var(--dsc-tag-border-style); border-width: var(--dsc-tag-border-width); box-sizing: border-box; color: var(--dsc-tag-color); flex-shrink: 0; font-size: var(--ds-body-sm-font-size); font-weight: 400; height: -moz-fit-content; height: fit-content; line-height: var(--ds-line-height-sm); min-height: var(--dsc-tag-min-height); padding: var(--dsc-tag-padding); width: -moz-max-content; width: max-content; word-break: break-word; -webkit-print-color-adjust: exact; print-color-adjust: exact; } .ds-tag :is(img, svg) { display: inline-block; flex-shrink: 0; font-size: 1em; height: var(--ds-icon-size); vertical-align: middle; width: var(--ds-icon-size); } .ds-tag:not([hidden]) { display: inline-flex; } .ds-tag[data-variant=outline] { --dsc-tag-border-color:var(--ds-color-border-subtle); } @media (forced-colors: active) { .ds-tag { border-width: var(--ds-border-width-default); border-style: solid; border-color: CanvasText; } } } @layer ds.components { .ds-error-summary { --dsc-errorsummary-background:var(--ds-color-danger-surface-tinted); --dsc-errorsummary-border-radius:var(--ds-border-radius-lg); --dsc-errorsummary-padding:var(--ds-size-7); --dsc-errorsummary-link-color:var(--ds-color-neutral-text-default); --dsc-errorsummary-heading-color:var(--ds-color-danger-text-default); background: var(--dsc-errorsummary-background); border-radius: var(--dsc-errorsummary-border-radius); box-sizing: border-box; padding: var(--dsc-errorsummary-padding); animation: _is-visible 0s; } .ds-error-summary:focus-visible { box-shadow: var(--_ds--focus,var(--dsc-focus-boxShadow)); outline: var(--_ds--focus,var(--dsc-focus-outline)); outline-offset: var(--_ds--focus,var(--ds-border-width-focus)); } .ds-error-summary:focus-visible * { --_ds--focus:; } .ds-error-summary:not([hidden]) { display: block; } .ds-error-summary :is(h1, h2, h3, h4, h5, h6) { color: var(--dsc-errorsummary-heading-color); font-size: var(--ds-font-size-plus-1); margin-bottom: var(--ds-size-2); } .ds-error-summary a { color: var(--dsc-errorsummary-link-color); } .ds-error-summary li:last-of-type { margin-bottom: 0; } @keyframes _is-visible { 0% { opacity: 0; } } } @layer ds.components { .ds-toggle-group, .ds-togglegroup { --dsc-togglegroup-background:var(--ds-color-surface-default); --dsc-togglegroup-border-width:var(--ds-border-width-default); --dsc-togglegroup-border-style:solid; --dsc-togglegroup-border-color:var(--ds-color-border-default); --dsc-togglegroup-color:var(--ds-color-text-default); --dsc-togglegroup-spacing:0; --dsc-togglegroup-border-radius:var(--ds-border-radius-default); --dsc-togglegroup-button-size:var(--ds-size-12); --dsc-togglegroup-label:""; --_ds-data-toggle-group:var(--dsc-togglegroup-label); background: var(--dsc-togglegroup-background); border-radius: var(--dsc-togglegroup-border-radius); border: none; box-sizing: border-box; color: var(--dsc-togglegroup-color); gap: var(--dsc-togglegroup-spacing); grid-auto-columns: 1fr; grid-auto-flow: column; height: var(--dsc-togglegroup-button-size); margin-inline: 0; max-width: -moz-fit-content; max-width: fit-content; min-width: 0; outline-offset: calc(var(--dsc-togglegroup-border-width)*-1); outline: var(--dsc-togglegroup-border-width) var(--dsc-togglegroup-border-style) var(--dsc-togglegroup-border-color); overflow-x: auto; padding: var(--dsc-togglegroup-spacing); width: auto; } :is(.ds-togglegroup, .ds-toggle-group):not([hidden]) { display: flex; } :is(.ds-togglegroup, .ds-toggle-group) > :is(a, label, button) { isolation: isolate; border-radius: inherit; height: 100%; min-height: unset; white-space: nowrap; min-width: -moz-fit-content; min-width: fit-content; } [data-icon]:is(:is(.ds-togglegroup, .ds-toggle-group) > :is(a, label, button)) { width: var(--dsc-togglegroup-button-size); } @media (forced-colors: active) { :is(.ds-togglegroup, .ds-toggle-group) > :is(label:has(input:checked), button[aria-checked=true], a[aria-current=true]) { background: ButtonText; color: initial; } :is(:is(.ds-togglegroup, .ds-toggle-group) > :is(label:has(input:checked), button[aria-checked=true], a[aria-current=true])) svg { color: initial; } } :is(.ds-togglegroup, .ds-toggle-group) > label > input { position: absolute; opacity: 0; pointer-events: none; } :is(.ds-togglegroup, .ds-toggle-group) > :is(label:not(:has(input:checked)), button:not([aria-checked=true]), a:not([aria-current=true])) { --dsc-button-background--active:var(--ds-color-surface-active); --dsc-button-background--hover:var(--ds-color-surface-hover); --dsc-button-background:transparent; --dsc-button-color--hover:var(--ds-color-text-default); --dsc-button-color:inherit; isolation: auto; } :is(.ds-togglegroup, .ds-toggle-group):not([data-variant=secondary]) > [data-variant=tertiary]:is(label:has(input:checked), button[aria-checked=true], a[aria-current=true]) { --dsc-button-background--active:var(--ds-color-base-active); --dsc-button-background--hover:var(--ds-color-base-hover); --dsc-button-background:var(--ds-color-base-default); --dsc-button-color--active:var(--dsc-button-color); --dsc-button-color--hover:var(--dsc-button-color); --dsc-button-color:var(--ds-color-base-contrast-default); } :is(.ds-togglegroup, .ds-toggle-group) :is(a:focus-visible, button:focus-visible, label:has(input:focus-visible)) { box-shadow: var(--_ds--focus,var(--dsc-focus-boxShadow-inset)); outline: var(--_ds--focus,var(--dsc-focus-outline)); outline-offset: calc(var(--_ds--focus, var(--ds-border-width-focus))*-1); } :is(:is(.ds-togglegroup, .ds-toggle-group) :is(a:focus-visible, button:focus-visible, label:has(input:focus-visible))) * { --_ds--focus:; } [data-variant=secondary]:is(.ds-togglegroup, .ds-toggle-group) { --dsc-togglegroup-background:var(--ds-color-surface-tinted); --dsc-togglegroup-border-color:var(--ds-color-border-subtle); } [data-variant=secondary]:is(.ds-togglegroup, .ds-toggle-group) > :is(label:has(input:checked), button[aria-checked=true], a[aria-current=true]) { --dsc-button-background--active:var(--dsc-button-background); --dsc-button-background--hover:var(--dsc-button-background); --dsc-button-background:var(--ds-color-surface-default); --dsc-button-border-color:var(--ds-color-border-default); --dsc-button-color--active:var(--dsc-button-color); --dsc-button-color--hover:var(--dsc-button-color); --dsc-button-color:var(--ds-color-text-default); } } @layer ds.components { [data-tooltip] { --ds-tooltip:""; --_ds-data-tooltip:var(--ds-tooltip); } .ds-tooltip { --_ds-floating:top; --_ds-floating-arrow-size:0; --_ds-floating-arrow-visibility:inherit; animation: ds-fade-in .15s ease-in-out forwards; inset: 0 auto auto 0; margin: 0; overflow: visible; position: absolute; } .ds-tooltip:before { background: inherit; border: inherit; border-left-color: transparent; border-top-color: transparent; box-sizing: border-box; content: ""; height: var(--_ds-floating-arrow-size); left: var(--_ds-floating-arrow-x,50%); position: absolute; rotate: 45deg; top: var(--_ds-floating-arrow-y,100%); translate: -50% -50%; visibility: var(--_ds-floating-arrow-visibility); width: var(--_ds-floating-arrow-size); } .ds-tooltip[data-overscroll=contain] { --_ds-floating-overscroll:contain; overscroll-behavior: contain; overflow: auto; } .ds-tooltip { &[data-floating|=top]:before { top: 100%; rotate: 45deg; } &[data-floating|=right]:before { left: 0; rotate: 135deg; } &[data-floating|=bottom]:before { top: 0; rotate: -135deg; } &[data-floating|=left]:before { left: 100%; rotate: -45deg; } --_ds-floating:var(--dsc-tooltip-placement); --_ds-floating-arrow-size:var(--dsc-tooltip-arrow-size); --dsc-tooltip-background:var(--ds-color-neutral-text-default); --dsc-tooltip-color:var(--ds-color-neutral-background-default); --dsc-tooltip-border-radius:var(--ds-border-radius-default); --dsc-tooltip-padding:var(--ds-size-1) var(--ds-size-2); --dsc-tooltip-arrow-size:var(--ds-size-2); --dsc-tooltip-transition-duration:0.2s; --dsc-tooltip-transition-delay:150ms; --dsc-tooltip-placement:top; background: var(--dsc-tooltip-background); border-radius: var(--dsc-tooltip-border-radius); border: 0; box-sizing: border-box; color: var(--dsc-tooltip-color); line-height: var(--ds-line-height-sm); padding: var(--dsc-tooltip-padding); view-transition-name: ds-tooltip; } .ds-tooltip:after { content: ""; box-sizing: border-box; height: var(--_dsc-tooltip-safearea-height,0); width: var(--_dsc-tooltip-safearea-width,0); translate: var(--_dsc-tooltip-safearea-translate); position: absolute; left: var(--_ds-floating-arrow-x,50%); top: var(--_ds-floating-arrow-y,100%); } .ds-tooltip[data-floating=bottom]:after, .ds-tooltip[data-floating=top]:after { top: 100%; left: 0; width: 100%; height: var(--dsc-tooltip-arrow-size); } .ds-tooltip[data-floating=left]:after, .ds-tooltip[data-floating=right]:after { top: 0; left: 100%; width: var(--dsc-tooltip-arrow-size); height: 100%; } .ds-tooltip[data-floating=bottom]:after { top: calc(var(--dsc-tooltip-arrow-size)*-1); } .ds-tooltip[data-floating=right]:after { left: calc(var(--dsc-tooltip-arrow-size)*-1); } .ds-tooltip:not([popover]) { display: none; } @media (forced-colors: active) { .ds-tooltip { background: CanvasText; } } } @layer ds.components { .ds-spinner { --dsc-spinner-background:var(--ds-color-surface-tinted); --dsc-spinner-stroke:var(--ds-color-border-default); --dsc-spinner-animation-duration:2s; animation: ds-spinner-rotate-animation linear infinite var(--dsc-spinner-animation-duration); box-sizing: border-box; height: var(--ds-size-11); width: auto; } .ds-spinner[data-size="2xs"] { height: .75rem; } .ds-spinner[data-size=xs] { height: 1.25rem; } .ds-spinner[data-size=sm] { height: 2rem; } .ds-spinner[data-size=md] { height: 2.75rem; } .ds-spinner[data-size=lg] { height: 3.75rem; } .ds-spinner[data-size=xl] { height: 5.5rem; } .ds-spinner__background { stroke: var(--dsc-spinner-background); } .ds-spinner__circle { animation: ds-spinner-stroke-animation ease-in-out infinite var(--dsc-spinner-animation-duration); stroke-dasharray: 1px, 200px; stroke: var(--dsc-spinner-stroke); transform-origin: center; } @media (prefers-reduced-motion: reduce) { .ds-spinner { animation-duration: 6s; } } @keyframes ds-spinner-rotate-animation { 0% { transform: rotate(0deg); } to { transform: rotate(1turn); } } @keyframes ds-spinner-stroke-animation { 0% { stroke-dasharray: 1px, 200px; stroke-dashoffset: 0; } 50% { stroke-dasharray: 100px, 200px; stroke-dashoffset: -15px; } to { stroke-dasharray: 1px, 200px; stroke-dashoffset: -120px; } } } @layer ds.components { .ds-table { --dsc-table-background--hover:var(--ds-color-surface-hover); --dsc-table-background--zebra:var(--ds-color-surface-tinted); --dsc-table-background:transparent; --dsc-table-border-color:var(--ds-color-border-subtle); --dsc-table-border-radius:var(--ds-border-radius-lg); --dsc-table-border-style:solid; --dsc-table-border-width:var(--ds-border-width-default); --dsc-table-color:var(--ds-color-text-default); --dsc-table-divider-border-color:var(--dsc-table-border-color); --dsc-table-divider-border-style:solid; --dsc-table-divider-border-width:calc(var(--ds-border-width-default) + 1px); --dsc-table-header-background--hover:var(--ds-color-surface-hover); --dsc-table-header-background--sorted:var(--ds-color-surface-tinted); --dsc-table-header-background--sticky:var(--ds-color-surface-default); --dsc-table-header-background:transparent; --dsc-table-padding:var(--ds-size-2) var(--ds-size-3); --dsc-table-sort-size:var(--ds-icon-size); --dsc-table-vertical-align:middle; --_dsc-table-border-radius--inner:calc(var(--dsc-table-border-radius) - var(--dsc-table-border-width)); border-collapse: initial; border-spacing: 0; box-sizing: border-box; -moz-column-break-inside: avoid; break-inside: avoid; color: var(--dsc-table-color); vertical-align: var(--dsc-table-vertical-align); width: 100%; } .ds-table > :is(thead, tbody, tfoot) { vertical-align: inherit; } .ds-table > :is(tbody, thead, tfoot) > tr > :is(th, td) { background: var(--dsc-table-background); border-bottom-width: var(--dsc-table-border-width); border-bottom-style: var(--dsc-table-border-style); border-color: var(--dsc-table-border-color); padding: var(--dsc-table-padding); text-align: inherit; } .ds-table th { font-weight: var(--ds-font-weight-semibold); } .ds-table > thead > tr > :is(th, td) { background: var(--dsc-table-header-background); } .ds-table > thead > tr:last-child > :is(th, td) { border-bottom: var(--dsc-table-divider-border-width) var(--dsc-table-divider-border-style) var(--dsc-table-divider-border-color); } .ds-table > tbody:has(+ tfoot) > tr:last-child > :is(th, td) { border-bottom: none; } .ds-table > tfoot > tr:first-child > :is(th, td) { background: var(--dsc-table-header-background); border-top: var(--dsc-table-divider-border-width) var(--dsc-table-divider-border-style) var(--dsc-table-divider-border-color); } .ds-table > tfoot > tr:last-child > :is(th, td) { border-bottom: none; } .ds-table > caption { -moz-column-break-after: avoid; break-after: avoid-page; font-size: 1.3em; font-size: round(down, 1.3em, 1px); font-weight: var(--ds-heading-md-font-weight); letter-spacing: var(--ds-heading-md-letter-spacing); line-height: var(--ds-heading-md-line-height); margin: 0; } [data-size="2xs"]:is(.ds-table > caption) { font-weight: var(--ds-heading-2xs-font-weight); line-height: var(--ds-heading-2xs-line-height); font-size: var(--ds-heading-2xs-font-size); letter-spacing: var(--ds-heading-2xs-letter-spacing); } [data-size=xs]:is(.ds-table > caption) { font-weight: var(--ds-heading-xs-font-weight); line-height: var(--ds-heading-xs-line-height); font-size: var(--ds-heading-xs-font-size); letter-spacing: var(--ds-heading-xs-letter-spacing); } [data-size=sm]:is(.ds-table > caption) { font-weight: var(--ds-heading-sm-font-weight); line-height: var(--ds-heading-sm-line-height); font-size: var(--ds-heading-sm-font-size); letter-spacing: var(--ds-heading-sm-letter-spacing); } [data-size=md]:is(.ds-table > caption) { font-size: var(--ds-heading-md-font-size); } [data-size=lg]:is(.ds-table > caption) { font-weight: var(--ds-heading-lg-font-weight); line-height: var(--ds-heading-lg-line-height); font-size: var(--ds-heading-lg-font-size); letter-spacing: var(--ds-heading-lg-letter-spacing); } [data-size=xl]:is(.ds-table > caption) { font-weight: var(--ds-heading-xl-font-weight); line-height: var(--ds-heading-xl-line-height); font-size: var(--ds-heading-xl-font-size); letter-spacing: var(--ds-heading-xl-letter-spacing); } [data-size="2xl"]:is(.ds-table > caption) { font-weight: var(--ds-heading-2xl-font-weight); line-height: var(--ds-heading-2xl-line-height); font-size: var(--ds-heading-2xl-font-size); letter-spacing: var(--ds-heading-2xl-letter-spacing); } .ds-table > caption { text-align: inherit; margin-bottom: var(--ds-size-1); } .ds-table > thead > tr > [aria-sort] { cursor: pointer; padding: 0; } :is(.ds-table > thead > tr > [aria-sort]) > button { background: none; border: 0; box-sizing: border-box; color: inherit; cursor: pointer; font: inherit; padding: var(--dsc-table-padding); text-align: inherit; width: 100%; } :is(:is(.ds-table > thead > tr > [aria-sort]) > button):focus-visible { box-shadow: var(--_ds--focus,var(--dsc-focus-boxShadow)); outline: var(--_ds--focus,var(--dsc-focus-outline)); outline-offset: var(--_ds--focus,var(--ds-border-width-focus)); } :is(:is(.ds-table > thead > tr > [aria-sort]) > button):focus-visible * { --_ds--focus:; } :is(:is(.ds-table > thead > tr > [aria-sort]) > button):not([hidden]) { display: block; } :is(:is(.ds-table > thead > tr > [aria-sort]) > button):focus-visible { position: relative; } :is(:is(.ds-table > thead > tr > [aria-sort]) > button):after { background: currentcolor; content: ""; display: inline-block; height: var(--dsc-table-sort-size); flex-shrink: 0; -webkit-mask: center/contain no-repeat url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12.53%204.47a.75.75%200%200%200-1.06%200l-3.5%203.5a.75.75%200%200%200%201.06%201.06L12%206.06l2.97%202.97a.75.75%200%201%200%201.06-1.06zm-3.5%2010.5a.75.75%200%200%200-1.06%201.06l3.5%203.5a.75.75%200%200%200%201.06%200l3.5-3.5a.75.75%200%201%200-1.06-1.06L12%2017.94z%22%2F%3E%3C%2Fsvg%3E); mask: center/contain no-repeat url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12.53%204.47a.75.75%200%200%200-1.06%200l-3.5%203.5a.75.75%200%200%200%201.06%201.06L12%206.06l2.97%202.97a.75.75%200%201%200%201.06-1.06zm-3.5%2010.5a.75.75%200%200%200-1.06%201.06l3.5%203.5a.75.75%200%200%200%201.06%200l3.5-3.5a.75.75%200%201%200-1.06-1.06L12%2017.94z%22%2F%3E%3C%2Fsvg%3E); vertical-align: middle; width: var(--dsc-table-sort-size); } [aria-sort=ascending]:is(.ds-table > thead > tr > [aria-sort]) > button:after { -webkit-mask: url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M11.47%207.97a.75.75%200%200%201%201.06%200l5.5%205.5a.75.75%200%201%201-1.06%201.06L12%209.56l-4.97%204.97a.75.75%200%200%201-1.06-1.06z%22%2F%3E%3C%2Fsvg%3E); mask: url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M11.47%207.97a.75.75%200%200%201%201.06%200l5.5%205.5a.75.75%200%201%201-1.06%201.06L12%209.56l-4.97%204.97a.75.75%200%200%201-1.06-1.06z%22%2F%3E%3C%2Fsvg%3E); } [aria-sort=descending]:is(.ds-table > thead > tr > [aria-sort]) > button:after { -webkit-mask: url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M5.97%209.47a.75.75%200%200%201%201.06%200L12%2014.44l4.97-4.97a.75.75%200%201%201%201.06%201.06l-5.5%205.5a.75.75%200%200%201-1.06%200l-5.5-5.5a.75.75%200%200%201%200-1.06%22%2F%3E%3C%2Fsvg%3E); mask: url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M5.97%209.47a.75.75%200%200%201%201.06%200L12%2014.44l4.97-4.97a.75.75%200%201%201%201.06%201.06l-5.5%205.5a.75.75%200%200%201-1.06%200l-5.5-5.5a.75.75%200%200%201%200-1.06%22%2F%3E%3C%2Fsvg%3E); } :is(.ds-table > thead > tr > [aria-sort]):not([aria-sort=none]) > button { background: var(--dsc-table-header-background--sorted); } .ds-table[data-border] { border-radius: var(--dsc-table-border-radius); border-width: var(--dsc-table-border-width); border-style: var(--dsc-table-border-style); border-color: var(--dsc-table-border-color); } .ds-table[data-border] > :last-child > tr:last-child > :is(th, td) { border-bottom: none; } :is(.ds-table[data-border] > :is(thead:first-of-type, :not(:has(thead)) tbody:first-of-type) > tr:first-child > :is(th, td)):first-child { border-top-left-radius: var(--_dsc-table-border-radius--inner); } :is(.ds-table[data-border] > :is(thead:first-of-type, :not(:has(thead)) tbody:first-of-type) > tr:first-child > :is(th, td)):last-child { border-top-right-radius: var(--_dsc-table-border-radius--inner); } :is(.ds-table[data-border] > :is(tfoot:last-of-type, :not(:has(tfoot)) tbody:last-of-type) > tr:last-child > :is(th, td)):first-child { border-bottom-left-radius: var(--_dsc-table-border-radius--inner); } :is(.ds-table[data-border] > :is(tfoot:last-of-type, :not(:has(tfoot)) tbody:last-of-type) > tr:last-child > :is(th, td)):last-child { border-bottom-right-radius: var(--_dsc-table-border-radius--inner); } .ds-table[data-sticky-header] { position: relative; overflow: auto; } .ds-table[data-sticky-header] > thead > tr > :is(th, td) { background: var(--dsc-table-header-background--sticky); position: sticky; top: 0; z-index: 2; } .ds-table[data-zebra] > tbody > tr > :is(th, td) { border-block: 0; } .ds-table[data-zebra] > :is(thead, tbody) > tr:nth-child(2n) > :is(th, td) { background: var(--dsc-table-background--zebra); } @media (hover: hover) and (pointer: fine) { .ds-table[data-hover] > tbody > tr:hover > :is(th, td) { background: var(--dsc-table-background--hover); } .ds-table > thead > tr > [aria-sort]:hover button { background: var(--dsc-table-header-background--hover); } } } @layer ds.components { .ds-breadcrumbs { --dsc-breadcrumbs-spacing:var(--ds-size-2); --dsc-breadcrumbs-icon-size:var(--ds-icon-size); --dsc-breadcrumbs-icon-url:url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M9.47%205.97a.75.75%200%200%201%201.06%200l5.5%205.5a.75.75%200%200%201%200%201.06l-5.5%205.5a.75.75%200%201%201-1.06-1.06L14.44%2012%209.47%207.03a.75.75%200%200%201%200-1.06%22%2F%3E%3C%2Fsvg%3E); --dsc-breadcrumbs-color:var(--ds-color-text-subtle); --_ds-aria-label:var(--dsc-breadcrumbs-label); } .ds-breadcrumbs:not([hidden]) { display: block; } .ds-breadcrumbs:is(:lang(no), :lang(nb), :lang(nn)) { --dsc-breadcrumbs-label:"Du er her:"; } .ds-breadcrumbs > :is(ol, ul) { flex-wrap: wrap; list-style-type: none; margin: 0; padding: 0; gap: var(--dsc-breadcrumbs-spacing) 0; } :is(.ds-breadcrumbs > :is(ol, ul)):not([hidden]) { display: flex; } .ds-breadcrumbs li:where(:not(:last-child)):after, .ds-breadcrumbs > :not(ol, ul):before { background: var(--dsc-breadcrumbs-color); content: ""; display: inline-block; flex-shrink: 0; height: var(--dsc-breadcrumbs-icon-size); margin-inline: var(--dsc-breadcrumbs-spacing); -webkit-mask: center/contain no-repeat var(--dsc-breadcrumbs-icon-url); mask: center/contain no-repeat var(--dsc-breadcrumbs-icon-url); vertical-align: middle; width: var(--dsc-breadcrumbs-icon-size); -webkit-print-color-adjust: exact; print-color-adjust: exact; } @media (forced-colors: active) { .ds-breadcrumbs li:where(:not(:last-child)):after, .ds-breadcrumbs > :not(ol, ul):before { background: CanvasText; } } .ds-breadcrumbs li:last-child a { text-decoration: none; } :dir(rtl) .ds-breadcrumbs li:where(:not(:last-child)):after { rotate: 180deg; } .ds-breadcrumbs > :not(ol, ul):before { background: currentColor; margin: 0; rotate: 180deg; } :dir(rtl) .ds-breadcrumbs > :not(ol, ul):before { rotate: 0deg; } @media (width < 650px) { .ds-breadcrumbs > :is(ol, ul):not(:only-child) { display: none; } } @media (min-width: 650px) { .ds-breadcrumbs > :is(:not(ol, ul)):not(:only-child) { display: none; } } } @layer ds.components { .ds-badge { --dsc-badge-background:var(--ds-color-base-default); --dsc-badge-color:var(--ds-color-base-contrast-default); --dsc-badge-padding:0 calc(var(--ds-size-1) + var(--ds-size-1)/2); --dsc-badge-size:calc(var(--ds-size-3) + var(--ds-size-1)/2); --dsc-badge-size--count:var(--ds-size-6); --dsc-badge-top:inherit; --dsc-badge-bottom:inherit; --dsc-badge-left:inherit; --dsc-badge-right:inherit; vertical-align: calc(var(--dsc-badge-size)/2); -webkit-print-color-adjust: exact; print-color-adjust: exact; } .ds-badge:not([hidden]) { display: inline-flex; } .ds-badge:before { content: attr(data-count); background: var(--dsc-badge-background); border-radius: var(--ds-border-radius-full); color: var(--dsc-badge-color); display: inline-grid; font-size: var(--ds-font-size-minus-1); min-height: var(--dsc-badge-size); min-width: var(--dsc-badge-size); padding: var(--dsc-badge-padding); place-items: center; box-sizing: border-box; line-height: var(--ds-line-height-sm); width: -moz-fit-content; width: fit-content; } @supports (content:attr(data-count, "")) { .ds-badge:before { content: attr(data-count, ""); } } .ds-badge[data-count]:not([data-count=""]):before { min-height: var(--dsc-badge-size--count); min-width: var(--dsc-badge-size--count); vertical-align: calc(var(--dsc-badge-size--count)/2); } .ds-badge[data-variant=base] { --dsc-badge-background:var(--ds-color-base-default); --dsc-badge-color:var(--ds-color-base-contrast-default); } .ds-badge[data-variant=tinted] { --dsc-badge-background:var(--ds-color-surface-tinted); --dsc-badge-color:var(--ds-color-text-default); } .ds-badge--position { box-sizing: border-box; position: relative; height: -moz-fit-content; height: fit-content; width: -moz-fit-content; width: fit-content; } .ds-badge--position:not([hidden]) { display: inline-flex; } .ds-badge--position .ds-badge:before { position: absolute; top: var(--dsc-badge-top); bottom: var(--dsc-badge-bottom); left: var(--dsc-badge-left); right: var(--dsc-badge-right); z-index: 1; } .ds-badge--position :is(img, svg) { display: inline-block; flex-shrink: 0; font-size: 1em; height: var(--ds-icon-size); vertical-align: middle; width: var(--ds-icon-size); } .ds-badge--position[data-placement=top-right] .ds-badge:before { top: var(--dsc-badge-top,0); right: var(--dsc-badge-right,0); translate: 50% -50%; } .ds-badge--position[data-placement=top-left] .ds-badge:before { top: var(--dsc-badge-top,0); left: var(--dsc-badge-left,0); translate: -50% -50%; } .ds-badge--position[data-placement=bottom-right] .ds-badge:before { bottom: var(--dsc-badge-bottom,0); right: var(--dsc-badge-right,0); translate: 50% 50%; } .ds-badge--position[data-placement=bottom-left] .ds-badge:before { bottom: var(--dsc-badge-bottom,0); left: var(--dsc-badge-left,0); translate: -50% 50%; } .ds-badge--position[data-placement=top-right][data-overlap=circle] .ds-badge:before { top: var(--dsc-badge-top,14%); right: var(--dsc-badge-right,14%); translate: 50% -50%; } .ds-badge--position[data-placement=top-left][data-overlap=circle] .ds-badge:before { top: var(--dsc-badge-top,14%); left: var(--dsc-badge-left,14%); translate: -50% -50%; } .ds-badge--position[data-placement=bottom-right][data-overlap=circle] .ds-badge:before { bottom: var(--dsc-badge-bottom,14%); right: var(--dsc-badge-right,14%); translate: 50% 50%; } .ds-badge--position[data-placement=bottom-left][data-overlap=circle] .ds-badge:before { bottom: var(--dsc-badge-bottom,14%); left: var(--dsc-badge-left,14%); translate: -50% 50%; } .ds-avatar { --dsc-avatar-icon-url:url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20fill%3D%22none%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20fill-rule%3D%22evenodd%22%20d%3D%22M8.25%207.5a3.75%203.75%200%201%201%207.5%200%203.75%203.75%200%200%201-7.5%200M12%202.25a5.25%205.25%200%201%200%200%2010.5%205.25%205.25%200%200%200%200-10.5M8.288%2017.288A5.25%205.25%200%200%201%2017.25%2021a.75.75%200%200%200%201.5%200%206.75%206.75%200%200%200-13.5%200%20.75.75%200%200%200%201.5%200%205.25%205.25%200%200%201%201.538-3.712%22%20clip-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E); --dsc-avatar-background:var(--ds-color-base-default); --dsc-avatar-color:var(--ds-color-base-contrast-default); --dsc-avatar-size:2.625em; --dsc-avatar-radius:var(--ds-border-radius-full); --dsc-avatar-padding:0.45em; --dsc-avatar-font-size:1.3em; } } @layer ds.components { @supports (width:round(down, 0.1em, 1px)) { .ds-avatar { --dsc-avatar-size:round(up, 2.625em, 1px); --dsc-avatar-padding:round(down, 0.45em, 1px); --dsc-avatar-font-size:round(down, 1.3em, 1px); } } .ds-avatar { align-items: center; background: var(--dsc-avatar-background); border-radius: var(--dsc-avatar-radius); border: 0; box-sizing: border-box; color: var(--dsc-avatar-color); flex-shrink: 0; font: inherit; font-weight: var(--ds-font-weight-medium); height: var(--dsc-avatar-size); justify-content: center; overflow: hidden; padding: 0; text-align: center; text-decoration: none; text-transform: uppercase; -webkit-user-select: none; -moz-user-select: none; user-select: none; vertical-align: middle; width: var(--dsc-avatar-size); -webkit-print-color-adjust: exact; print-color-adjust: exact; } .ds-avatar:focus-visible { box-shadow: var(--_ds--focus,var(--dsc-focus-boxShadow)); outline: var(--_ds--focus,var(--dsc-focus-outline)); outline-offset: var(--_ds--focus,var(--ds-border-width-focus)); } .ds-avatar:focus-visible * { --_ds--focus:; } .ds-avatar:not([hidden]) { display: inline-flex; } .ds-avatar:not(:has(img)) { padding: var(--dsc-avatar-padding); } .ds-avatar:is(button:enabled) { cursor: pointer; } .ds-avatar :is(img, svg) { display: inline-block; flex-shrink: 0; font-size: 1em; height: var(--ds-icon-size); vertical-align: middle; width: var(--ds-icon-size); object-fit: cover; width: 100%; height: 100%; } .ds-avatar > span { font-size: var(--dsc-avatar-font-size); } .ds-avatar[data-initials]:empty:before { content: attr(data-initials); font-size: var(--dsc-avatar-font-size); } .ds-avatar:not([data-initials]):empty:before { content: ""; width: 100%; height: 100%; background: currentcolor; -webkit-mask: var(--dsc-avatar-icon-url) center /contain no-repeat; mask: var(--dsc-avatar-icon-url) center /contain no-repeat; } @media (forced-colors: active) { .ds-avatar:not([data-initials]):empty:before { background: CanvasText; } } .ds-avatar[data-variant=square] { --dsc-avatar-radius:var(--ds-border-radius-md); } @media (forced-colors: active) { .ds-avatar { border-width: var(--ds-size-1); border-style: solid; border-color: CanvasText; } } .ds-avatar[data-size=xs] { font-size: var(--ds-body-xs-font-size); } .ds-avatar[data-size=sm] { font-size: var(--ds-body-sm-font-size); } .ds-avatar[data-size=md] { font-size: var(--ds-body-md-font-size); } .ds-avatar[data-size=lg] { font-size: var(--ds-body-lg-font-size); } .ds-avatar-stack { --dsc-avatar-stack-gap:2px; --dsc-avatar-stack-overlap:var(--ds-size-3); --dsc-avatar-stack-radius:var(--ds-border-radius-full); --dsc-avatar-stack-size:var(--ds-size-12); --dsc-avatar-stack-suffix-gap:var(--ds-size-3); --_dsc-avatar-stack-overlap:min(var(--dsc-avatar-stack-overlap), var(--dsc-avatar-stack-size) + var(--dsc-avatar-stack-gap)); --_dsc-avatar-stack-negative:calc(var(--_dsc-avatar-stack-overlap)*-1); align-items: center; gap: var(--dsc-avatar-stack-gap); list-style: none; margin: 0; padding: 0; transition: --_dsc-avatar-stack-overlap .2s ease; width: -moz-max-content; width: max-content; } } @layer ds.components { @property --_dsc-avatar-stack-overlap { syntax:"";inherits:true;initial-value:0 } .ds-avatar-stack:focus-visible { box-shadow: var(--_ds--focus,var(--dsc-focus-boxShadow)); outline: var(--_ds--focus,var(--dsc-focus-outline)); outline-offset: var(--_ds--focus,var(--ds-border-width-focus)); } .ds-avatar-stack:focus-visible * { --_ds--focus:; } .ds-avatar-stack:not([hidden]) { display: flex; } .ds-avatar-stack:not([data-expandable=fixed]) > li + li { margin-left: var(--_dsc-avatar-stack-negative); } .ds-avatar-stack > li + li:not(:has(.ds-avatar)) { margin-left: var(--dsc-avatar-stack-suffix-gap); } .ds-avatar-stack > li > :where(.ds-avatar) { --dsc-avatar-radius:var(--dsc-avatar-stack-radius); --dsc-avatar-size:var(--dsc-avatar-stack-size); } .ds-avatar-stack > li > .ds-avatar:focus-visible { box-shadow: var(--_ds--focus,var(--dsc-focus-boxShadow)); outline: var(--_ds--focus,var(--dsc-focus-outline)); outline-offset: var(--_ds--focus,var(--ds-border-width-focus)); } :is(.ds-avatar-stack > li > .ds-avatar:focus-visible) * { --_ds--focus:; } .ds-avatar-stack > li > .ds-avatar:focus-visible { -webkit-mask: none; mask: none; z-index: 1; } .ds-avatar-stack > li:has(+ li > .ds-avatar) > .ds-avatar { --_x:calc(var(--dsc-avatar-size) - var(--_dsc-avatar-stack-overlap)); --_r:calc(min(var(--dsc-avatar-size) / 2, var(--dsc-avatar-radius)) + var(--dsc-avatar-stack-gap)); --_s:calc(var(--_r) - 0.5px); -webkit-mask: linear-gradient( to right, #000 calc(var(--_x) + .5px), transparent calc(var(--_x) + .5px)) 0 0 /100% 100% no-repeat, radial-gradient( circle at 100% 100%, transparent var(--_s), #000 var(--_r)) var(--_x) calc(0% - var(--dsc-avatar-stack-gap)) /var(--_r) var(--_r) no-repeat, radial-gradient( circle at 100% 0, transparent var(--_s), #000 var(--_r)) var(--_x) calc(100% + var(--dsc-avatar-stack-gap)) /var(--_r) var(--_r) no-repeat; mask: linear-gradient( to right, #000 calc(var(--_x) + .5px), transparent calc(var(--_x) + .5px)) 0 0 /100% 100% no-repeat, radial-gradient( circle at 100% 100%, transparent var(--_s), #000 var(--_r)) var(--_x) calc(0% - var(--dsc-avatar-stack-gap)) /var(--_r) var(--_r) no-repeat, radial-gradient( circle at 100% 0, transparent var(--_s), #000 var(--_r)) var(--_x) calc(100% + var(--dsc-avatar-stack-gap)) /var(--_r) var(--_r) no-repeat; } .ds-avatar-stack[data-expandable]:focus-visible, .ds-avatar-stack[data-expandable]:hover { --_dsc-avatar-stack-overlap:0px; } .ds-avatar-stack[data-expandable=fixed] > li:not(:has(> .ds-avatar)) { transform: translateX(var(--_dsc-avatar-stack-overlap)); } @supports (width:calc(sibling-index() * 1px)) { .ds-avatar-stack[data-expandable=fixed] > li { translate: calc(var(--_dsc-avatar-stack-negative)*(sibling-index() - 1)); } } :is(.ds-avatar-stack[data-expandable=fixed] > li):nth-child(2) { translate: var(--_dsc-avatar-stack-negative); } :is(.ds-avatar-stack[data-expandable=fixed] > li):nth-child(3) { translate: calc(var(--_dsc-avatar-stack-negative)*2); } :is(.ds-avatar-stack[data-expandable=fixed] > li):nth-child(4) { translate: calc(var(--_dsc-avatar-stack-negative)*3); } :is(.ds-avatar-stack[data-expandable=fixed] > li):nth-child(5) { translate: calc(var(--_dsc-avatar-stack-negative)*4); } :is(.ds-avatar-stack[data-expandable=fixed] > li):nth-child(6) { translate: calc(var(--_dsc-avatar-stack-negative)*5); } :is(.ds-avatar-stack[data-expandable=fixed] > li):nth-child(7) { translate: calc(var(--_dsc-avatar-stack-negative)*6); } :is(.ds-avatar-stack[data-expandable=fixed] > li):nth-child(8) { translate: calc(var(--_dsc-avatar-stack-negative)*7); } :is(.ds-avatar-stack[data-expandable=fixed] > li):nth-child(9) { translate: calc(var(--_dsc-avatar-stack-negative)*8); } :is(.ds-avatar-stack[data-expandable=fixed] > li):nth-child(10) { translate: calc(var(--_dsc-avatar-stack-negative)*9); } :is(.ds-avatar-stack[data-expandable=fixed] > li):nth-child(11) { translate: calc(var(--_dsc-avatar-stack-negative)*10); } :is(.ds-avatar-stack[data-expandable=fixed] > li):nth-child(12) { translate: calc(var(--_dsc-avatar-stack-negative)*11); } } @layer ds.components { .ds-search { --dsc-search-padding-inline:var(--dsc-suggestion-clear-gap); --dsc-search-clear-padding:var(--dsc-suggestion-clear-padding); --dsc-search-clear-size:var(--dsc-suggestion-clear-size); --dsc-search-clear-icon-url:var(--dsc-suggestion-clear-icon-url); --dsc-search-magnifying-icon-url:var(--dsc-suggestion-search-icon-url); --dsc-search-magnifying-icon-size:var(--dsc-suggestion-search-icon-size); } .ds-search, .ds-suggestion { --dsc-suggestion-option-background--hover:var(--ds-color-surface-hover); --dsc-suggestion-option-background--selected:var(--ds-color-surface-active); --dsc-suggestion-option-border-radius:var(--ds-border-radius-md); --dsc-suggestion-option-checkmark-size:var(--ds-size-6); --dsc-suggestion-option-checkmark-url:url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20fill%3D%22none%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20fill-rule%3D%22evenodd%22%20d%3D%22M18.998%206.94a.75.75%200%200%201%20.063%201.058l-8%209a.75.75%200%200%201-1.091.032l-5-5a.75.75%200%201%201%201.06-1.06l4.438%204.437%207.471-8.405A.75.75%200%200%201%2019%206.939%22%20clip-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E); --dsc-suggestion-option-padding:var(--ds-size-3); --dsc-suggestion-option-gap:var(--ds-size-2); --dsc-suggestion-option-checkmark-border:max(2px, 0.125rem); --dsc-suggestion-option-checkmark-border-color:var(--ds-color-neutral-border-default); --dsc-suggestion-search-icon-url:url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M10.5%203.25a7.25%207.25%200%201%200%204.57%2012.88l5.41%205.41a.75.75%200%201%200%201.06-1.06l-5.41-5.41A7.25%207.25%200%200%200%2010.5%203.25M4.75%2010.5a5.75%205.75%200%201%201%2011.5%200%205.75%205.75%200%200%201-11.5%200%22%2F%3E%3C%2Fsvg%3E); --dsc-suggestion-search-icon-size:var(--ds-icon-size); --dsc-suggestion-clear-gap:var(--ds-size-2); --dsc-suggestion-clear-padding:var(--ds-size-1); --dsc-suggestion-clear-size:var(--ds-size-9); --dsc-suggestion-clear-icon-url:url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M6.53%205.47a.75.75%200%200%200-1.06%201.06L10.94%2012l-5.47%205.47a.75.75%200%201%200%201.06%201.06L12%2013.06l5.47%205.47a.75.75%200%201%200%201.06-1.06L13.06%2012l5.47-5.47a.75.75%200%200%200-1.06-1.06L12%2010.94z%22%2F%3E%3C%2Fsvg%3E); --dsc-suggestion-clear-border-radius:var(--ds-border-radius-md); --dsc-suggestion-clear-background--hover:var(--ds-color-surface-hover); --dsc-suggestion-clear-background--active:var(--ds-color-surface-active); --dsc-suggestion-toggle-icon-url:url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M5.97%209.47a.75.75%200%200%201%201.06%200L12%2014.44l4.97-4.97a.75.75%200%201%201%201.06%201.06l-5.5%205.5a.75.75%200%200%201-1.06%200l-5.5-5.5a.75.75%200%200%201%200-1.06%22%2F%3E%3C%2Fsvg%3E); --dsc-suggestion-create-icon-url:url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12.75%205.5a.75.75%200%200%200-1.5%200v5.75H5.5a.75.75%200%200%200%200%201.5h5.75v5.75a.75.75%200%200%200%201.5%200v-5.75h5.75a.75.75%200%200%200%200-1.5h-5.75z%22%2F%3E%3C%2Fsvg%3E); --dsc-suggestion-list-background:var(--ds-color-neutral-surface-default); --dsc-suggestion-list-border-radius:var(--ds-border-radius-md); --dsc-suggestion-list-box-shadow:var(--ds-shadow-md); --dsc-suggestion-list-color:var(--ds-color-text-default); --dsc-suggestion-list-offset:var(--ds-size-1); --dsc-suggestion-list-gap:var(--ds-size-1); --dsc-suggestion-list-placement:bottom; --dsc-suggestion-list-padding:var(--ds-size-3) var(--ds-size-2); --dsc-suggestion-border-width:var(--ds-border-width-default); --dsc-suggestion-border-style:solid; --dsc-suggestion-border-color:var(--ds-color-neutral-border-subtle); --dsc-suggestion-chip-gap:var(--ds-size-1); --dsc-suggestion-chip-background:var(--ds-color-base-default); --dsc-suggestion-chip-background--hover:var(--ds-color-base-hover); --dsc-suggestion-chip-border-width:var(--ds-border-width-default); --dsc-suggestion-chip-height:var(--ds-size-8); --dsc-suggestion-chip-font-size:var(--ds-body-sm-font-size); --dsc-suggestion-chip-border-style:solid; --dsc-suggestion-chip-border-color:transparent; --dsc-suggestion-chip-border-radius:var(--ds-border-radius-full); --dsc-suggestion-chip-padding:0 var(--ds-size-3); --dsc-suggestion-chip-color:var(--ds-color-base-contrast-default); --dsc-suggestion-chip-icon-url:url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20fill%3D%22none%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M6.53%205.47a.75.75%200%200%200-1.06%201.06L10.94%2012l-5.47%205.47a.75.75%200%201%200%201.06%201.06L12%2013.06l5.47%205.47a.75.75%200%201%200%201.06-1.06L13.06%2012l5.47-5.47a.75.75%200%200%200-1.06-1.06L12%2010.94z%22%2F%3E%3C%2Fsvg%3E); --dsc-suggestion-chip-icon-size:var(--ds-icon-size); --dsc-suggestion-chip-input-size:var(--ds-size-5); --dsc-suggestion-chip-spacing:calc((var(--dsc-suggestion-chip-height) - var(--dsc-suggestion-chip-input-size))/2); &:is([lang|=nb i], [lang|=nn i], [lang|=no i]), :is([lang|=nb i], [lang|=nn i], [lang|=no i]) & { --dsc-suggestion-create-text:'Legg til "{value}"'; --dsc-suggestion-empty-text:"Tomt"; } align-items: center; box-sizing: border-box; grid-template: "items items" auto "input submit" auto/1fr auto; } :is(.ds-search, .ds-suggestion):not([hidden]) { display: grid; } :is(.ds-search, .ds-suggestion) > data { background: var(--dsc-suggestion-chip-background); border-color: var(--dsc-suggestion-chip-border-color); border-radius: var(--dsc-suggestion-chip-border-radius); border-style: var(--dsc-suggestion-chip-border-style); border-width: var(--dsc-suggestion-chip-border-width); box-sizing: border-box; color: var(--dsc-suggestion-chip-color); cursor: pointer; display: block; font-size: var(--dsc-suggestion-chip-font-size); height: var(--dsc-suggestion-chip-height); line-height: var(--ds-line-height-sm); min-width: 0; order: -1; overflow: hidden; padding: var(--dsc-suggestion-chip-padding); padding-block: calc(var(--dsc-suggestion-chip-height)/2 - var(--dsc-suggestion-chip-border-width)/2 - .5lh); padding-inline-end: calc(var(--dsc-suggestion-chip-spacing)*2 + var(--dsc-suggestion-chip-icon-size)); position: relative; text-overflow: ellipsis; white-space: nowrap; } :is(:is(.ds-search, .ds-suggestion) > data):after { content: ""; background: currentcolor; height: var(--dsc-suggestion-chip-icon-size); inset-block-start: 50%; inset-inline-end: var(--dsc-suggestion-chip-spacing); margin-left: var(--dsc-suggestion-chip-gap); -webkit-mask: center/contain no-repeat var(--dsc-suggestion-chip-icon-url); mask: center/contain no-repeat var(--dsc-suggestion-chip-icon-url); padding-inline: 0; position: absolute; translate: 0 -50%; width: var(--dsc-suggestion-chip-icon-size); } @media (forced-colors: active) { :is(:is(.ds-search, .ds-suggestion) > data):after { background-color: CanvasText; forced-color-adjust: none; } } :is(.ds-search, .ds-suggestion) > data { -webkit-print-color-adjust: exact; print-color-adjust: exact; } :is(:is(.ds-search, .ds-suggestion) > data):focus { box-shadow: var(--_ds--focus,var(--dsc-focus-boxShadow)); outline: var(--_ds--focus,var(--dsc-focus-outline)); outline-offset: var(--_ds--focus,var(--ds-border-width-focus)); } :is(:is(.ds-search, .ds-suggestion) > data):focus * { --_ds--focus:; } :is(:is(.ds-search, .ds-suggestion) > data):focus { z-index: 2; } :is(:is(.ds-search, .ds-suggestion) > data):hover { background: var(--dsc-suggestion-chip-background--hover); } :is(.ds-search, .ds-suggestion) > u-datalist { --_ds-floating:top; --_ds-floating-arrow-size:0; --_ds-floating-arrow-visibility:inherit; animation: ds-fade-in .15s ease-in-out forwards; margin: 0; overflow: visible; position: absolute; } :is(:is(.ds-search, .ds-suggestion) > u-datalist):before { background: inherit; border: inherit; border-left-color: transparent; border-top-color: transparent; box-sizing: border-box; content: ""; height: var(--_ds-floating-arrow-size); left: var(--_ds-floating-arrow-x,50%); position: absolute; rotate: 45deg; top: var(--_ds-floating-arrow-y,100%); translate: -50% -50%; visibility: var(--_ds-floating-arrow-visibility); width: var(--_ds-floating-arrow-size); } [data-overscroll=contain]:is(:is(.ds-search, .ds-suggestion) > u-datalist) { --_ds-floating-overscroll:contain; overscroll-behavior: contain; overflow: auto; } :is(.ds-search, .ds-suggestion) > u-datalist { &[data-floating|=top]:before { top: 100%; rotate: 45deg; } &[data-floating|=right]:before { left: 0; rotate: 135deg; } &[data-floating|=bottom]:before { top: 0; rotate: -135deg; } &[data-floating|=left]:before { left: 100%; rotate: -45deg; } --_ds-floating:var(--dsc-suggestion-list-placement); --_ds-floating-overscroll:fit; --_ds-floating-arrow-visibility:hidden; --_ds-floating-arrow-size:var(--ds-size-2); background: var(--dsc-suggestion-list-background); border-color: var(--dsc-suggestion-border-color); border-radius: var(--dsc-suggestion-list-border-radius); border-style: var(--dsc-suggestion-border-style); border-width: var(--dsc-suggestion-border-width); box-shadow: var(--dsc-suggestion-list-box-shadow); box-sizing: border-box; color: var(--dsc-suggestion-list-color); display: none; grid-area: input; inset: 0 auto auto 0; overflow: auto; overscroll-behavior: contain; padding: var(--dsc-suggestion-list-padding); } :is(:is(.ds-search, .ds-suggestion) > u-datalist):not([popover]) { margin-top: var(--dsc-suggestion-list-offset); z-index: 1600; inset: 100% 0 auto 0; } :is(:is(.ds-search, .ds-suggestion) > u-datalist):not([hidden]):not(:empty) { display: grid; align-content: start; gap: var(--dsc-suggestion-list-gap); } [data-is-floating]:is(:is(.ds-search, .ds-suggestion) > u-datalist):not([style*=translate]) { opacity: 0; } :is(.ds-search, .ds-suggestion) > u-datalist > u-option { padding: var(--dsc-suggestion-option-padding); border: none; outline: none; border-radius: var(--dsc-suggestion-option-border-radius); cursor: pointer; position: relative; outline-offset: calc(var(--dsc-suggestion-option-activedecendant-outline-width)*-1); line-height: var(--ds-line-height-sm); } @media (hover: hover) and (pointer: fine) { :is(:is(.ds-search, .ds-suggestion) > u-datalist > u-option):hover { background: var(--dsc-suggestion-option-background--hover); } } [selected]:is(:is(.ds-search, .ds-suggestion) > u-datalist > u-option) { padding-inline-start: calc(var(--dsc-suggestion-option-padding) + var(--dsc-suggestion-option-checkmark-size) + var(--dsc-suggestion-option-gap)); background-color: var(--dsc-suggestion-option-background--selected); } [selected]:is(:is(.ds-search, .ds-suggestion) > u-datalist > u-option):before { content: ""; position: absolute; inset-inline-start: var(--dsc-suggestion-option-padding); -webkit-mask: var(--dsc-suggestion-option-checkmark-url) center /contain no-repeat; mask: var(--dsc-suggestion-option-checkmark-url) center /contain no-repeat; background: currentcolor; width: var(--dsc-suggestion-option-checkmark-size); height: var(--dsc-suggestion-option-checkmark-size); } @media (forced-colors: active) { [selected]:is(:is(.ds-search, .ds-suggestion) > u-datalist > u-option):before { background-color: LinkText; forced-color-adjust: none; } } [data-activedescendant]:is(:is(.ds-search, .ds-suggestion) > u-datalist > u-option) { box-shadow: var(--_ds--focus,var(--dsc-focus-boxShadow-middle)); outline: var(--_ds--focus,var(--dsc-focus-outline)); outline-offset: calc(var(--_ds--focus, 0)); } [data-activedescendant]:is(:is(.ds-search, .ds-suggestion) > u-datalist > u-option) * { --_ds--focus:; } [data-empty]:is(:is(.ds-search, .ds-suggestion) > u-datalist > u-option):not([value]) { display: none; } [data-multiple]:is(.ds-search, .ds-suggestion):has(data) { row-gap: var(--ds-size-1); } [data-multiple]:is(.ds-search, .ds-suggestion)::part(items) { display: flex; flex-wrap: wrap; gap: var(--dsc-suggestion-chip-gap); max-width: 100%; } [data-multiple]:is(.ds-search, .ds-suggestion) > u-datalist > u-option { padding-inline-start: calc(var(--dsc-suggestion-option-padding) + var(--dsc-suggestion-option-checkmark-size) + var(--dsc-suggestion-option-gap)); } :is([data-multiple]:is(.ds-search, .ds-suggestion) > u-datalist > u-option):before { content: ""; position: absolute; inset-inline-start: var(--dsc-suggestion-option-padding); -webkit-mask: none; mask: none; width: var(--dsc-suggestion-option-checkmark-size); height: var(--dsc-suggestion-option-checkmark-size); border-radius: var(--ds-border-radius-sm); outline: var(--dsc-suggestion-option-checkmark-border) solid var(--dsc-suggestion-option-checkmark-border-color); outline-offset: calc(var(--dsc-suggestion-option-checkmark-border)*-1); padding: .188rem; box-sizing: border-box; translate: 0 calc(.5lh - 50%); } [selected]:is([data-multiple]:is(.ds-search, .ds-suggestion) > u-datalist > u-option):before { background-color: var(--ds-color-base-default); color: var(--ds-color-base-contrast-default); outline: none; --_stroke-width:0.05em; --_stroke-width-fallback:0.05em; --_diagonal-1:transparent calc(48% - var(--_stroke-width, var(--_stroke-width-fallback))); --_diagonal-2:currentcolor calc(50% - var(--_stroke-width, var(--_stroke-width-fallback))); --_diagonal-3:currentcolor calc(50% + var(--_stroke-width, var(--_stroke-width-fallback))); --_diagonal-4:transparent calc(52% + var(--_stroke-width, var(--_stroke-width-fallback))); background-origin: content-box; background-repeat: no-repeat; background-position: 10% 73%, 90% 50%; background-size: 35% 35%, 65% 65%; background-image: linear-gradient( 45deg, var(--_diagonal-1), var(--_diagonal-2), var(--_diagonal-3), var(--_diagonal-4)), linear-gradient( -45deg, var(--_diagonal-1), var(--_diagonal-2), var(--_diagonal-3), var(--_diagonal-4)); } @media (forced-colors: active) { [selected]:is([data-multiple]:is(.ds-search, .ds-suggestion) > u-datalist > u-option):before { background-color: LinkText; border-color: LinkText; forced-color-adjust: none; } } :is(.ds-search, .ds-suggestion):not([data-creatable]) > u-datalist:has(u-option[aria-hidden=false]:not([data-empty])) > u-option[data-empty] { display: none; } :is(.ds-search, .ds-suggestion):not([data-creatable]) > u-datalist > u-option[data-empty] { padding-inline-start: var(--dsc-suggestion-option-padding); background: none; cursor: default; } [data-empty]:is(:is(.ds-search, .ds-suggestion):not([data-creatable]) > u-datalist > u-option[data-empty]):empty:after { content: var(--dsc-suggestion-empty-text); } :is(:is(.ds-search, .ds-suggestion):not([data-creatable]) > u-datalist > u-option[data-empty]):before { display: none; } [data-creatable]:is(.ds-search, .ds-suggestion) > u-datalist > u-option[data-empty] { --_ds-data-empty:var(--dsc-suggestion-create-text); } :is([data-creatable]:is(.ds-search, .ds-suggestion) > u-datalist > u-option[data-empty]):empty:after { content: attr(data-create); } :is([data-creatable]:is(.ds-search, .ds-suggestion) > u-datalist > u-option[data-empty]):before { display: block; background: currentcolor; color: inherit; -webkit-mask: var(--dsc-suggestion-create-icon-url) center /contain no-repeat; mask: var(--dsc-suggestion-create-icon-url) center /contain no-repeat; } [aria-selected=true]:is([data-creatable]:is(.ds-search, .ds-suggestion) > u-datalist > u-option[data-empty]):before { -webkit-mask: var(--dsc-suggestion-option-checkmark-url) center /contain no-repeat; mask: var(--dsc-suggestion-option-checkmark-url) center /contain no-repeat; } :is(.ds-search, .ds-suggestion) > input { grid-area: input; } :is(.ds-search, .ds-suggestion) > input[inputmode=none] { box-shadow: none; outline: none; } :is(.ds-search, .ds-suggestion) > input[type=search] { padding-inline-start: calc(var(--dsc-suggestion-search-icon-size) + var(--dsc-suggestion-clear-gap)*2); } :is(.ds-search, .ds-suggestion) > input[type=search]::-webkit-search-cancel-button { display: none; } :is(.ds-search, .ds-suggestion):has(> input[type=search]):after { grid-area: input; margin-inline-start: var(--dsc-suggestion-clear-gap); pointer-events: none; background: currentcolor; content: ""; height: var(--dsc-suggestion-search-icon-size); width: var(--dsc-suggestion-search-icon-size); -webkit-mask: var(--dsc-suggestion-search-icon-url) center /contain no-repeat; mask: var(--dsc-suggestion-search-icon-url) center /contain no-repeat; } @media (forced-colors: active) { :is(.ds-search, .ds-suggestion):has(> input[type=search]):after { background: CanvasText; } } :is(.ds-search, .ds-suggestion) > input { padding-inline-end: calc(var(--dsc-suggestion-clear-size) + var(--dsc-suggestion-clear-gap)); } :is(.ds-search, .ds-suggestion):where(:has(u-datalist):not(:has(button[aria-expanded], button[type=reset]:not([hidden])))) > input { background-position: calc(100% - 1.2em + var(--dsc-input-stroke-width)), calc(100% - .8em); background-repeat: no-repeat; background-size: .4em .4em; background-image: linear-gradient( 45deg, var(--_dsc-input-diagonal-1), var(--_dsc-input-diagonal-2), var(--_dsc-input-diagonal-3), var(--_dsc-input-diagonal-4)), linear-gradient( -45deg, var(--_dsc-input-diagonal-1), var(--_dsc-input-diagonal-2), var(--_dsc-input-diagonal-3), var(--_dsc-input-diagonal-4)); } :is(.ds-search, .ds-suggestion):has(u-datalist) > input:dir(rtl) { background-position: calc(1.2em - var(--dsc-input-stroke-width)), .8em; } :is(.ds-search, .ds-suggestion) > input:is(:-moz-read-only, :disabled, [aria-disabled=true]) ~ :is(del, button[type=reset], button[aria-expanded]) { display: none; } :is(.ds-search, .ds-suggestion) > input:is(:read-only, :disabled, [aria-disabled=true]) ~ :is(del, button[type=reset], button[aria-expanded]) { display: none; } :is(.ds-search, .ds-suggestion) > :is(del, button[type=reset], button[aria-expanded]) { --dsc-button-size:var(--dsc-suggestion-clear-size); grid-area: input; justify-self: end; align-self: center; border-radius: var(--dsc-suggestion-clear-border-radius); box-sizing: border-box; cursor: pointer; height: var(--dsc-suggestion-clear-size); margin-inline-end: var(--dsc-suggestion-clear-gap); outline: none; padding: var(--dsc-suggestion-clear-padding); scale: .75; width: var(--dsc-suggestion-clear-size); } :is(:is(.ds-search, .ds-suggestion) > :is(del, button[type=reset], button[aria-expanded])):focus-visible { box-shadow: var(--_ds--focus,var(--dsc-focus-boxShadow)); outline: var(--_ds--focus,var(--dsc-focus-outline)); outline-offset: var(--_ds--focus,var(--ds-border-width-focus)); } :is(:is(.ds-search, .ds-suggestion) > :is(del, button[type=reset], button[aria-expanded])):focus-visible * { --_ds--focus:; } :is(:is(.ds-search, .ds-suggestion) > :is(del, button[type=reset], button[aria-expanded])):hover { background: var(--dsc-suggestion-clear-background--hover); } :is(:is(.ds-search, .ds-suggestion) > :is(del, button[type=reset], button[aria-expanded])):active { background: var(--dsc-suggestion-clear-background--active); } :is(:is(.ds-search, .ds-suggestion) > :is(del, button[type=reset], button[aria-expanded])):empty:before { content: ""; background: currentcolor; display: block; height: 100%; -webkit-mask: var(--dsc-suggestion-clear-icon-url) center /contain no-repeat; mask: var(--dsc-suggestion-clear-icon-url) center /contain no-repeat; width: 100%; } @media (forced-colors: active) { :is(:is(.ds-search, .ds-suggestion) > :is(del, button[type=reset], button[aria-expanded])):empty:before { background-color: canvastext; forced-color-adjust: none; } } :is(.ds-search, .ds-suggestion) > button[aria-expanded]:empty:before { -webkit-mask-image: var(--dsc-suggestion-toggle-icon-url); mask-image: var(--dsc-suggestion-toggle-icon-url); } :is(.ds-search, .ds-suggestion) > input[aria-expanded=true] ~ button[aria-expanded]:before { rotate: 180deg; } :is(.ds-search, .ds-suggestion) > button:not([type=reset]):not([aria-expanded]) { grid-area: submit; border-start-start-radius: 0; border-end-start-radius: 0; } :is(:is(.ds-search, .ds-suggestion) > button:not([type=reset]):not([aria-expanded])):not(:focus-visible) { border-inline-start: 0; } :is(.ds-search, .ds-suggestion):has(button:not([type=reset]):not([aria-expanded])) > input { border-start-end-radius: 0; border-end-end-radius: 0; } } @layer ds.components { .ds-textfield { display: grid; gap: var(--ds-size-2); } .ds-textfield__adornment { color: var(--ds-color-neutral-text-subtle); background: var(--ds-color-neutral-surface-tinted); padding: 9px var(--ds-size-4); display: inline-block; } .ds-textfield__adornment, .ds-textfield__input { border-radius: var(--ds-border-radius-md); border: solid 1px var(--ds-color-neutral-border-default); box-sizing: border-box; } .ds-textfield__input { font-family: inherit; position: relative; flex: 0 1 auto; width: 100%; -webkit-appearance: none; -moz-appearance: none; appearance: none; padding: 0 var(--ds-size-3); background: var(--ds-color-neutral-surface-default); color: var(--ds-color-neutral-text-default); } .ds-textfield__input:disabled { cursor: not-allowed; } .ds-textfield--readonly .ds-textfield__input { background: var(--ds-color-neutral-surface-tinted); border-color: var(--ds-color-neutral-border-strong); } .ds-textfield__field { display: flex; align-items: stretch; border-radius: var(--ds-border-radius-md); } .ds-textfield__field > :first-child { border-top-left-radius: var(--ds-border-radius-md); border-bottom-left-radius: var(--ds-border-radius-md); } .ds-textfield__field > :last-child { border-top-right-radius: var(--ds-border-radius-md); border-bottom-right-radius: var(--ds-border-radius-md); } .ds-textfield--sm .ds-textfield__adornment { padding: var(--ds-size-2) var(--ds-size-3); } .ds-textfield--md .ds-textfield__adornment { padding: .65rem var(--ds-size-4); } .ds-textfield--lg .ds-textfield__adornment { padding: .85rem var(--ds-size-5); } .ds-textfield--sm .ds-textfield__field { height: var(--ds-size-10); } .ds-textfield--md .ds-textfield__field { height: var(--ds-size-12); } .ds-textfield--lg .ds-textfield__field { height: var(--ds-size-14); } .ds-textfield--sm .ds-textfield__input { padding: 0 var(--ds-size-2); } .ds-textfield--md .ds-textfield__input { padding: 0 var(--ds-size-3); } .ds-textfield--lg .ds-textfield__input { padding: 0 var(--ds-size-4); } .ds-textfield__label { min-width: -moz-min-content; min-width: min-content; display: inline-flex; flex-direction: row; gap: var(--ds-size-1); align-items: center; } .ds-textfield__description { color: var(--ds-color-neutral-text-subtle); margin-top: calc(var(--ds-size-2)*-1); } .ds-textfield:has(.ds-textfield__input:disabled) { opacity: var(--ds-opacity-disabled); } .ds-textfield--error .ds-textfield__input:not(:focus-visible) { border-color: var(--ds-color-danger-border-default); box-shadow: inset 0 0 0 1px var(--ds-color-danger-border-default); } @media (hover: hover) and (pointer: fine) { .ds-textfield__input:not(:focus-visible, :disabled, [aria-disabled]):hover { border-color: var(--ds-color-border-strong); box-shadow: inset 0 0 0 1px var(--ds-color-border-strong); } } .ds-textfield__input--with-prefix { border-top-left-radius: 0; border-bottom-left-radius: 0; } .ds-textfield__input--with-suffix, .ds-textfield__prefix { border-top-right-radius: 0; border-bottom-right-radius: 0; } .ds-textfield__prefix { border-right: 0; white-space: nowrap; } .ds-textfield__suffix { border-left: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; white-space: nowrap; } .ds-textfield__readonly__icon { height: 1.2em; width: 1.2em; } .ds-textfield__error-message:empty { display: none; } .ds-combobox { display: grid; background-color: initial; gap: var(--ds-size-2); } .ds-combobox [data-floating-ui-portal] { grid-column: 1/2; grid-row: 1/2; } .ds-combobox__options-wrapper { padding: var(--ds-size-2); background: var(--ds-color-neutral-surface-default); color: var(--ds-color-neutral-text-default); overflow-y: auto; z-index: 1600; border-radius: var(--ds-border-radius-md); box-shadow: var(--ds-shadow-md); border: 1px solid var(--ds-color-neutral-border-default); } .ds-combobox--readonly .ds-combobox__input { pointer-events: none; } .ds-combobox__input__wrapper { display: flex; align-items: center; position: relative; gap: var(--ds-size-1); cursor: text; padding: var(--ds-size-2); border-radius: var(--ds-border-radius-md); width: 100%; height: auto; justify-content: space-between; } .ds-combobox__input__wrapper .ds-combobox__input { height: 100%; min-width: 50px; width: 100%; flex-grow: 1; -webkit-appearance: none; -moz-appearance: none; appearance: none; border: none; background-color: initial; color: var(--ds-color-neutral-text-default); box-sizing: border-box; font-family: inherit; font-size: inherit; line-height: inherit; font-weight: inherit; } .ds-combobox--sm .ds-combobox__input__wrapper { min-height: var(--ds-size-10); padding: 5px var(--ds-size-2); } .ds-combobox--md .ds-combobox__input__wrapper { min-height: var(--ds-size-12); padding: 7px var(--ds-size-3); } .ds-combobox--lg .ds-combobox__input__wrapper { min-height: var(--ds-size-14); padding: 7px var(--ds-size-4); } .ds-combobox__input__wrapper .ds-combobox__input:focus { outline: none; } .ds-combobox__input__wrapper.ds-combobox--error { border-color: var(--ds-color-danger-border-default); border-width: 2px; } .ds-combobox__chip-and-input { display: flex; flex-wrap: wrap; width: 100%; gap: var(--ds-size-2); align-items: center; background-color: initial; } .ds-combobox__arrow { display: grid; place-items: center; cursor: pointer; } .ds-combobox__input__wrapper.ds-combobox--readonly { background: var(--ds-color-base-default); border-color: var(--ds-color-base-default); } .ds-combobox__label { grid-column: 1/2; grid-row: 1/2; min-width: -moz-min-content; min-width: min-content; display: inline-flex; flex-direction: row; gap: var(--ds-size-1); align-items: center; } .ds-combobox__description { color: var(--ds-color-neutral-text-subtle); margin-top: calc(var(--ds-size-2)*-1); } .ds-combobox__clear-button { display: grid; place-items: center; cursor: pointer; background-color: initial; color: var(--ds-color-neutral-text-default); border: none; padding: 0; border-radius: var(--ds-border-radius-sm); height: 29px; width: 29px; aspect-ratio: 1; } .ds-combobox--sm .ds-combobox__clear-button { height: 25px; width: 25px; } .ds-combobox--md .ds-combobox__clear-button { height: 29px; width: 29px; } .ds-combobox--lg .ds-combobox__clear-button { height: 31px; width: 31px; } .ds-combobox__clear-button:not(:disabled):hover { background-color: var(--ds-color-neutral-surface-tinted); } .ds-combobox__disabled { opacity: var(--ds-opacity-disabled); } .ds-combobox__disabled * { cursor: not-allowed; } .ds-combobox__readonly__icon { height: 1.2em; width: 1.2em; } .ds-combobox__error-message { margin-top: var(--ds-size-2); } .ds-combobox__error-message:empty { display: none; } .ds-combobox__loading { display: flex; gap: var(--ds-size-2); align-content: center; } .ds-combobox__input__wrapper:has(input:focus) { --dsc-focus-border-width:3px; outline: var(--dsc-focus-border-width) solid var(--ds-color-focus-outer); outline-offset: var(--dsc-focus-border-width); box-shadow: 0 0 0 var(--dsc-focus-border-width) var(--ds-color-focus-inner); } .ds-combobox__input__wrapper:focus-within:hover { border-color: var(--ds-color-neutral-border-default); } .ds-combobox__custom, .ds-combobox__empty, .ds-combobox__option { font-weight: 400; padding: var(--ds-size-2) var(--ds-size-3); } .ds-combobox__option { width: 100%; display: grid; grid-template-columns: 1.2em 1fr; padding-left: var(--ds-size-1); border: none; border-left: 5px solid transparent; border-radius: var(--ds-border-radius-sm); justify-content: start; background: none; text-align: left; height: auto; cursor: pointer; font-family: inherit; } .ds-combobox__option.ds-combobox__option--active { background: var(--ds-color-surface-tinted); border-left: 5px solid var(--ds-color-base-default); } .ds-combobox__option > div { align-self: flex-start; } .ds-combobox__option.ds-combobox__option--multiple { grid-template-columns: auto 1fr; gap: var(--ds-size-2); } .ds-combobox__option__label { margin: auto 0; display: flex; flex-direction: column; flex-wrap: wrap; cursor: pointer; gap: var(--ds-size-1); color: var(--ds-color-neutral-text-default); } .ds-combobox__option--active .ds-combobox__option__label { color: var(--ds-color-text-default); } .ds-combobox__option__icon-wrapper { width: var(--ds-size-6); aspect-ratio: 1/1; border: 2px solid var(--ds-color-neutral-border-default); border-radius: var(--ds-border-radius-sm); background-color: var(--ds-color-neutral-surface-default); display: grid; place-items: center; } .ds-combobox__option--active .ds-combobox__option__icon-wrapper { border-color: var(--ds-color-base-default); } .ds-combobox--sm .ds-combobox__option .ds-combobox__option__icon-wrapper { width: var(--ds-size-5); } .ds-combobox--md .ds-combobox__option .ds-combobox__option__icon-wrapper { width: var(--ds-size-6); } .ds-combobox--lg .ds-combobox__option .ds-combobox__option__icon-wrapper { width: var(--ds-size-7); } .ds-combobox__option__icon-wrapper.ds-combobox__option__icon-wrapper--selected { border-color: var(--ds-color-base-default); background-color: var(--ds-color-base-default); } .ds-combobox__option__icon-wrapper__icon { box-sizing: border-box; padding-top: .2em; transform: scale(1.4); stroke: var(--ds-color-neutral-text-default); color: var(--ds-color-neutral-text-default); } .ds-combobox__option__icon-wrapper .ds-combobox__option__icon-wrapper__icon { padding-top: 0; } .ds-combobox__option--active .ds-combobox__option__icon-wrapper__icon { stroke: var(--ds-color-text-default); color: var(--ds-color-text-default); } .ds-combobox__option__icon-wrapper.ds-combobox__option__icon-wrapper--selected .ds-combobox__option__icon-wrapper__icon { color: #fff; stroke: #fff; } .ds-combobox__option__description { display: flex; flex-direction: column; flex-wrap: wrap; gap: var(--ds-size-1); color: var(--ds-color-neutral-text-subtle); font-weight: 400; } }