.version-info[data-v-41af8c19] { padding: 0 16px; font-weight: 600; font-size: 13px; line-height: 18px; color: var(--brand-secondary-5); border-top: 1px solid var(--brand-secondary-4); }/** * Styleguide conform variables, mostly provided by CoreUI. * A comprehensive list can be found here: https://core-ui.schwarz/design-guidelines/colors */ :root { /* grey scales */ --sit-color-eggshell: #f8f8f8; --sit-color-lightgrey: #ededed; --sit-color-grey: #d2d2d2; --sit-color-darkgrey: #a9a9a9; --sit-color-lightblack: #464646; /** spaces */ /* xs base: 8px */ --sit-space-xs: 0.5rem; /* s base: 16px */ --sit-space-s: 1rem; /* m base: 24px */ --sit-space-m: 1.5rem; /* l base: 32px */ --sit-space-l: 2rem; /* xl base: 64px */ --sit-space-xl: 4rem; /* xxl base: 128px */ --sit-space-xxl: 8rem; --honeywell-width: 320px; } :root [scu-theme=kaufland] { --background-image: url("/assets/frau_vorm_regal-Bvq-G5QV.png"); } /** /* The CSS variables below are mapped to specific core ui variables for easier usage. /* Since they are depending on the current scu-theme the selector must not be [scu-theme] instead /* of :root. Otherwise they values would not update accordingly. */ [scu-theme] { /* main theme color */ --sit-color-primary: var(--brand-primary-5); /* status colors */ --sit-color-green: var(--green-5); --sit-color-orange: var(--orange-5); --sit-color-red: var(--red-5); } /** Shorthand for applying horizontal margins */ /** Shorthand for applying vertical margins */ /** * Breakpoints might be consistently applied via the defined breakpoints (s, m or l) * @param {string} $breakpoint - the (globally defined) breakpoint * @param {string} $min-max - Whether the breakpoint should be considered as min or max width. Default: max * * @example breakpoint(m) * @example breakpoint(m, min) * @see https://vue-blueprint.schwarz/advanced/folders.html#styles */ /** * Default styling for pages. Class `page` should be wrapped around every regular page/view inside the views folder. */ .page { margin: var(--sit-space-l) var(--sit-space-xl); /* increases the margin-bottom of the page to reserve space for the bottom-bar */ /** * global centering function */ } @media (max-width: 960px) { .page { margin: var(--sit-space-l); } } @media (max-width: 600px) { .page { margin: var(--sit-space-xs); margin-left: -10px; } } .page > scu-headline[element=h1] { margin-top: 0; } .page > h1.onyx-headline--h1 { margin-top: -50px; } .page--with-bottom-bar { margin-bottom: calc(var(--sit-space-l) + var(--sit-space-xl)); } @media (max-width: 960px) { .page--with-bottom-bar { margin-bottom: calc(var(--sit-space-l) + var(--sit-space-xl)); } } @media (max-width: 600px) { .page--with-bottom-bar { margin-bottom: calc(var(--sit-space-s) + 48px); } } .page .align-center { display: flex; justify-content: flex-start; align-items: flex-start; } @media (max-width: 600px) { .page .align-center { justify-content: center; align-items: center; } } .draggable { cursor: move; /* fallback: no `url()` support or images disabled */ cursor: url(styles/images/grab.cur); /* fallback: Internet Explorer */ cursor: -webkit-grab; /* Chrome 1-21, Safari 4+ */ cursor: -moz-grab; /* Firefox 1.5-26 */ cursor: grab; /* W3C standards syntax, should come least */ } .draggable:active { cursor: url(styles/images/grabbing.cur); cursor: -webkit-grabbing; cursor: -moz-grabbing; cursor: grabbing; } .font--small { /* base: 13px */ font-size: 0.8125rem; } .font--semi-bold { font-weight: 600; } .font--truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body { /* 16px is the base for all rem calculations */ font-size: 16px; margin: 0; background-color: var(--sit-color-eggshell); } /* the main content is defined as scroll container so the scroll bar does not overlap the top-bar. */ .app { height: var(--100vh, 100vh); display: flex; flex-direction: column; } .app ::-webkit-scrollbar { display: none; } @media (max-width: 600px) { .app { height: unset; overflow: scroll; } }*{-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}.scu-root-background{background-color:var(--brand-secondary-2)}scu-headline .light{font-weight:600;color:var(--brand-secondary-6)}scu-table.has-row-with-open-pop-up{z-index:7}body>scu-fly-out-wrapper.scuFlyOutWrapper{border:1px solid var(--brand-primary-4);z-index:100000;background-color:#fff;position:absolute;min-width:200px}:root{--scu-radius:8px;--scu-radius-s:4px}:root,[scu-theme]{--brand-primary-0:#edf8ff;--brand-primary-1:#c6e3f7;--brand-primary-2:#b2d6f0;--brand-primary-3:#77bced;--brand-primary-4:#409ada;--brand-primary-5:#0079ce;--brand-primary-6:#0060a3;--brand-primary-7:#0c4d7a;--brand-secondary-1:#ffffff;--brand-secondary-2:#f8f8f8;--brand-secondary-3:#ededed;--brand-secondary-4:#e3e3e3;--brand-secondary-5:#d2d2d2;--brand-secondary-6:#a9a9a9;--brand-secondary-7:#464646;--brand-secondary-8:#000000;--brand-exception-1:var(--brand-primary-5);--brand-exception-3-gradient:linear-gradient(-180deg, var(--brand-primary-4) 0%, var(--brand-primary-5) 100%);--brand-exception-4:var(--brand-primary-2);--brand-exception-14:var(--brand-secondary-1);--brand-exception-15:var(--brand-primary-5);--brand-exception-16:var(--brand-secondary-1);--brand-exception-17:var(--brand-primary-3);--exp-brand-gradient-ltr:linear-gradient(90deg, var(--brand-primary-4) 0%, var(--brand-primary-5) 100%);--exp-brand-gradient-default:linear-gradient(-180deg, var(--brand-primary-4) 0%, var(--brand-primary-5) 100%);--exp-brand-primary:var(--brand-primary-5);--exp-brand-dark:var(--brand-primary-6);--exp-tile-text:var(--brand-primary-5);--dev-secondary-1:#666666;--dev-secondary-2:#b3b3b3;--dev-secondary-3:#c6c6c6;--dev-secondary-4:#919191;--green-1:#d0f5de;--green-2:#b4f0cb;--green-3:#97d8b0;--green-4:#72cb94;--green-5:#43b970;--green-6:#399d5f;--green-7:#2e814e;--orange-1:#ffeacb;--orange-2:#ffdba6;--orange-3:#ffca7a;--orange-4:#ffb140;--orange-5:#ff9800;--orange-6:#d98100;--orange-7:#b26a00;--red-1:#ffddd9;--red-2:#ffa599;--red-3:#f5897a;--red-4:#f05948;--red-5:#e42912;--red-6:#c2220f;--red-7:#9f1c0c}[scu-theme=lidl]{--brand-exception-3-gradient:linear-gradient(-180deg, #2b99e7 0%, var(--brand-primary-5) 100%);--exp-brand-gradient-ltr:linear-gradient(90deg, #2b99e7 0%, var(--brand-primary-5) 100%);--exp-brand-gradient-default:linear-gradient(-180deg, #2b99e7 0%, var(--brand-primary-5) 100%)}[scu-theme=DEPRECATED_schwarz]{--brand-primary-0:#feedff;--brand-primary-1:#f6dff7;--brand-primary-2:#eac5ed;--brand-primary-3:#d294d8;--brand-primary-4:#ab4db3;--brand-primary-5:#8a2093;--brand-primary-6:#711b79;--brand-primary-7:#5b1661;--brand-exception-17:var(--brand-primary-5);--exp-brand-gradient-ltr:linear-gradient(90deg, #808080 0%, #666666 100%);--exp-brand-gradient-default:linear-gradient(-180deg, #808080 0%, #666666 100%);--exp-brand-primary:#666666;--exp-brand-dark:#464646}[scu-theme=schwarzDigits]{--brand-primary-0:#f0fcfc;--brand-primary-1:#e8f6f7;--brand-primary-2:#b9e5e8;--brand-primary-3:#8ad3d8;--brand-primary-4:#8ad3d8;--brand-primary-5:#00c3cd;--brand-primary-6:#0097a1;--brand-primary-7:#00838d;--brand-exception-16:var(--brand-primary-5)}[scu-theme=schwarz],[scu-theme=schwarzCorporateSolutions]{--brand-tertiary-0:#effcef;--brand-tertiary-1:#dff9e0;--brand-tertiary-2:#bdf3c1;--brand-tertiary-3:#99eca1;--brand-tertiary-4:#6fe47f;--brand-tertiary-5:#32dc5a;--brand-tertiary-6:#2abf4d;--brand-tertiary-7:#22a341;--brand-primary-0:#edf3ff;--brand-primary-1:#dae7ff;--brand-primary-2:#c8daff;--brand-primary-3:#94b2ff;--brand-primary-4:#6d8ff4;--brand-primary-5:#4a6be8;--brand-primary-6:#1f38c2;--brand-primary-7:#0a1a4f;--brand-secondary-3:#edf3ff}[scu-theme=schwarz] scu-loading-indicator,[scu-theme=schwarzCorporateSolutions] scu-loading-indicator{--stroke-color:#0a1a4f}[scu-theme=schwarz] scu-accordion.disabled,[scu-theme=schwarzCorporateSolutions] scu-accordion.disabled{--header-status-background-color:#edf3ff}[scu-theme=schwarz] .header-status,[scu-theme=schwarz] scu-vertical-indicator-action,[scu-theme=schwarz] scu-status,[scu-theme=schwarzCorporateSolutions] .header-status,[scu-theme=schwarzCorporateSolutions] scu-vertical-indicator-action,[scu-theme=schwarzCorporateSolutions] scu-status{--brand-secondary-3:#c8daff;--brand-secondary-6:#0a1a4f;--brand-primary-5:#0a1a4f}[scu-theme=schwarz] scu-switch,[scu-theme=schwarzCorporateSolutions] scu-switch{--brand-secondary-6:#0a1a4f;--scu-switch-outline:#0a1a4f}[scu-theme=schwarz] scu-chip,[scu-theme=schwarzCorporateSolutions] scu-chip{--background-selected-color:#0a1a4f}[scu-theme=schwarz] h1,[scu-theme=schwarz] h2,[scu-theme=schwarz] h3,[scu-theme=schwarz] h4,[scu-theme=schwarz] h5,[scu-theme=schwarz] h6,[scu-theme=schwarz] scu-headline,[scu-theme=schwarzCorporateSolutions] h1,[scu-theme=schwarzCorporateSolutions] h2,[scu-theme=schwarzCorporateSolutions] h3,[scu-theme=schwarzCorporateSolutions] h4,[scu-theme=schwarzCorporateSolutions] h5,[scu-theme=schwarzCorporateSolutions] h6,[scu-theme=schwarzCorporateSolutions] scu-headline{--brand-secondary-7:#0a1a4f}[scu-theme=schwarz] scu-button[variant=default],[scu-theme=schwarz] scu-icon-button[variant=default],[scu-theme=schwarzCorporateSolutions] scu-button[variant=default],[scu-theme=schwarzCorporateSolutions] scu-icon-button[variant=default]{--disabled-color:#fff}[scu-theme=schwarz] scu-button[color=secondary],[scu-theme=schwarz] scu-icon-button[color=secondary],[scu-theme=schwarzCorporateSolutions] scu-button[color=secondary],[scu-theme=schwarzCorporateSolutions] scu-icon-button[color=secondary]{--brand-secondary-3:#ededed}[scu-theme=schwarz] scu-top-bar,[scu-theme=schwarzCorporateSolutions] scu-top-bar{--brand-exception-1:#1f38c2}[scu-theme=kaufland]{--brand-primary-0:#ebf6ff;--brand-primary-1:#d5eafc;--brand-primary-2:#bcddfd;--brand-primary-3:#90caf9;--brand-primary-4:#5fb4f7;--brand-primary-5:#2196f3;--brand-primary-6:#0571c7;--brand-primary-7:#005599;--brand-exception-1:#e3000f;--brand-exception-3-gradient:linear-gradient(-180deg, #666666 0%, #464646 100%);--brand-exception-4:#ffb3b8;--brand-exception-13:#e3e3e3;--brand-exception-14:#464646;--brand-exception-15:#464646;--brand-exception-16:#e3000f;--brand-exception-17:var(--brand-primary-5);--exp-box-shadow:0px 2px 4px 0px rgba(0, 0, 0, 0.15);--exp-brand-gradient-ltr:#ffffff;--exp-brand-gradient-default:linear-gradient(-180deg, #ff4d58 0%, #e3000f 100%);--exp-brand-primary:#ffffff;--exp-brand-dark:#a8000b;--exp-tile-text:#464646}[scu-theme=twoGo]{--brand-primary-0:#e8f9fa;--brand-primary-1:#beebed;--brand-primary-2:#a4dbde;--brand-primary-3:#6aced4;--brand-primary-4:#37b8bf;--brand-primary-5:#00a5ad;--brand-primary-6:#007980;--brand-primary-7:#09585c;--brand-exception-3-gradient:linear-gradient(-180deg, #07a9b1 0%, #018990 100%);--brand-exception-4:var(--brand-primary-1);--exp-brand-gradient-ltr:linear-gradient(90deg, rgb(7, 169, 177) 0%, rgb(1, 137, 144) 100%)}[scu-theme=kauflandCitrix]{--brand-primary-0:#ebf6ff;--brand-primary-1:#d5eafc;--brand-primary-2:#bcddfd;--brand-primary-3:#90caf9;--brand-primary-4:#5fb4f7;--brand-primary-5:#2196f3;--brand-primary-6:#0571c7;--brand-primary-7:#005599;--brand-secondary-2:#f6f6f6;--brand-exception-1:#e3000f;--brand-exception-3-gradient:linear-gradient(-180deg, #666666 0%, #464646 100%);--brand-exception-4:#ffb3b8;--brand-exception-13:#e3e3e3;--brand-exception-14:#464646;--brand-exception-15:#464646;--brand-exception-16:#e3000f;--brand-exception-17:var(--brand-primary-5);--exp-box-shadow:0px 2px 4px 0px rgba(0, 0, 0, 0.15);--exp-brand-gradient-ltr:#ffffff;--exp-brand-gradient-default:linear-gradient(-180deg, #ff4d58 0%, #e3000f 100%);--exp-brand-primary:#ffffff;--exp-brand-dark:#a8000b;--exp-tile-text:#464646}[scu-theme=lidlWaWi]{--brand-exception-3-gradient:linear-gradient(-180deg, #2b99e7 0%, var(--brand-primary-5) 100%);--exp-brand-gradient-ltr:linear-gradient(90deg, #2b99e7 0%, var(--brand-primary-5) 100%);--exp-brand-gradient-default:linear-gradient(-180deg, #2b99e7 0%, var(--brand-primary-5) 100%);--yellow-wawi:#f8e71c;--scu-select-search-match-background-color:transparent;--scu-select-no-search-match-font:bold;--scu-select-select-all-font:bold;--brand-secondary-5:#a9a9a9;--brand-secondary-6:#797979}[scu-theme=lidlWaWi] scu-search,[scu-theme=lidlWaWi] scu-dropdown,[scu-theme=lidlWaWi] scu-text-input,[scu-theme=lidlWaWi] scu-datepicker,[scu-theme=lidlWaWi] scu-timepicker,[scu-theme=lidlWaWi] scu-table{--input-font-size:16px;--input-font-color:var(--brand-secondary-7);--input-background:var(--brand-secondary-1);--input-border:1px solid var(--brand-secondary-5);--input-border-focus:1px solid var(--brand-primary-5);--input-border-error:1px solid var(--red-5);--input-border-warning:1px solid var(--orange-5);--input-height:22px;--input-padding:1px 12px 1px 4px;--input-label-color:var(--brand-secondary-6);--input-label-font-size:13px;--input-label-small-font-size:13px;--input-label-small-line-height-internal:18px;--input-label-after-display:none;--input-label-border-bottom:none;--input-label-base-transform:translateY(calc(-1 * var(--input-height) - 4px));--input-label-focus-transform:translateY(calc(-1 * var(--input-height) - 4px));--input-mandatory-label-display:none;--input-placeholder-color:var(--brand-secondary-6);--input-placeholder-padding-left:12px;--input-wawi-marker-display:inline-flex;--input-flag-display:none;--notification-area-margin-top:1px}[scu-theme=lidlWaWi] scu-text-area{--text-area-padding-internal:4px 8px 4px 5px;--text-area-wawi-mandatory-marker:6px solid var(--yellow-wawi);--text-area-wawi-mandatory-marker-invisible:6px solid transparent;--text-area-label-left-non-floating:0px;--text-area-label-top-non-floating:0px;--text-area-label-font-size-non-floating:13px;--text-area-label-width-non-floating:100%;--input-mandatory-label-display-internal:none;--notification-area-margin-top:1px}[scu-theme=lidlWaWi] scu-dropdown,[scu-theme=lidlWaWi] scu-datepicker,[scu-theme=lidlWaWi] scu-timepicker{--input-padding:4px 0 4px 4px;--input-scu-right-icon-margin:0;--dropdown-icon-wrapper-padding-left:0}[scu-theme=lidlWaWi] scu-datepicker,[scu-theme=lidlWaWi] scu-timepicker{--icon-size:20px;--min-input-width:0;--max-input-width:none}[scu-theme=lidlWaWi] scu-dropdown{--dropdown-container-right-icon-width:24px;--dropdown-container-right-icon-height:24px}[scu-theme=lidlWaWi] scu-dual-list{--notification-area-margin-top:1px}.scu-container-base{width:auto;margin-right:auto;margin-left:auto}@media (max-width: 320px){.scu-row{display:flex;margin-left:-16px;margin-right:-16px}.scu-container-sm{width:auto;margin-right:auto;margin-left:auto;padding-right:8px;padding-left:8px}.scu-container-md{width:auto;margin-right:auto;margin-left:auto;padding-right:10px;padding-left:10px}.scu-container-lg{width:auto;margin-right:auto;margin-left:auto;padding-right:16px;padding-left:16px}}@media (min-width: 320px){.scu-row{display:flex;margin-left:-16px;margin-right:-16px}.scu-container-sm{width:auto;margin-right:auto;margin-left:auto;padding-right:8px;padding-left:8px}.scu-container-md{width:auto;margin-right:auto;margin-left:auto;padding-right:10px;padding-left:10px}.scu-container-lg{width:auto;margin-right:auto;margin-left:auto;padding-right:16px;padding-left:16px}}@media (min-width: 601px){.scu-row{display:flex;margin-left:-32px;margin-right:-32px}.scu-container-sm{width:auto;margin-right:auto;margin-left:auto;padding-right:16px;padding-left:16px}.scu-container-md{width:auto;margin-right:auto;margin-left:auto;padding-right:25px;padding-left:25px}.scu-container-lg{width:auto;margin-right:auto;margin-left:auto;padding-right:32px;padding-left:32px}}@media (min-width: 961px){.scu-row{display:flex;margin-left:-32px;margin-right:-32px}.scu-container-sm{width:auto;margin-right:auto;margin-left:auto;padding-right:16px;padding-left:16px}.scu-container-md{width:auto;margin-right:auto;margin-left:auto;padding-right:25px;padding-left:25px}.scu-container-lg{width:auto;margin-right:auto;margin-left:auto;padding-right:32px;padding-left:32px}}@media (min-width: 1601px){.scu-row{display:flex;margin-left:-64px;margin-right:-64px}.scu-container-sm{width:auto;margin-right:auto;margin-left:auto;padding-right:32px;padding-left:32px}.scu-container-md{width:auto;margin-right:auto;margin-left:auto;padding-right:50px;padding-left:50px}.scu-container-lg{width:auto;margin-right:auto;margin-left:auto;padding-right:64px;padding-left:64px}}@font-face{font-family:"Open SansVariable";font-style:normal;font-display:swap;font-weight:300 800;src:url("/assets/open-sans-cyrillic-variable-wghtOnly-normal-Cbm8X_p8.woff2") format("woff2");unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}@font-face{font-family:"Open SansVariable";font-style:normal;font-display:swap;font-weight:300 800;src:url("/assets/open-sans-cyrillic-ext-variable-wghtOnly-normal-D7lgiqC7.woff2") format("woff2");unicode-range:U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}@font-face{font-family:"Open SansVariable";font-style:normal;font-display:swap;font-weight:300 800;src:url("/assets/open-sans-greek-variable-wghtOnly-normal-PvVGeCXy.woff2") format("woff2");unicode-range:U+0370-03FF}@font-face{font-family:"Open SansVariable";font-style:normal;font-display:swap;font-weight:300 800;src:url("/assets/open-sans-greek-ext-variable-wghtOnly-normal-QAnOhIBD.woff2") format("woff2");unicode-range:U+1F00-1FFF}@font-face{font-family:"Open SansVariable";font-style:normal;font-display:swap;font-weight:300 800;src:url("/assets/open-sans-hebrew-variable-wghtOnly-normal-WlUV0goN.woff2") format("woff2");unicode-range:U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F}@font-face{font-family:"Open SansVariable";font-style:normal;font-display:swap;font-weight:300 800;src:url("/assets/open-sans-latin-variable-wghtOnly-normal-CM7OgZwt.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}@font-face{font-family:"Open SansVariable";font-style:normal;font-display:swap;font-weight:300 800;src:url("/assets/open-sans-latin-ext-variable-wghtOnly-normal-DoxTo6nI.woff2") format("woff2");unicode-range:U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF}@font-face{font-family:"Open SansVariable";font-style:normal;font-display:swap;font-weight:300 800;src:url("/assets/open-sans-vietnamese-variable-wghtOnly-normal-DtI3cJEc.woff2") format("woff2");unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB}:root{--scu-default-font-family:"Open SansVariable", "Open Sans", Helvetica, Arial, sans-serif;--scu-font-weight-light:light;--scu-font-weight-regular:normal;--scu-font-weight-semi-bold:600;--scu-font-weight-bold:bold}:root .scu-font-h1{font-family:var(--scu-default-font-family);font-weight:var(--scu-font-weight-regular);font-size:28px}:root .scu-font-h2{font-family:var(--scu-default-font-family);font-weight:var(--scu-font-weight-semi-bold);font-size:20px}:root .scu-font-h3{font-family:var(--scu-default-font-family);font-weight:var(--scu-font-weight-semi-bold);letter-spacing:-0.35px;font-size:16px}:root .scu-font-h4{font-family:var(--scu-default-font-family);font-weight:var(--scu-font-weight-light);letter-spacing:0.5px;font-size:16px}:root .scu-font-h5{font-family:var(--scu-default-font-family);font-weight:var(--scu-font-weight-semi-bold);font-size:16px}:root .scu-font-h6{font-family:var(--scu-default-font-family);font-weight:var(--scu-font-weight-semi-bold);font-size:13px}:root .scu-font-app-name{font-family:var(--scu-default-font-family);font-weight:var(--scu-font-weight-bold);font-size:14px}:root .scu-font-button-1{font-family:var(--scu-default-font-family);font-weight:var(--scu-font-weight-semi-bold);text-transform:capitalize;font-size:16px}:root .scu-font-button-2{font-family:var(--scu-default-font-family);font-weight:var(--scu-font-weight-semi-bold);text-transform:capitalize;letter-spacing:0.2px;font-size:13px}:root .scu-font-text{font-family:var(--scu-default-font-family);font-weight:var(--scu-font-weight-regular);font-size:16px}:root .scu-font-label{font-family:var(--scu-default-font-family);font-weight:var(--scu-font-weight-regular);font-size:13px}.system-modal__headline[data-v-b2b655ed]{width:100%;margin:0}.system-modal__description[data-v-b2b655ed]{white-space:pre-line}.system-modal__debug-info[data-v-b2b655ed]{padding-top:1rem}.system-modal [slot=header][data-v-b2b655ed],.system-modal [slot=body][data-v-b2b655ed]{max-width:800px}.system-modal [slot=footer][data-v-b2b655ed]{max-width:864px;min-width:320px}.flex[data-v-b2b655ed]{display:flex;gap:2rem}.align-center[data-v-b2b655ed]{align-items:center}.top-bar-user[data-v-877933fc]{margin:0;width:fit-content;display:flex;align-items:center}.fly-out[data-v-877933fc]{margin-left:4px}.fly-out__version[data-v-877933fc]{border-top:1px solid var(--brand-secondary-4)} /** * Define the layer cascade layer priorities: Will apply from left-to-right. * We have to keep the layers in sync with layers.scss. We can't reference it in here, * as the projects can import this file separately from the other stylesheets. */ @layer onyx.reset, onyx.utility, onyx.component, onyx.density, onyx.override; /* * This file can be imported by projects to apply common styles to global elements like . * It must be CSS only (so no scss etc.) and must NOT contain any relative imports of other .css files. * Make sure that all styles inside this file are in an onyx layer so they can be easily overridden if needed. * * Be careful when changing styles here since it will affect all global styles of the application. */ @layer onyx.utility { body { margin: 0; font-family: var(--onyx-font-family-paragraph); background-color: var(--onyx-color-base-background-tinted); color: var(--onyx-color-text-icons-neutral-intense); /* * Apply font styles so elements like

align nicely. Same as .onyx-text class. */ font-size: var(--onyx-font-size-md); line-height: var(--onyx-font-line-height-md); font-variant-ligatures: none; } } /** * Define the layer cascade layer priorities: Will apply from left-to-right. * We have to keep the layers in sync with global.css. */ @layer onyx.reset, onyx.utility, onyx.component, onyx.density, onyx.override; @layer onyx.utility { :root { /** @deprecated Use --onyx-font-family-paragraph instead */ --onyx-font-family: var(--onyx-font-family-paragraph), sans-serif; --onyx-1px-in-rem: 0.0625rem; --onyx-duration-sm: 400ms; --onyx-duration-md: 700ms; --onyx-duration-lg: 1s; --onyx-shadow-medium-top: 0 -0.125rem 0.5rem 0 rgba(0, 0, 0, 0.1); --onyx-shadow-medium-bottom: 0 0.125rem 0.5rem 0 rgba(0, 0, 0, 0.1); --onyx-shadow-medium-left: -0.125rem 0 0.5rem 0 rgba(0, 0, 0, 0.1); --onyx-shadow-medium-right: 0.125rem 0 0.5rem 0 rgba(0, 0, 0, 0.1); --onyx-shadow-soft-top: 0 -0.5rem 1.5rem 0 rgba(0, 0, 0, 0.1); --onyx-shadow-soft-bottom: 0 0.5rem 1.5rem 0 rgba(0, 0, 0, 0.1); --onyx-shadow-soft-left: -0.5rem 0 1.5rem 0 rgba(0, 0, 0, 0.1); --onyx-shadow-soft-right: 0.5rem 0 1.5rem 0 rgba(0, 0, 0, 0.1); --onyx-outline-width: 0.25rem; --onyx-nav-bar-height: 3.5rem; /** @deprecated Use --onyx-color-component-opacity-backdrop-soft instead */ --onyx-color-component-opacity-backdrop: var(--onyx-color-component-opacity-backdrop-soft); } :root { color-scheme: light; } .dark { color-scheme: dark; } .dark { --onyx-shadow-medium-top: none; --onyx-shadow-medium-bottom: none; --onyx-shadow-medium-left: none; --onyx-shadow-medium-right: none; --onyx-shadow-soft-top: none; --onyx-shadow-soft-bottom: none; --onyx-shadow-soft-left: none; --onyx-shadow-soft-right: none; } } :where(html.onyx-transition-active *) { transition-duration: 0.2s; transition-property: color, background-color, border-color; transition-timing-function: ease-in-out; } @layer onyx.reset { html:focus-within .onyx-component { scroll-behavior: smooth; } .onyx-component, .onyx-component::before, .onyx-component::after, .onyx-component *, .onyx-component *::before, .onyx-component *::after { margin: 0; box-sizing: border-box; -moz-text-size-adjust: none; -webkit-text-size-adjust: none; text-size-adjust: none; } .onyx-component:is(input, button, textarea, optgroup, select), .onyx-component *:is(input, button, textarea, optgroup, select) { font: inherit; } .onyx-component:is(th), .onyx-component *:is(th) { padding: 0; } .onyx-component, .onyx-component * { /*! Based on modern-normalize v2.0.0 | MIT License | https://github.com/sindresorhus/modern-normalize */ /* Grouping content ================ */ /** 1. Align the Firefox height with all other browsers. 2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) */ } .onyx-component:is(hr), .onyx-component *:is(hr) { height: 0; /* 1 */ color: inherit; /* 2 */ } .onyx-component, .onyx-component * { /* Text-level semantics ==================== */ /** Add the correct text decoration in Chrome, Edge, and Safari. */ } .onyx-component:is(abbr[title]), .onyx-component *:is(abbr[title]) { text-decoration: underline dotted; } .onyx-component, .onyx-component * { /** Add the correct font weight in Edge and Safari. */ } .onyx-component:is(b, strong), .onyx-component *:is(b, strong) { font-weight: bolder; } .onyx-component, .onyx-component * { /** Add the correct font size in all browsers. */ } .onyx-component:is(small), .onyx-component *:is(small) { font-size: 80%; } .onyx-component, .onyx-component * { /** Prevent 'sub' and 'sup' elements from affecting the line height in all browsers. */ } .onyx-component:is(sub, sup), .onyx-component *:is(sub, sup) { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } .onyx-component:is(sub), .onyx-component *:is(sub) { bottom: -0.25em; } .onyx-component:is(sup), .onyx-component *:is(sup) { top: -0.5em; } .onyx-component, .onyx-component * { /* Tabular data ============ */ /** 1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) 2. Correct table border color inheritance in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) */ } .onyx-component:is(table), .onyx-component *:is(table) { text-indent: 0; /* 1 */ border-color: inherit; /* 2 */ } .onyx-component, .onyx-component * { /* Forms ===== */ /** Remove the inheritance of text transform in Edge and Firefox. */ } .onyx-component:is(button, select), .onyx-component *:is(button, select) { text-transform: none; } .onyx-component, .onyx-component * { /** Correct the inability to style clickable types in iOS and Safari. */ } .onyx-component:is(button, [type=button], [type=reset], [type=submit]), .onyx-component *:is(button, [type=button], [type=reset], [type=submit]) { -webkit-appearance: button; } .onyx-component, .onyx-component * { /** Remove the inner border and padding in Firefox. */ } .onyx-component::-moz-focus-inner, .onyx-component *::-moz-focus-inner { border-style: none; padding: 0; } .onyx-component, .onyx-component * { /** Restore the focus styles unset by the previous rule. */ } .onyx-component:-moz-focusring, .onyx-component *:-moz-focusring { outline: 1px dotted ButtonText; } .onyx-component, .onyx-component * { /** Remove the additional ':invalid' styles in Firefox. See: https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737 */ } .onyx-component:-moz-ui-invalid, .onyx-component *:-moz-ui-invalid { box-shadow: none; } .onyx-component, .onyx-component * { /** Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers. */ } .onyx-component:is(legend), .onyx-component *:is(legend) { padding: 0; } .onyx-component, .onyx-component * { /** Add the correct vertical alignment in Chrome and Firefox. */ } .onyx-component:is(progress), .onyx-component *:is(progress) { vertical-align: baseline; } .onyx-component, .onyx-component * { /** Correct the cursor style of increment and decrement buttons in Safari. */ } .onyx-component::-webkit-inner-spin-button, .onyx-component::-webkit-outer-spin-button, .onyx-component *::-webkit-inner-spin-button, .onyx-component *::-webkit-outer-spin-button { height: auto; } .onyx-component, .onyx-component * { /** 1. Correct the odd appearance in Chrome and Safari. 2. Correct the outline style in Safari. */ } .onyx-component:is([type=search]), .onyx-component *:is([type=search]) { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } .onyx-component, .onyx-component * { /** Remove the inner padding in Chrome and Safari on macOS. */ } .onyx-component::-webkit-search-decoration, .onyx-component *::-webkit-search-decoration { -webkit-appearance: none; } .onyx-component, .onyx-component * { /** 1. Correct the inability to style clickable types in iOS and Safari. 2. Change font properties to 'inherit' in Safari. */ } .onyx-component::-webkit-file-upload-button, .onyx-component *::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ } .onyx-component, .onyx-component * { /* Interactive =========== */ /* Add the correct display in Chrome and Safari. */ } .onyx-component:is(summary), .onyx-component *:is(summary) { display: list-item; } } /*#region breakpoints*/ /*#endregion breakpoints*/ /** * Applies CSS only if the screen width satisfies the given onyx breakpoint. * @param {string} $min-max - Whether the breakpoint should be considered as min or max width. * @param {string} $name - name of the onyx breakpoint. One of: 2xs, xs, sm, md, lg or xl * * @example screen(min, sm) * @example screen(max, sm) */ /** * Applies CSS only if the container width satisfies the given onyx breakpoint. * @param {string} $min-max - Whether the breakpoint should be considered as min or max width. * @param {string} $name - name of the onyx breakpoint. One of: 2xs, xs, sm, md, lg or xl * @param {number} $offset - optional offset to add to the min/max width. Useful if both min and max are used for the same breakpoint * * @example container(min, sm) * @example container(max, sm) */ @layer onyx.utility { :root { --onyx-grid-margin-vertical: var(--onyx-density-3xl); } /** * Grid container base class */ .onyx-grid { display: grid; grid-template-columns: repeat(var(--onyx-grid-columns), minmax(0, 1fr)); gap: var(--onyx-grid-gutter); } /** * Grid container classes for "xl" and "lg" breakpoint variants with 16 or 20 columns * * Needs onyx-grid-* to override the --onyx-grid-columns */ @container (min-width: 1441px) { .onyx-grid.onyx-grid-xl-20, .onyx-grid.onyx-grid-lg-16, .onyx-grid-layout.onyx-grid-xl-20, .onyx-grid-layout.onyx-grid-lg-16, .onyx-grid-container.onyx-grid-xl-20, .onyx-grid-container.onyx-grid-lg-16 { --onyx-grid-columns: 16; } } @container (min-width: 1921px) { .onyx-grid.onyx-grid-xl-20, .onyx-grid-layout.onyx-grid-xl-20, .onyx-grid-container.onyx-grid-xl-20 { --onyx-grid-columns: 20; } .onyx-grid.onyx-grid-xl-16, .onyx-grid-layout.onyx-grid-xl-16, .onyx-grid-container.onyx-grid-xl-16 { --onyx-grid-columns: 16; } } /** * Both `onyx-grid-container` and `onyx-grid-layout` define the grid variables. * `onyx-grid-layout` additionally applies padding. * * Page class to apply padding, max-width and optional centered. * Is usually placed at the root element of every page. */ .onyx-grid-layout, .onyx-grid-container { max-width: var(--onyx-grid-max-width, 100%); margin-inline: var(--onyx-grid-margin-inline); box-sizing: border-box; transition: max-width 1s; } .onyx-grid-layout { padding: var(--onyx-grid-margin-vertical) var(--onyx-grid-margin); } /** * Utility class to allow optional centering for pages with max width. * Requires a "onyx-grid-max-*" class to be set. * * Must be placed inside the desired container. E.g. on onyx-grid-layout/onyx-grid-container */ .onyx-grid-center { --onyx-grid-margin-inline: auto; } /** * Grid element class for defining how many columns the element spans */ .onyx-grid-span-1 { grid-column-end: span min(1, var(--onyx-grid-columns)); } .onyx-grid-span-2 { grid-column-end: span min(2, var(--onyx-grid-columns)); } .onyx-grid-span-3 { grid-column-end: span min(3, var(--onyx-grid-columns)); } .onyx-grid-span-4 { grid-column-end: span min(4, var(--onyx-grid-columns)); } .onyx-grid-span-5 { grid-column-end: span min(5, var(--onyx-grid-columns)); } .onyx-grid-span-6 { grid-column-end: span min(6, var(--onyx-grid-columns)); } .onyx-grid-span-7 { grid-column-end: span min(7, var(--onyx-grid-columns)); } .onyx-grid-span-8 { grid-column-end: span min(8, var(--onyx-grid-columns)); } .onyx-grid-span-9 { grid-column-end: span min(9, var(--onyx-grid-columns)); } .onyx-grid-span-10 { grid-column-end: span min(10, var(--onyx-grid-columns)); } .onyx-grid-span-11 { grid-column-end: span min(11, var(--onyx-grid-columns)); } .onyx-grid-span-12 { grid-column-end: span min(12, var(--onyx-grid-columns)); } .onyx-grid-span-13 { grid-column-end: span min(13, var(--onyx-grid-columns)); } .onyx-grid-span-14 { grid-column-end: span min(14, var(--onyx-grid-columns)); } .onyx-grid-span-15 { grid-column-end: span min(15, var(--onyx-grid-columns)); } .onyx-grid-span-16 { grid-column-end: span min(16, var(--onyx-grid-columns)); } .onyx-grid-span-17 { grid-column-end: span min(17, var(--onyx-grid-columns)); } .onyx-grid-span-18 { grid-column-end: span min(18, var(--onyx-grid-columns)); } .onyx-grid-span-19 { grid-column-end: span min(19, var(--onyx-grid-columns)); } .onyx-grid-span-20 { grid-column-end: span min(20, var(--onyx-grid-columns)); } /** * Grid element class for spanning the full row width. */ .onyx-grid-span-full { grid-column: 1/span var(--onyx-grid-columns); } /** * Grid element class for defining breakpoint specific column count */ /** * Grid container class for defining breakpoint specific max width * * Must be placed inside the desired container. E.g. on onyx-grid-layout/onyx-grid-container */ :where(:root), .onyx-grid, .onyx-grid-layout, .onyx-grid-container { --onyx-grid-columns: 4; --onyx-grid-gutter: 1rem; --onyx-grid-margin: 1rem; } .onyx-grid-2xs-span-1 { grid-column-end: span min(1, var(--onyx-grid-columns)); } .onyx-grid-2xs-span-2 { grid-column-end: span min(2, var(--onyx-grid-columns)); } .onyx-grid-2xs-span-3 { grid-column-end: span min(3, var(--onyx-grid-columns)); } .onyx-grid-2xs-span-4 { grid-column-end: span min(4, var(--onyx-grid-columns)); } @container (min-width: 577px) { .onyx-grid, .onyx-grid-layout, .onyx-grid-container { --onyx-grid-columns: 8; --onyx-grid-gutter: 1rem; --onyx-grid-margin: 1rem; } .onyx-grid-xs-span-1 { grid-column-end: span min(1, var(--onyx-grid-columns)); } .onyx-grid-xs-span-2 { grid-column-end: span min(2, var(--onyx-grid-columns)); } .onyx-grid-xs-span-3 { grid-column-end: span min(3, var(--onyx-grid-columns)); } .onyx-grid-xs-span-4 { grid-column-end: span min(4, var(--onyx-grid-columns)); } .onyx-grid-xs-span-5 { grid-column-end: span min(5, var(--onyx-grid-columns)); } .onyx-grid-xs-span-6 { grid-column-end: span min(6, var(--onyx-grid-columns)); } .onyx-grid-xs-span-7 { grid-column-end: span min(7, var(--onyx-grid-columns)); } .onyx-grid-xs-span-8 { grid-column-end: span min(8, var(--onyx-grid-columns)); } } @container (min-width: 769px) { .onyx-grid, .onyx-grid-layout, .onyx-grid-container { --onyx-grid-columns: 8; --onyx-grid-gutter: 1.5rem; --onyx-grid-margin: 2rem; } .onyx-grid-sm-span-1 { grid-column-end: span min(1, var(--onyx-grid-columns)); } .onyx-grid-sm-span-2 { grid-column-end: span min(2, var(--onyx-grid-columns)); } .onyx-grid-sm-span-3 { grid-column-end: span min(3, var(--onyx-grid-columns)); } .onyx-grid-sm-span-4 { grid-column-end: span min(4, var(--onyx-grid-columns)); } .onyx-grid-sm-span-5 { grid-column-end: span min(5, var(--onyx-grid-columns)); } .onyx-grid-sm-span-6 { grid-column-end: span min(6, var(--onyx-grid-columns)); } .onyx-grid-sm-span-7 { grid-column-end: span min(7, var(--onyx-grid-columns)); } .onyx-grid-sm-span-8 { grid-column-end: span min(8, var(--onyx-grid-columns)); } } @container (min-width: 993px) { .onyx-grid, .onyx-grid-layout, .onyx-grid-container { --onyx-grid-columns: 12; --onyx-grid-gutter: 1.5rem; --onyx-grid-margin: 4rem; } .onyx-grid-md-span-1 { grid-column-end: span min(1, var(--onyx-grid-columns)); } .onyx-grid-md-span-2 { grid-column-end: span min(2, var(--onyx-grid-columns)); } .onyx-grid-md-span-3 { grid-column-end: span min(3, var(--onyx-grid-columns)); } .onyx-grid-md-span-4 { grid-column-end: span min(4, var(--onyx-grid-columns)); } .onyx-grid-md-span-5 { grid-column-end: span min(5, var(--onyx-grid-columns)); } .onyx-grid-md-span-6 { grid-column-end: span min(6, var(--onyx-grid-columns)); } .onyx-grid-md-span-7 { grid-column-end: span min(7, var(--onyx-grid-columns)); } .onyx-grid-md-span-8 { grid-column-end: span min(8, var(--onyx-grid-columns)); } .onyx-grid-md-span-9 { grid-column-end: span min(9, var(--onyx-grid-columns)); } .onyx-grid-md-span-10 { grid-column-end: span min(10, var(--onyx-grid-columns)); } .onyx-grid-md-span-11 { grid-column-end: span min(11, var(--onyx-grid-columns)); } .onyx-grid-md-span-12 { grid-column-end: span min(12, var(--onyx-grid-columns)); } } @container (min-width: 1441px) { .onyx-grid, .onyx-grid-layout, .onyx-grid-container { --onyx-grid-columns: 12; --onyx-grid-gutter: 2rem; --onyx-grid-margin: 4rem; } .onyx-grid-lg-span-1 { grid-column-end: span min(1, var(--onyx-grid-columns)); } .onyx-grid-lg-span-2 { grid-column-end: span min(2, var(--onyx-grid-columns)); } .onyx-grid-lg-span-3 { grid-column-end: span min(3, var(--onyx-grid-columns)); } .onyx-grid-lg-span-4 { grid-column-end: span min(4, var(--onyx-grid-columns)); } .onyx-grid-lg-span-5 { grid-column-end: span min(5, var(--onyx-grid-columns)); } .onyx-grid-lg-span-6 { grid-column-end: span min(6, var(--onyx-grid-columns)); } .onyx-grid-lg-span-7 { grid-column-end: span min(7, var(--onyx-grid-columns)); } .onyx-grid-lg-span-8 { grid-column-end: span min(8, var(--onyx-grid-columns)); } .onyx-grid-lg-span-9 { grid-column-end: span min(9, var(--onyx-grid-columns)); } .onyx-grid-lg-span-10 { grid-column-end: span min(10, var(--onyx-grid-columns)); } .onyx-grid-lg-span-11 { grid-column-end: span min(11, var(--onyx-grid-columns)); } .onyx-grid-lg-span-12 { grid-column-end: span min(12, var(--onyx-grid-columns)); } } .onyx-grid-max-md { --onyx-grid-max-width: 1440px; } @container (min-width: 1921px) { .onyx-grid, .onyx-grid-layout, .onyx-grid-container { --onyx-grid-columns: 12; --onyx-grid-gutter: 2rem; --onyx-grid-margin: 4rem; } .onyx-grid-xl-span-1 { grid-column-end: span min(1, var(--onyx-grid-columns)); } .onyx-grid-xl-span-2 { grid-column-end: span min(2, var(--onyx-grid-columns)); } .onyx-grid-xl-span-3 { grid-column-end: span min(3, var(--onyx-grid-columns)); } .onyx-grid-xl-span-4 { grid-column-end: span min(4, var(--onyx-grid-columns)); } .onyx-grid-xl-span-5 { grid-column-end: span min(5, var(--onyx-grid-columns)); } .onyx-grid-xl-span-6 { grid-column-end: span min(6, var(--onyx-grid-columns)); } .onyx-grid-xl-span-7 { grid-column-end: span min(7, var(--onyx-grid-columns)); } .onyx-grid-xl-span-8 { grid-column-end: span min(8, var(--onyx-grid-columns)); } .onyx-grid-xl-span-9 { grid-column-end: span min(9, var(--onyx-grid-columns)); } .onyx-grid-xl-span-10 { grid-column-end: span min(10, var(--onyx-grid-columns)); } .onyx-grid-xl-span-11 { grid-column-end: span min(11, var(--onyx-grid-columns)); } .onyx-grid-xl-span-12 { grid-column-end: span min(12, var(--onyx-grid-columns)); } .onyx-grid-xl-span-17 { grid-column-end: span min(17, var(--onyx-grid-columns)); } .onyx-grid-xl-span-18 { grid-column-end: span min(18, var(--onyx-grid-columns)); } .onyx-grid-xl-span-19 { grid-column-end: span min(19, var(--onyx-grid-columns)); } .onyx-grid-xl-span-20 { grid-column-end: span min(20, var(--onyx-grid-columns)); } } .onyx-grid-max-lg { --onyx-grid-max-width: 1920px; } /** * SIDEBAR GRID */ .onyx-sidebar { --onyx-grid-margin-vertical: var(--onyx-density-md); container-type: inline-size; } @container (min-width: 0px) { .onyx-sidebar .onyx-grid, .onyx-sidebar .onyx-grid-layout, .onyx-sidebar .onyx-grid-container { --onyx-grid-columns: 1; --onyx-grid-gutter: 0.5rem; --onyx-grid-margin: 0.5rem; } .onyx-sidebar .onyx-grid-xs-span-1 { grid-column-end: span min(1, var(--onyx-grid-columns)); } } @container (min-width: 200px) { .onyx-sidebar .onyx-grid, .onyx-sidebar .onyx-grid-layout, .onyx-sidebar .onyx-grid-container { --onyx-grid-columns: 2; --onyx-grid-gutter: 1rem; --onyx-grid-margin: 1rem; } .onyx-sidebar .onyx-grid-sm-span-1 { grid-column-end: span min(1, var(--onyx-grid-columns)); } .onyx-sidebar .onyx-grid-sm-span-2 { grid-column-end: span min(2, var(--onyx-grid-columns)); } } @container (min-width: 328px) { .onyx-sidebar .onyx-grid, .onyx-sidebar .onyx-grid-layout, .onyx-sidebar .onyx-grid-container { --onyx-grid-columns: 4; --onyx-grid-gutter: 1rem; --onyx-grid-margin: 1rem; } .onyx-sidebar .onyx-grid-md-span-1 { grid-column-end: span min(1, var(--onyx-grid-columns)); } .onyx-sidebar .onyx-grid-md-span-2 { grid-column-end: span min(2, var(--onyx-grid-columns)); } .onyx-sidebar .onyx-grid-md-span-3 { grid-column-end: span min(3, var(--onyx-grid-columns)); } .onyx-sidebar .onyx-grid-md-span-4 { grid-column-end: span min(4, var(--onyx-grid-columns)); } } @container (min-width: 656px) { .onyx-sidebar .onyx-grid, .onyx-sidebar .onyx-grid-layout, .onyx-sidebar .onyx-grid-container { --onyx-grid-columns: 8; --onyx-grid-gutter: 1.5rem; --onyx-grid-margin: 2rem; } .onyx-sidebar .onyx-grid-lg-span-1 { grid-column-end: span min(1, var(--onyx-grid-columns)); } .onyx-sidebar .onyx-grid-lg-span-2 { grid-column-end: span min(2, var(--onyx-grid-columns)); } .onyx-sidebar .onyx-grid-lg-span-3 { grid-column-end: span min(3, var(--onyx-grid-columns)); } .onyx-sidebar .onyx-grid-lg-span-4 { grid-column-end: span min(4, var(--onyx-grid-columns)); } .onyx-sidebar .onyx-grid-lg-span-5 { grid-column-end: span min(5, var(--onyx-grid-columns)); } .onyx-sidebar .onyx-grid-lg-span-6 { grid-column-end: span min(6, var(--onyx-grid-columns)); } .onyx-sidebar .onyx-grid-lg-span-7 { grid-column-end: span min(7, var(--onyx-grid-columns)); } .onyx-sidebar .onyx-grid-lg-span-8 { grid-column-end: span min(8, var(--onyx-grid-columns)); } } .onyx-sidebar .onyx-grid-max-md { --onyx-grid-max-width: 655px; } @container (min-width: 992px) { .onyx-sidebar .onyx-grid, .onyx-sidebar .onyx-grid-layout, .onyx-sidebar .onyx-grid-container { --onyx-grid-columns: 12; --onyx-grid-gutter: 1.5rem; --onyx-grid-margin: 4rem; } .onyx-sidebar .onyx-grid-xl-span-1 { grid-column-end: span min(1, var(--onyx-grid-columns)); } .onyx-sidebar .onyx-grid-xl-span-2 { grid-column-end: span min(2, var(--onyx-grid-columns)); } .onyx-sidebar .onyx-grid-xl-span-3 { grid-column-end: span min(3, var(--onyx-grid-columns)); } .onyx-sidebar .onyx-grid-xl-span-4 { grid-column-end: span min(4, var(--onyx-grid-columns)); } .onyx-sidebar .onyx-grid-xl-span-5 { grid-column-end: span min(5, var(--onyx-grid-columns)); } .onyx-sidebar .onyx-grid-xl-span-6 { grid-column-end: span min(6, var(--onyx-grid-columns)); } .onyx-sidebar .onyx-grid-xl-span-7 { grid-column-end: span min(7, var(--onyx-grid-columns)); } .onyx-sidebar .onyx-grid-xl-span-8 { grid-column-end: span min(8, var(--onyx-grid-columns)); } .onyx-sidebar .onyx-grid-xl-span-9 { grid-column-end: span min(9, var(--onyx-grid-columns)); } .onyx-sidebar .onyx-grid-xl-span-10 { grid-column-end: span min(10, var(--onyx-grid-columns)); } .onyx-sidebar .onyx-grid-xl-span-11 { grid-column-end: span min(11, var(--onyx-grid-columns)); } .onyx-sidebar .onyx-grid-xl-span-12 { grid-column-end: span min(12, var(--onyx-grid-columns)); } } .onyx-sidebar .onyx-grid-max-lg { --onyx-grid-max-width: 991px; } /** * Sets grid variables on root based on viewport size, * providing the properties for elements outside of container-queries e.g. popovers, dialogs */ @media screen and (min-width: 320px) { :where(:root) { --onyx-grid-columns: 4; --onyx-grid-gutter: 1rem; --onyx-grid-margin: 1rem; } } @media screen and (min-width: 577px) { :where(:root) { --onyx-grid-columns: 8; --onyx-grid-gutter: 1rem; --onyx-grid-margin: 1rem; } } @media screen and (min-width: 769px) { :where(:root) { --onyx-grid-columns: 8; --onyx-grid-gutter: 1.5rem; --onyx-grid-margin: 2rem; } } @media screen and (min-width: 993px) { :where(:root) { --onyx-grid-columns: 12; --onyx-grid-gutter: 1.5rem; --onyx-grid-margin: 4rem; } } @media screen and (min-width: 1441px) { :where(:root) { --onyx-grid-columns: 12; --onyx-grid-gutter: 2rem; --onyx-grid-margin: 4rem; } } @media screen and (min-width: 1921px) { :where(:root) { --onyx-grid-columns: 12; --onyx-grid-gutter: 2rem; --onyx-grid-margin: 4rem; } } } :root { --onyx-z-index-app-overlay: 60; --onyx-z-index-navigation: 50; --onyx-z-index-page-overlay: 40; --onyx-z-index-notification: 30; --onyx-z-index-sticky-content: 20; --onyx-z-index-flyout: 10; } @layer onyx.utility { :root { --ON: initial; --OFF: ; } /* default */ :root, .onyx-use-required { --onyx-use-required: var(--ON); --onyx-use-optional: var(--OFF); } .onyx-use-optional { --onyx-use-required: var(--OFF); --onyx-use-optional: var(--ON); } .onyx-required-marker::after { font-family: var(--onyx-use-required, var(--onyx-font-family-paragraph)); content: var(--onyx-use-required, "*"); color: var(--onyx-use-required, var(--onyx-color-text-icons-danger-intense)); padding-left: var(--onyx-use-required, var(--onyx-spacing-5xs)); } .onyx-optional-marker::after { font-family: var(--onyx-use-optional, var(--onyx-font-family-paragraph)); font-weight: var(--onyx-use-optional, 400); font-style: var(--onyx-use-optional, normal); content: var(--onyx-use-optional, var(--onyx-global-optional-text, "(optional)")); color: var(--onyx-use-optional, var(--onyx-color-text-icons-neutral-soft)); padding-left: var(--onyx-use-optional, var(--onyx-density-xs)); hyphens: var(--onyx-use-optional, none); } } @layer onyx.utility { .onyx-text { font-weight: var(--onyx-font-weight-regular); font-size: var(--onyx-font-size-md); line-height: var(--onyx-font-line-height-md); text-wrap: balance; } .onyx-text--small { font-size: var(--onyx-font-size-sm); line-height: var(--onyx-font-line-height-sm); } .onyx-text--large { font-size: var(--onyx-font-size-lg); line-height: var(--onyx-font-line-height-lg); } .onyx-text--monospace { font-family: var(--onyx-font-family-mono); } .onyx-truncation-ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .onyx-truncation-multiline { overflow-wrap: anywhere; hyphens: auto; } } /** * Do not edit directly. * This file contains the specific variables for the "value" theme. * Imported from Figma API on Fri, 24 Apr 2026 13:30:34 GMT */ :where(:root), .onyx-theme-default { --onyx-color-digits-mint-100: #e8fcfc; --onyx-color-digits-mint-200: #c2e8ee; --onyx-color-digits-mint-300: #96d7e2; --onyx-color-digits-mint-400: #75c7d5; --onyx-color-digits-mint-500: #3bbdce; --onyx-color-digits-mint-600: #00b0bf; --onyx-color-digits-mint-700: #00a5b0; --onyx-color-digits-mint-800: #0099a5; --onyx-color-digits-mint-900: #008291; --onyx-color-digits-mint-1000: #006975; --onyx-color-digits-mint-1100: #00535d; --onyx-color-digits-mint-1200: #003b42; --onyx-color-digits-orange-100: #ffebdd; --onyx-color-digits-orange-200: #ffd6bc; --onyx-color-digits-orange-300: #ffc199; --onyx-color-digits-orange-400: #ffac75; --onyx-color-digits-orange-500: #ff954d; --onyx-color-digits-orange-600: #ff7d00; --onyx-color-digits-orange-700: #d66800; --onyx-color-digits-orange-800: #ae5300; --onyx-color-digits-orange-900: #873f00; --onyx-color-digits-orange-1000: #632c00; --onyx-color-digits-orange-1100: #411b00; --onyx-color-digits-orange-1200: #220b00; --onyx-color-kaufland-gray-100: #f5f5f5; --onyx-color-kaufland-gray-200: #f0f0f0; --onyx-color-kaufland-gray-300: #e8e8e8; --onyx-color-kaufland-gray-400: #d3d3d3; --onyx-color-kaufland-gray-500: #b8b8b8; --onyx-color-kaufland-gray-600: #8d8d8d; --onyx-color-kaufland-gray-700: #7f7f7f; --onyx-color-kaufland-gray-800: #757575; --onyx-color-kaufland-gray-900: #676767; --onyx-color-kaufland-gray-1000: #424242; --onyx-color-kaufland-gray-1100: #363636; --onyx-color-kaufland-gray-1200: #252525; --onyx-color-kaufland-red-100: #fdf3f4; --onyx-color-kaufland-red-200: #ffe3e5; --onyx-color-kaufland-red-300: #ffc5c9; --onyx-color-kaufland-red-400: #ff9aa1; --onyx-color-kaufland-red-500: #fd5d67; --onyx-color-kaufland-red-600: #e10915; --onyx-color-kaufland-red-700: #c7000d; --onyx-color-kaufland-red-800: #a8000b; --onyx-color-kaufland-red-900: #8b0009; --onyx-color-kaufland-red-1000: #730007; --onyx-color-kaufland-red-1100: #5e0006; --onyx-color-kaufland-red-1200: #4a0005; --onyx-color-lidl-blue-100: #f0f7ff; --onyx-color-lidl-blue-200: #c2dfff; --onyx-color-lidl-blue-300: #61b5e8; --onyx-color-lidl-blue-400: #008cd2; --onyx-color-lidl-blue-500: #0050aa; --onyx-color-lidl-blue-600: #024897; --onyx-color-lidl-blue-700: #03438c; --onyx-color-lidl-blue-800: #043d7e; --onyx-color-lidl-blue-900: #002466; --onyx-color-lidl-blue-1000: #04204d; --onyx-color-lidl-blue-1100: #081c34; --onyx-color-lidl-blue-1200: #09111d; --onyx-color-neutral-carbon-100: #fcfcfc; --onyx-color-neutral-carbon-200: #f0f0f0; --onyx-color-neutral-carbon-300: #e1e1e1; --onyx-color-neutral-carbon-400: #c5c5c5; --onyx-color-neutral-carbon-500: #aaaaaa; --onyx-color-neutral-carbon-600: #858585; --onyx-color-neutral-carbon-700: #6d6d6d; --onyx-color-neutral-carbon-800: #5c5c5c; --onyx-color-neutral-carbon-900: #4b4b4b; --onyx-color-neutral-carbon-1000: #3a3a3a; --onyx-color-neutral-carbon-1100: #2a2a2a; --onyx-color-neutral-carbon-1200: #191919; --onyx-color-neutral-grayscale-black: #000000; --onyx-color-neutral-grayscale-white: #ffffff; --onyx-color-neutral-steel-100: #fafbfc; --onyx-color-neutral-steel-200: #e3eaf0; --onyx-color-neutral-steel-300: #c9d6e0; --onyx-color-neutral-steel-400: #9db3c4; --onyx-color-neutral-steel-500: #7392aa; --onyx-color-neutral-steel-600: #506e84; --onyx-color-neutral-steel-700: #3e596e; --onyx-color-neutral-steel-800: #31495c; --onyx-color-neutral-steel-900: #22384a; --onyx-color-neutral-steel-1000: #11212d; --onyx-color-neutral-steel-1100: #081723; --onyx-color-neutral-steel-1200: #000e19; --onyx-color-neutral-stone-100: #fafbfc; --onyx-color-neutral-stone-200: #eaedf0; --onyx-color-neutral-stone-300: #d8dde1; --onyx-color-neutral-stone-400: #b7bfc5; --onyx-color-neutral-stone-500: #95a1aa; --onyx-color-neutral-stone-600: #697985; --onyx-color-neutral-stone-700: #52626d; --onyx-color-neutral-stone-800: #42515c; --onyx-color-neutral-stone-900: #31414b; --onyx-color-neutral-stone-1000: #21303a; --onyx-color-neutral-stone-1100: #10202a; --onyx-color-neutral-stone-1200: #000f19; --onyx-color-onyx-100: #e8fcfc; --onyx-color-onyx-200: #bbeaed; --onyx-color-onyx-300: #79dde2; --onyx-color-onyx-400: #3dd0d8; --onyx-color-onyx-500: #00c3cd; --onyx-color-onyx-600: #00adb5; --onyx-color-onyx-700: #00969d; --onyx-color-onyx-800: #008085; --onyx-color-onyx-900: #00696e; --onyx-color-onyx-1000: #005356; --onyx-color-onyx-1100: #003c3e; --onyx-color-onyx-1200: #002626; --onyx-color-opacity-backdrop-250: #0000003f; --onyx-color-opacity-backdrop-450: #00000072; --onyx-color-opacity-backdrop-600: #00000099; --onyx-color-opacity-backdrop-800: #000000cc; --onyx-color-prezero-bright-green-100: #edfad4; --onyx-color-prezero-bright-green-200: #dcf4a6; --onyx-color-prezero-bright-green-300: #cced71; --onyx-color-prezero-bright-green-400: #bce514; --onyx-color-prezero-bright-green-500: #a3c710; --onyx-color-prezero-bright-green-600: #8baa0c; --onyx-color-prezero-bright-green-700: #738e08; --onyx-color-prezero-bright-green-800: #5d7205; --onyx-color-prezero-bright-green-900: #475803; --onyx-color-prezero-bright-green-1000: #323f01; --onyx-color-prezero-bright-green-1100: #1f2801; --onyx-color-prezero-bright-green-1200: #0d1200; --onyx-color-prezero-petrol-100: #e5eaeb; --onyx-color-prezero-petrol-200: #cbd5d8; --onyx-color-prezero-petrol-300: #b2c1c5; --onyx-color-prezero-petrol-400: #99adb2; --onyx-color-prezero-petrol-500: #8099a0; --onyx-color-prezero-petrol-600: #68868d; --onyx-color-prezero-petrol-700: #51737c; --onyx-color-prezero-petrol-800: #39606a; --onyx-color-prezero-petrol-900: #214e59; --onyx-color-prezero-petrol-1000: #003d49; --onyx-color-prezero-petrol-1100: #00262f; --onyx-color-prezero-petrol-1200: #001217; --onyx-color-prezero-teal-100: #e4f1e9; --onyx-color-prezero-teal-200: #cae3d2; --onyx-color-prezero-teal-300: #afd5bd; --onyx-color-prezero-teal-400: #94c7a7; --onyx-color-prezero-teal-500: #79b992; --onyx-color-prezero-teal-600: #679e7c; --onyx-color-prezero-teal-700: #558367; --onyx-color-prezero-teal-800: #436a52; --onyx-color-prezero-teal-900: #33513f; --onyx-color-prezero-teal-1000: #233a2c; --onyx-color-prezero-teal-1100: #14241b; --onyx-color-prezero-teal-1200: #07100a; --onyx-color-quantitatives-100: #005795; --onyx-color-quantitatives-150: #004475; --onyx-color-quantitatives-200: #ff8a25; --onyx-color-quantitatives-250: #c65f06; --onyx-color-quantitatives-300: #e51718; --onyx-color-quantitatives-350: #b70b0c; --onyx-color-quantitatives-400: #36b16b; --onyx-color-quantitatives-450: #22874e; --onyx-color-quantitatives-500: #56d8fc; --onyx-color-quantitatives-550: #1ea2c6; --onyx-color-quantitatives-600: #ff9990; --onyx-color-quantitatives-650: #d15146; --onyx-color-quantitatives-700: #ff3fd1; --onyx-color-quantitatives-750: #bd0e93; --onyx-color-quantitatives-800: #3c6475; --onyx-color-quantitatives-850: #51849c; --onyx-color-quantitatives-900: #c4bc81; --onyx-color-quantitatives-950: #9c955d; --onyx-color-quantitatives-1000: #c3143f; --onyx-color-quantitatives-1050: #f03b68; --onyx-color-quantitatives-1100: #a09dfa; --onyx-color-quantitatives-1150: #5551ce; --onyx-color-quantitatives-1200: #00bcc6; --onyx-color-quantitatives-1250: #018a91; --onyx-color-schwarz-blue-100: #ebf1fe; --onyx-color-schwarz-blue-200: #c5d4fc; --onyx-color-schwarz-blue-300: #94adf3; --onyx-color-schwarz-blue-400: #6a8bef; --onyx-color-schwarz-blue-500: #4a6be8; --onyx-color-schwarz-blue-600: #3e58ba; --onyx-color-schwarz-blue-700: #2a3f90; --onyx-color-schwarz-blue-800: #203274; --onyx-color-schwarz-blue-900: #172559; --onyx-color-schwarz-blue-1000: #0e1840; --onyx-color-schwarz-blue-1100: #060d29; --onyx-color-schwarz-blue-1200: #020413; --onyx-color-schwarz-lemon-100: #fcfff0; --onyx-color-schwarz-lemon-200: #f5ffcc; --onyx-color-schwarz-lemon-300: #f1ffad; --onyx-color-schwarz-lemon-400: #eaff70; --onyx-color-schwarz-lemon-500: #e5ff29; --onyx-color-schwarz-lemon-600: #c7de22; --onyx-color-schwarz-lemon-700: #9db015; --onyx-color-schwarz-lemon-800: #72800f; --onyx-color-schwarz-lemon-900: #586309; --onyx-color-schwarz-lemon-1000: #3f4805; --onyx-color-schwarz-lemon-1100: #282e02; --onyx-color-schwarz-lemon-1200: #121601; --onyx-color-schwarz-lime-100: #effcef; --onyx-color-schwarz-lime-200: #d5f5d6; --onyx-color-schwarz-lime-300: #b8f3bc; --onyx-color-schwarz-lime-400: #85e890; --onyx-color-schwarz-lime-500: #32dc5a; --onyx-color-schwarz-lime-600: #2abf4d; --onyx-color-schwarz-lime-700: #1c9a3a; --onyx-color-schwarz-lime-800: #146e29; --onyx-color-schwarz-lime-900: #0d541e; --onyx-color-schwarz-lime-1000: #073c13; --onyx-color-schwarz-lime-1100: #032609; --onyx-color-schwarz-lime-1200: #011103; --onyx-color-system-green-100: #ecf8f2; --onyx-color-system-green-200: #c6e4d5; --onyx-color-system-green-300: #98d1b3; --onyx-color-system-green-400: #6ebe94; --onyx-color-system-green-500: #44aa75; --onyx-color-system-green-600: #3b9b69; --onyx-color-system-green-700: #328c5e; --onyx-color-system-green-800: #297d52; --onyx-color-system-green-900: #216d46; --onyx-color-system-green-1000: #185e3a; --onyx-color-system-green-1100: #0f4f2f; --onyx-color-system-green-1200: #064023; --onyx-color-system-orange-100: #faf6f2; --onyx-color-system-orange-200: #f8e7d7; --onyx-color-system-orange-300: #f6d1b1; --onyx-color-system-orange-400: #f4b57e; --onyx-color-system-orange-500: #f2994a; --onyx-color-system-orange-600: #d98841; --onyx-color-system-orange-700: #bf7737; --onyx-color-system-orange-800: #a6662e; --onyx-color-system-orange-900: #8c5625; --onyx-color-system-orange-1000: #73451c; --onyx-color-system-orange-1100: #593412; --onyx-color-system-orange-1200: #402309; --onyx-color-system-purple-100: #f4f1f8; --onyx-color-system-purple-200: #dbcfea; --onyx-color-system-purple-300: #c2addc; --onyx-color-system-purple-400: #a98ace; --onyx-color-system-purple-500: #9068c0; --onyx-color-system-purple-600: #805aae; --onyx-color-system-purple-700: #704c9b; --onyx-color-system-purple-800: #603e89; --onyx-color-system-purple-900: #513077; --onyx-color-system-purple-1000: #412265; --onyx-color-system-purple-1100: #311452; --onyx-color-system-purple-1200: #210640; --onyx-color-system-red-100: #fbefee; --onyx-color-system-red-200: #f1d2d1; --onyx-color-system-red-300: #e6a7a5; --onyx-color-system-red-400: #dc706e; --onyx-color-system-red-500: #d1332f; --onyx-color-system-red-600: #bc2d2a; --onyx-color-system-red-700: #a82824; --onyx-color-system-red-800: #93221f; --onyx-color-system-red-900: #7e1d19; --onyx-color-system-red-1000: #691714; --onyx-color-system-red-1100: #55120e; --onyx-color-system-red-1200: #400c09; --onyx-color-tailwind-core-blue-100: #e7e9ec; --onyx-color-tailwind-core-blue-200: #d0d3da; --onyx-color-tailwind-core-blue-300: #b9bec8; --onyx-color-tailwind-core-blue-400: #a3a9b6; --onyx-color-tailwind-core-blue-500: #8d94a5; --onyx-color-tailwind-core-blue-600: #788094; --onyx-color-tailwind-core-blue-700: #646d83; --onyx-color-tailwind-core-blue-800: #505a72; --onyx-color-tailwind-core-blue-900: #3d4861; --onyx-color-tailwind-core-blue-1000: #2b3651; --onyx-color-tailwind-core-blue-1100: #1a2541; --onyx-color-tailwind-core-blue-1200: #0a1432; --onyx-color-tailwind-dynamic-blue-100: #e3fcff; --onyx-color-tailwind-dynamic-blue-200: #c6f9ff; --onyx-color-tailwind-dynamic-blue-300: #a6f5ff; --onyx-color-tailwind-dynamic-blue-400: #80f1ff; --onyx-color-tailwind-dynamic-blue-500: #4dedff; --onyx-color-tailwind-dynamic-blue-600: #42cede; --onyx-color-tailwind-dynamic-blue-700: #37b0be; --onyx-color-tailwind-dynamic-blue-800: #2c939e; --onyx-color-tailwind-dynamic-blue-900: #227780; --onyx-color-tailwind-dynamic-blue-1000: #185c63; --onyx-color-tailwind-dynamic-blue-1100: #0f4248; --onyx-color-tailwind-dynamic-blue-1200: #072a2e; --onyx-color-tailwind-green-100: #e5ffdd; --onyx-color-tailwind-green-200: #c9ffba; --onyx-color-tailwind-green-300: #acff93; --onyx-color-tailwind-green-400: #8bff65; --onyx-color-tailwind-green-500: #61ff00; --onyx-color-tailwind-green-600: #53de00; --onyx-color-tailwind-green-700: #46be00; --onyx-color-tailwind-green-800: #399e00; --onyx-color-tailwind-green-900: #2d8000; --onyx-color-tailwind-green-1000: #216300; --onyx-color-tailwind-green-1100: #154800; --onyx-color-tailwind-green-1200: #0b2e00; --onyx-color-tailwind-orange-100: #ffecde; --onyx-color-tailwind-orange-200: #ffd9bc; --onyx-color-tailwind-orange-300: #fdc69a; --onyx-color-tailwind-orange-400: #fbb277; --onyx-color-tailwind-orange-500: #f89d4f; --onyx-color-tailwind-orange-600: #f48809; --onyx-color-tailwind-orange-700: #cc7106; --onyx-color-tailwind-orange-800: #a65b04; --onyx-color-tailwind-orange-900: #814502; --onyx-color-tailwind-orange-1000: #5e3101; --onyx-color-tailwind-orange-1100: #3e1e00; --onyx-color-tailwind-orange-1200: #200c00; --onyx-color-tailwind-smart-blue-100: #dee7f7; --onyx-color-tailwind-smart-blue-200: #becfee; --onyx-color-tailwind-smart-blue-300: #9eb7e5; --onyx-color-tailwind-smart-blue-400: #7f9fdb; --onyx-color-tailwind-smart-blue-500: #6087d0; --onyx-color-tailwind-smart-blue-600: #436fc5; --onyx-color-tailwind-smart-blue-700: #2456b9; --onyx-color-tailwind-smart-blue-800: #003aad; --onyx-color-tailwind-smart-blue-900: #002f90; --onyx-color-tailwind-smart-blue-1000: #002475; --onyx-color-tailwind-smart-blue-1100: #001a5a; --onyx-color-tailwind-smart-blue-1200: #001041; --onyx-color-tailwind-yellow-100: #fefdde; --onyx-color-tailwind-yellow-200: #fefbbc; --onyx-color-tailwind-yellow-300: #fef896; --onyx-color-tailwind-yellow-400: #fff468; --onyx-color-tailwind-yellow-500: #fff000; --onyx-color-tailwind-yellow-600: #ded100; --onyx-color-tailwind-yellow-700: #beb200; --onyx-color-tailwind-yellow-800: #9e9500; --onyx-color-tailwind-yellow-900: #807800; --onyx-color-tailwind-yellow-1000: #635d00; --onyx-color-tailwind-yellow-1100: #484300; --onyx-color-tailwind-yellow-1200: #2e2a00; --onyx-font-family-Archivo-Variable: "Archivo Variable"; --onyx-font-family-DIN-2014: "DIN 2014"; --onyx-font-family-Barlow: "Barlow"; --onyx-font-family-Barlow-Semi-Condensed: "Barlow Semi Condensed"; --onyx-font-family-Helsinki: "Helsinki"; --onyx-font-family-Helvetica-Now-Var: "Helvetica Now Var"; --onyx-font-family-IBM-Plex-Sans-Variable: "IBM Plex Sans Variable"; --onyx-font-family-Kaufland: "Kaufland"; --onyx-font-family-Lidl-Font-Pro: "Lidl Font Pro"; --onyx-font-family-Montserrat: "Montserrat"; --onyx-font-family-Source-Code-Pro-Variable: "Source Code Pro Variable"; --onyx-font-family-Source-Sans-3-Variable: "Source Sans 3 Variable"; --onyx-font-family-Univia-Pro: "Univia Pro"; --onyx-font-values-0: 0.75rem; --onyx-font-values-0-spacing: "0%"; --onyx-font-values-100: 0.8125rem; --onyx-font-values-200: 1rem; --onyx-font-values-300: 1.25rem; --onyx-font-values-400: 1.5rem; --onyx-font-values-500: 1.75rem; --onyx-font-values-600: 2.5rem; --onyx-font-weight-300: 300; --onyx-font-weight-400: 400; --onyx-font-weight-500: 500; --onyx-font-weight-600: 600; --onyx-font-weight-700: 700; --onyx-font-weight-800: 800; --onyx-number-radius-100: 0.125rem; --onyx-number-radius-200: 0.25rem; --onyx-number-radius-250: 0.375rem; --onyx-number-radius-300: 0.5rem; --onyx-number-radius-325: 0.625rem; --onyx-number-radius-350: 0.75rem; --onyx-number-radius-375: 0.875rem; --onyx-number-radius-400: 1rem; --onyx-number-radius-450: 1.25rem; --onyx-number-radius-475: 1.5rem; --onyx-number-radius-500: 2rem; --onyx-number-radius-600: 62.5rem; --onyx-number-radius-none: 0rem; --onyx-number-spacing-0: 0rem; --onyx-number-spacing-100: 0.125rem; --onyx-number-spacing-200: 0.25rem; --onyx-number-spacing-250: 0.375rem; --onyx-number-spacing-300: 0.5rem; --onyx-number-spacing-325: 0.625rem; --onyx-number-spacing-350: 0.75rem; --onyx-number-spacing-400: 1rem; --onyx-number-spacing-500: 1.5rem; --onyx-number-spacing-600: 2rem; --onyx-number-spacing-700: 3rem; --onyx-number-spacing-800: 4rem; --onyx-number-spacing-900: 6rem; --onyx-number-spacing-950: 8rem; } /** * Do not edit directly. * This file contains the specific variables for the "onyx" theme. * Imported from Figma API on Fri, 24 Apr 2026 13:30:34 GMT */ :where(:root), .onyx-theme-default { --onyx-color-base-background-blank: light-dark( var(--onyx-color-neutral-grayscale-white), var(--onyx-color-neutral-steel-1100) ); --onyx-color-base-background-tinted: light-dark( var(--onyx-color-neutral-steel-100), var(--onyx-color-neutral-steel-1200) ); --onyx-color-base-danger-100: light-dark( var(--onyx-color-system-red-100), var(--onyx-color-system-red-1100) ); --onyx-color-base-danger-200: light-dark( var(--onyx-color-system-red-200), var(--onyx-color-system-red-1000) ); --onyx-color-base-danger-300: light-dark( var(--onyx-color-system-red-300), var(--onyx-color-system-red-900) ); --onyx-color-base-danger-400: light-dark( var(--onyx-color-system-red-400), var(--onyx-color-system-red-800) ); --onyx-color-base-danger-500: light-dark( var(--onyx-color-system-red-500), var(--onyx-color-system-red-700) ); --onyx-color-base-danger-600: var(--onyx-color-system-red-600); --onyx-color-base-danger-700: light-dark( var(--onyx-color-system-red-700), var(--onyx-color-system-red-500) ); --onyx-color-base-danger-800: light-dark( var(--onyx-color-system-red-800), var(--onyx-color-system-red-400) ); --onyx-color-base-danger-900: light-dark( var(--onyx-color-system-red-900), var(--onyx-color-system-red-300) ); --onyx-color-base-grayscale-black: var(--onyx-color-neutral-grayscale-black); --onyx-color-base-grayscale-white: var(--onyx-color-neutral-grayscale-white); --onyx-color-base-info-100: light-dark( var(--onyx-color-system-purple-100), var(--onyx-color-system-purple-1100) ); --onyx-color-base-info-200: light-dark( var(--onyx-color-system-purple-200), var(--onyx-color-system-purple-1000) ); --onyx-color-base-info-300: light-dark( var(--onyx-color-system-purple-300), var(--onyx-color-system-purple-900) ); --onyx-color-base-info-400: light-dark( var(--onyx-color-system-purple-400), var(--onyx-color-system-purple-800) ); --onyx-color-base-info-500: light-dark( var(--onyx-color-system-purple-500), var(--onyx-color-system-purple-700) ); --onyx-color-base-info-600: var(--onyx-color-system-purple-600); --onyx-color-base-info-700: light-dark( var(--onyx-color-system-purple-700), var(--onyx-color-system-purple-500) ); --onyx-color-base-info-800: light-dark( var(--onyx-color-system-purple-800), var(--onyx-color-system-purple-400) ); --onyx-color-base-info-900: light-dark( var(--onyx-color-system-purple-900), var(--onyx-color-system-purple-300) ); --onyx-color-base-neutral-100: light-dark( var(--onyx-color-neutral-steel-100), var(--onyx-color-neutral-steel-1100) ); --onyx-color-base-neutral-200: light-dark( var(--onyx-color-neutral-steel-200), var(--onyx-color-neutral-steel-1000) ); --onyx-color-base-neutral-300: light-dark( var(--onyx-color-neutral-steel-300), var(--onyx-color-neutral-steel-900) ); --onyx-color-base-neutral-400: light-dark( var(--onyx-color-neutral-steel-400), var(--onyx-color-neutral-steel-800) ); --onyx-color-base-neutral-500: light-dark( var(--onyx-color-neutral-steel-500), var(--onyx-color-neutral-steel-700) ); --onyx-color-base-neutral-600: var(--onyx-color-neutral-steel-600); --onyx-color-base-neutral-700: light-dark( var(--onyx-color-neutral-steel-700), var(--onyx-color-neutral-steel-500) ); --onyx-color-base-neutral-800: light-dark( var(--onyx-color-neutral-steel-800), var(--onyx-color-neutral-steel-400) ); --onyx-color-base-neutral-900: light-dark( var(--onyx-color-neutral-steel-900), var(--onyx-color-neutral-steel-300) ); --onyx-color-base-primary-100: light-dark( var(--onyx-color-onyx-100), var(--onyx-color-onyx-1100) ); --onyx-color-base-primary-200: light-dark( var(--onyx-color-onyx-200), var(--onyx-color-onyx-1000) ); --onyx-color-base-primary-300: light-dark(var(--onyx-color-onyx-300), var(--onyx-color-onyx-900)); --onyx-color-base-primary-400: light-dark(var(--onyx-color-onyx-400), var(--onyx-color-onyx-800)); --onyx-color-base-primary-500: light-dark(var(--onyx-color-onyx-500), var(--onyx-color-onyx-700)); --onyx-color-base-primary-600: var(--onyx-color-onyx-600); --onyx-color-base-primary-700: light-dark(var(--onyx-color-onyx-700), var(--onyx-color-onyx-500)); --onyx-color-base-primary-800: light-dark(var(--onyx-color-onyx-800), var(--onyx-color-onyx-400)); --onyx-color-base-primary-900: light-dark(var(--onyx-color-onyx-900), var(--onyx-color-onyx-300)); --onyx-color-base-quantitatives-100: light-dark( var(--onyx-color-quantitatives-100), var(--onyx-color-quantitatives-150) ); --onyx-color-base-quantitatives-200: light-dark( var(--onyx-color-quantitatives-200), var(--onyx-color-quantitatives-250) ); --onyx-color-base-quantitatives-300: light-dark( var(--onyx-color-quantitatives-300), var(--onyx-color-quantitatives-350) ); --onyx-color-base-quantitatives-400: light-dark( var(--onyx-color-quantitatives-400), var(--onyx-color-quantitatives-450) ); --onyx-color-base-quantitatives-500: light-dark( var(--onyx-color-quantitatives-500), var(--onyx-color-quantitatives-550) ); --onyx-color-base-quantitatives-600: light-dark( var(--onyx-color-quantitatives-600), var(--onyx-color-quantitatives-650) ); --onyx-color-base-quantitatives-700: light-dark( var(--onyx-color-quantitatives-700), var(--onyx-color-quantitatives-750) ); --onyx-color-base-quantitatives-800: light-dark( var(--onyx-color-quantitatives-800), var(--onyx-color-quantitatives-850) ); --onyx-color-base-quantitatives-900: light-dark( var(--onyx-color-quantitatives-900), var(--onyx-color-quantitatives-950) ); --onyx-color-base-quantitatives-1000: light-dark( var(--onyx-color-quantitatives-1000), var(--onyx-color-quantitatives-1050) ); --onyx-color-base-quantitatives-1100: light-dark( var(--onyx-color-quantitatives-1100), var(--onyx-color-quantitatives-1150) ); --onyx-color-base-quantitatives-1200: light-dark( var(--onyx-color-quantitatives-1200), var(--onyx-color-quantitatives-1250) ); --onyx-color-base-secondary-100: light-dark( var(--onyx-color-onyx-100), var(--onyx-color-onyx-1100) ); --onyx-color-base-secondary-200: light-dark( var(--onyx-color-onyx-200), var(--onyx-color-onyx-1000) ); --onyx-color-base-secondary-300: light-dark( var(--onyx-color-onyx-300), var(--onyx-color-onyx-900) ); --onyx-color-base-secondary-400: light-dark( var(--onyx-color-onyx-400), var(--onyx-color-onyx-800) ); --onyx-color-base-secondary-500: light-dark( var(--onyx-color-onyx-500), var(--onyx-color-onyx-700) ); --onyx-color-base-secondary-600: var(--onyx-color-onyx-600); --onyx-color-base-secondary-700: light-dark( var(--onyx-color-onyx-700), var(--onyx-color-onyx-500) ); --onyx-color-base-secondary-800: light-dark( var(--onyx-color-onyx-800), var(--onyx-color-onyx-400) ); --onyx-color-base-secondary-900: light-dark( var(--onyx-color-onyx-900), var(--onyx-color-onyx-300) ); --onyx-color-base-success-100: light-dark( var(--onyx-color-system-green-100), var(--onyx-color-system-green-1100) ); --onyx-color-base-success-200: light-dark( var(--onyx-color-system-green-200), var(--onyx-color-system-green-1000) ); --onyx-color-base-success-300: light-dark( var(--onyx-color-system-green-300), var(--onyx-color-system-green-900) ); --onyx-color-base-success-400: light-dark( var(--onyx-color-system-green-400), var(--onyx-color-system-green-800) ); --onyx-color-base-success-500: light-dark( var(--onyx-color-system-green-500), var(--onyx-color-system-green-700) ); --onyx-color-base-success-600: var(--onyx-color-system-green-600); --onyx-color-base-success-700: light-dark( var(--onyx-color-system-green-700), var(--onyx-color-system-green-500) ); --onyx-color-base-success-800: light-dark( var(--onyx-color-system-green-800), var(--onyx-color-system-green-400) ); --onyx-color-base-success-900: light-dark( var(--onyx-color-system-green-900), var(--onyx-color-system-green-300) ); --onyx-color-base-warning-100: light-dark( var(--onyx-color-system-orange-100), var(--onyx-color-system-orange-1100) ); --onyx-color-base-warning-200: light-dark( var(--onyx-color-system-orange-200), var(--onyx-color-system-orange-1000) ); --onyx-color-base-warning-300: light-dark( var(--onyx-color-system-orange-300), var(--onyx-color-system-orange-900) ); --onyx-color-base-warning-400: light-dark( var(--onyx-color-system-orange-400), var(--onyx-color-system-orange-800) ); --onyx-color-base-warning-500: light-dark( var(--onyx-color-system-orange-500), var(--onyx-color-system-orange-700) ); --onyx-color-base-warning-600: var(--onyx-color-system-orange-600); --onyx-color-base-warning-700: light-dark( var(--onyx-color-system-orange-700), var(--onyx-color-system-orange-500) ); --onyx-color-base-warning-800: light-dark( var(--onyx-color-system-orange-800), var(--onyx-color-system-orange-400) ); --onyx-color-base-warning-900: light-dark( var(--onyx-color-system-orange-900), var(--onyx-color-system-orange-300) ); --onyx-color-component-border-danger: var(--onyx-color-base-danger-500); --onyx-color-component-border-danger-hover: var(--onyx-color-base-danger-400); --onyx-color-component-border-disabled: var(--onyx-color-base-neutral-200); --onyx-color-component-border-neutral: var(--onyx-color-base-neutral-300); --onyx-color-component-border-neutral-hover: var(--onyx-color-base-neutral-400); --onyx-color-component-border-primary: var(--onyx-color-base-primary-500); --onyx-color-component-border-primary-hover: var(--onyx-color-base-primary-400); --onyx-color-component-border-success: var(--onyx-color-base-success-500); --onyx-color-component-border-success-hover: var(--onyx-color-base-success-400); --onyx-color-component-cta-danger: var(--onyx-color-base-danger-500); --onyx-color-component-cta-danger-hover: var(--onyx-color-base-danger-400); --onyx-color-component-cta-default: var(--onyx-color-base-primary-500); --onyx-color-component-cta-default-hover: light-dark( var(--onyx-color-base-primary-300), var(--onyx-color-base-primary-400) ); --onyx-color-component-cta-disabled: var(--onyx-color-base-neutral-200); --onyx-color-component-focus-danger: var(--onyx-color-base-danger-300); --onyx-color-component-focus-neutral: light-dark( var(--onyx-color-base-neutral-200), var(--onyx-color-base-neutral-500) ); --onyx-color-component-focus-primary: var(--onyx-color-base-primary-200); --onyx-color-component-focus-success: var(--onyx-color-base-success-200); --onyx-color-component-focus-warning: var(--onyx-color-base-warning-200); --onyx-color-component-nav-label: var(--onyx-color-text-icons-primary-intense); --onyx-color-component-nav-stroke: light-dark( var(--onyx-color-base-primary-500), var(--onyx-color-base-primary-700) ); --onyx-color-component-opacity-backdrop-medium: light-dark( var(--onyx-color-opacity-backdrop-600), var(--onyx-color-opacity-backdrop-800) ); --onyx-color-component-opacity-backdrop-soft: light-dark( var(--onyx-color-opacity-backdrop-250), var(--onyx-color-opacity-backdrop-450) ); --onyx-color-text-icons-danger-bold: light-dark( var(--onyx-color-system-red-700), var(--onyx-color-system-red-400) ); --onyx-color-text-icons-danger-intense: var(--onyx-color-system-red-500); --onyx-color-text-icons-danger-medium: light-dark( var(--onyx-color-system-red-300), var(--onyx-color-system-red-700) ); --onyx-color-text-icons-danger-soft: light-dark( var(--onyx-color-system-red-200), var(--onyx-color-system-red-900) ); --onyx-color-text-icons-info-bold: light-dark( var(--onyx-color-system-purple-700), var(--onyx-color-system-purple-400) ); --onyx-color-text-icons-info-intense: var(--onyx-color-system-purple-500); --onyx-color-text-icons-info-medium: light-dark( var(--onyx-color-system-purple-300), var(--onyx-color-system-purple-700) ); --onyx-color-text-icons-info-soft: light-dark( var(--onyx-color-system-purple-200), var(--onyx-color-system-purple-900) ); --onyx-color-text-icons-neutral-button: var(--onyx-color-neutral-grayscale-white); --onyx-color-text-icons-neutral-intense: light-dark( var(--onyx-color-neutral-stone-900), var(--onyx-color-neutral-stone-200) ); --onyx-color-text-icons-neutral-inverted: light-dark( var(--onyx-color-neutral-grayscale-white), var(--onyx-color-neutral-stone-1200) ); --onyx-color-text-icons-neutral-medium: light-dark( var(--onyx-color-neutral-stone-600), var(--onyx-color-neutral-stone-400) ); --onyx-color-text-icons-neutral-soft: light-dark( var(--onyx-color-neutral-stone-500), var(--onyx-color-neutral-stone-600) ); --onyx-color-text-icons-primary-bold: light-dark( var(--onyx-color-onyx-700), var(--onyx-color-onyx-400) ); --onyx-color-text-icons-primary-intense: var(--onyx-color-onyx-500); --onyx-color-text-icons-primary-medium: light-dark( var(--onyx-color-onyx-300), var(--onyx-color-onyx-700) ); --onyx-color-text-icons-primary-soft: light-dark( var(--onyx-color-onyx-200), var(--onyx-color-onyx-900) ); --onyx-color-text-icons-secondary-bold: light-dark( var(--onyx-color-onyx-700), var(--onyx-color-onyx-400) ); --onyx-color-text-icons-secondary-intense: var(--onyx-color-onyx-500); --onyx-color-text-icons-secondary-medium: light-dark( var(--onyx-color-onyx-300), var(--onyx-color-onyx-700) ); --onyx-color-text-icons-secondary-soft: light-dark( var(--onyx-color-onyx-200), var(--onyx-color-onyx-900) ); --onyx-color-text-icons-success-bold: light-dark( var(--onyx-color-system-green-700), var(--onyx-color-system-green-400) ); --onyx-color-text-icons-success-intense: var(--onyx-color-system-green-500); --onyx-color-text-icons-success-medium: light-dark( var(--onyx-color-system-green-300), var(--onyx-color-system-green-700) ); --onyx-color-text-icons-success-soft: light-dark( var(--onyx-color-system-green-200), var(--onyx-color-system-green-900) ); --onyx-color-text-icons-warning-bold: light-dark( var(--onyx-color-system-orange-700), var(--onyx-color-system-orange-400) ); --onyx-color-text-icons-warning-intense: var(--onyx-color-system-orange-500); --onyx-color-text-icons-warning-medium: light-dark( var(--onyx-color-system-orange-300), var(--onyx-color-system-orange-700) ); --onyx-color-text-icons-warning-soft: light-dark( var(--onyx-color-system-orange-200), var(--onyx-color-system-orange-900) ); --onyx-font-family-data: var(--onyx-font-family-Source-Sans-3-Variable); --onyx-font-family-h1: var(--onyx-font-family-Source-Sans-3-Variable); --onyx-font-family-h2: var(--onyx-font-family-Source-Sans-3-Variable); --onyx-font-family-h3: var(--onyx-font-family-Source-Sans-3-Variable); --onyx-font-family-h4: var(--onyx-font-family-Source-Sans-3-Variable); --onyx-font-family-mono: var(--onyx-font-family-Source-Code-Pro-Variable); --onyx-font-family-paragraph: var(--onyx-font-family-Source-Sans-3-Variable); --onyx-font-letter-spacing-default: var(--onyx-font-values-0-spacing); --onyx-font-line-height-lg: var(--onyx-font-values-500); --onyx-font-line-height-md: var(--onyx-font-values-400); --onyx-font-line-height-sm: var(--onyx-font-values-300); --onyx-font-line-height-xl: var(--onyx-font-values-600); --onyx-font-size-lg: var(--onyx-font-values-300); --onyx-font-size-md: var(--onyx-font-values-200); --onyx-font-size-sm: var(--onyx-font-values-100); --onyx-font-size-xl: var(--onyx-font-values-500); --onyx-font-weight-regular: var(--onyx-font-weight-400); --onyx-font-weight-semibold: var(--onyx-font-weight-600); --onyx-radius-component-badge: var(--onyx-number-radius-600); --onyx-radius-component-button: var(--onyx-number-radius-200); --onyx-radius-component-checkbox: var(--onyx-number-radius-200); --onyx-radius-component-container-sharp: var(--onyx-number-radius-200); --onyx-radius-component-container-soft: var(--onyx-number-radius-300); --onyx-radius-component-flyout: var(--onyx-number-radius-300); --onyx-radius-component-icon-button: var(--onyx-number-radius-600); --onyx-radius-component-input: var(--onyx-number-radius-200); --onyx-radius-component-search-sharp: var(--onyx-number-radius-200); --onyx-radius-component-search-soft: var(--onyx-number-radius-300); --onyx-radius-component-segmented-control-inside: var(--onyx-number-radius-200); --onyx-radius-component-segmented-control-outside: var(--onyx-number-radius-300); --onyx-radius-component-skeleton: var(--onyx-number-radius-200); --onyx-radius-component-system-button: var(--onyx-number-radius-200); --onyx-radius-full: var(--onyx-number-radius-600); --onyx-radius-lg: var(--onyx-number-radius-400); --onyx-radius-md: var(--onyx-number-radius-300); --onyx-radius-none: var(--onyx-number-radius-none); --onyx-radius-sm: var(--onyx-number-radius-200); --onyx-radius-xl: var(--onyx-number-radius-500); --onyx-radius-xs: var(--onyx-number-radius-100); } /** * Do not edit directly. * This file contains the specific variables for the "compact" theme. * Imported from Figma API on Fri, 24 Apr 2026 13:31:12 GMT */ .onyx-density-compact { --onyx-density-2xl: var(--onyx-number-spacing-600); --onyx-density-2xs: var(--onyx-number-spacing-100); --onyx-density-3xl: var(--onyx-number-spacing-700); --onyx-density-3xs: var(--onyx-number-spacing-0); --onyx-density-4xl: var(--onyx-number-spacing-800); --onyx-density-lg: var(--onyx-number-spacing-400); --onyx-density-md: var(--onyx-number-spacing-325); --onyx-density-sm: var(--onyx-number-spacing-300); --onyx-density-xl: var(--onyx-number-spacing-500); --onyx-density-xs: var(--onyx-number-spacing-200); } /** * Do not edit directly. * This file contains the specific variables for the "default" theme. * Imported from Figma API on Fri, 24 Apr 2026 13:30:58 GMT */ :where(:root), .onyx-density-default { --onyx-density-2xl: var(--onyx-number-spacing-700); --onyx-density-2xs: var(--onyx-number-spacing-200); --onyx-density-3xl: var(--onyx-number-spacing-800); --onyx-density-3xs: var(--onyx-number-spacing-100); --onyx-density-4xl: var(--onyx-number-spacing-900); --onyx-density-lg: var(--onyx-number-spacing-500); --onyx-density-md: var(--onyx-number-spacing-400); --onyx-density-sm: var(--onyx-number-spacing-350); --onyx-density-xl: var(--onyx-number-spacing-600); --onyx-density-xs: var(--onyx-number-spacing-300); } /** * Do not edit directly. * This file contains the specific variables for the "cozy" theme. * Imported from Figma API on Fri, 24 Apr 2026 13:31:12 GMT */ .onyx-density-cozy { --onyx-density-2xl: var(--onyx-number-spacing-800); --onyx-density-2xs: var(--onyx-number-spacing-300); --onyx-density-3xl: var(--onyx-number-spacing-900); --onyx-density-3xs: var(--onyx-number-spacing-200); --onyx-density-4xl: var(--onyx-number-spacing-950); --onyx-density-lg: var(--onyx-number-spacing-600); --onyx-density-md: var(--onyx-number-spacing-500); --onyx-density-sm: var(--onyx-number-spacing-400); --onyx-density-xl: var(--onyx-number-spacing-700); --onyx-density-xs: var(--onyx-number-spacing-350); } /** * Do not edit directly. * This file contains the specific variables for the "spacing" theme. * Imported from Figma API on Fri, 24 Apr 2026 13:30:46 GMT */ :where(:root) { --onyx-spacing-2xl: var(--onyx-number-spacing-700); --onyx-spacing-2xs: var(--onyx-number-spacing-300); --onyx-spacing-3xl: var(--onyx-number-spacing-800); --onyx-spacing-3xs: var(--onyx-number-spacing-250); --onyx-spacing-4xl: var(--onyx-number-spacing-900); --onyx-spacing-4xs: var(--onyx-number-spacing-200); --onyx-spacing-5xl: var(--onyx-number-spacing-950); --onyx-spacing-5xs: var(--onyx-number-spacing-100); --onyx-spacing-lg: var(--onyx-number-spacing-500); --onyx-spacing-md: var(--onyx-number-spacing-400); --onyx-spacing-sm: var(--onyx-number-spacing-350); --onyx-spacing-xl: var(--onyx-number-spacing-600); --onyx-spacing-xs: var(--onyx-number-spacing-325); }@layer onyx.component { .onyx-accordion { width: 100%; } .onyx-accordion--card { --onyx-accordion-gap: var(--onyx-density-xs); display: flex; flex-direction: column; gap: var(--onyx-accordion-gap); } }/** * Mixin to define common onyx sizes (e.g. used for icons). */ /** * Mixin to define h1-h6 headline font size and line height. */ @layer onyx.component { .onyx-icon { --icon-size: 1.5rem; --icon-color: currentColor; display: inline-block; width: var(--icon-size); min-width: var(--icon-size); height: var(--icon-size); fill: var(--icon-color); vertical-align: middle; } .onyx-icon > svg { display: block; height: inherit; width: inherit; } .onyx-icon--inline { --icon-size: 1em; } .onyx-icon--12px { --icon-size: 0.75rem; } .onyx-icon--16px { --icon-size: 1rem; } .onyx-icon--24px { --icon-size: 1.5rem; } .onyx-icon--32px { --icon-size: 2rem; } .onyx-icon--48px { --icon-size: 3rem; } .onyx-icon--64px { --icon-size: 4rem; } .onyx-icon--96px { --icon-size: 6rem; } .onyx-icon--primary { --icon-color: var(--onyx-color-text-icons-primary-intense); } .onyx-icon--neutral { --icon-color: var(--onyx-color-text-icons-neutral-intense); } .onyx-icon--danger { --icon-color: var(--onyx-color-text-icons-danger-intense); } .onyx-icon--warning { --icon-color: var(--onyx-color-text-icons-warning-intense); } .onyx-icon--success { --icon-color: var(--onyx-color-text-icons-success-intense); } .onyx-icon--info { --icon-color: var(--onyx-color-text-icons-info-intense); } }@layer onyx.component { .onyx-skeleton { border-radius: var(--onyx-radius-component-skeleton); pointer-events: none; height: 100%; width: 100%; max-width: 100%; max-height: 100%; background: linear-gradient(to right, var(--onyx-color-base-neutral-200) 20%, var(--onyx-color-base-neutral-300) 40%, var(--onyx-color-base-neutral-200) 60%); background-size: 500% 100%; animation: onyx-skeleton var(--onyx-duration-lg) ease infinite; } @keyframes onyx-skeleton { 0% { background-position: 100% 50%; } 75% { background-position: 0 50%; } 100% { background-position: 0 50%; } } }@layer onyx.component { .onyx-accordion-item, .onyx-accordion-item-skeleton { --onyx-accordion-item-padding: var(--onyx-density-md); --onyx-accordion-item-gap: var(--onyx-density-md); --onyx-accordion-item-border: var(--onyx-1px-in-rem) solid var(--onyx-color-component-border-neutral); --onyx-accordion-item-border-focus: none; --onyx-accordion-item-border-radius: var(--onyx-radius-md); --onyx-accordion-item-font-size: var(--onyx-font-size-md); --onyx-accordion-item-line-height: var(--onyx-font-line-height-md); --onyx-accordion-item-font-weight: var(--onyx-font-weight-regular); --onyx-accordion-item-justify: space-between; --onyx-accordion-item-chevron-rotation: 0deg; --onyx-accordion-item-chevron-rotation-open: 180deg; --onyx-accordion-item-header-gap: var(--onyx-density-xs); --onyx-accordion-item-color: var(--onyx-color-text-icons-neutral-medium); --onyx-accordion-item-color-hover: var(--onyx-color-text-icons-neutral-intense); --onyx-accordion-item-color-open: var(--onyx-accordion-item-color-hover); --onyx-accordion-item-background: transparent; --onyx-accordion-item-background-hover: var(--onyx-color-base-neutral-200); --onyx-accordion-item-background-focus: var(--onyx-accordion-item-background-hover); --onyx-accordion-item-outline: var(--onyx-outline-width) solid var(--onyx-color-component-focus-primary); } .onyx-accordion-item--nested-large, .onyx-accordion-item--nested-small, .onyx-accordion-item-skeleton--nested-large, .onyx-accordion-item-skeleton--nested-small { --onyx-accordion-item-font-weight: var(--onyx-font-weight-semibold); --onyx-accordion-item-gap: var(--onyx-density-xs); --onyx-accordion-item-justify: flex-start; --onyx-accordion-item-chevron-rotation: 90deg; --onyx-accordion-item-chevron-rotation-open: 0deg; --onyx-accordion-item-color-open: var(--onyx-accordion-item-color); --onyx-accordion-item-outline: none; --onyx-accordion-item-border-radius: 0; --onyx-accordion-item-border-focus: var(--onyx-accordion-item-border); } .onyx-accordion-item--nested-large, .onyx-accordion-item-skeleton--nested-large { --onyx-accordion-item-color: var(--onyx-color-text-icons-neutral-intense); --onyx-accordion-item-background: var(--onyx-color-base-background-blank); --onyx-accordion-item-background-hover: var(--onyx-color-base-background-tinted); --onyx-accordion-item-background-focus: var(--onyx-color-base-neutral-200); } .onyx-accordion-item--nested-small, .onyx-accordion-item-skeleton--nested-small { --onyx-accordion-item-padding: var(--onyx-density-xs) var(--onyx-density-md); --onyx-accordion-item-font-size: var(--onyx-font-size-sm); --onyx-accordion-item-line-height: var(--onyx-font-line-height-sm); --onyx-accordion-item-color: var(--onyx-color-text-icons-neutral-medium); --onyx-accordion-item-background: var(--onyx-color-base-background-tinted); --onyx-accordion-item-background-hover: var(--onyx-color-base-neutral-200); --onyx-accordion-item-background-focus: var(--onyx-color-base-neutral-300); } .onyx-accordion-item--card, .onyx-accordion-item-skeleton--card { --onyx-accordion-item-background: var(--onyx-color-base-background-blank); --onyx-accordion-item-color-open: var(--onyx-accordion-item-color); } } @layer onyx.component { .onyx-accordion-item { --onyx-accordion-toggle-duration: var(--onyx-duration-sm); border-bottom: var(--onyx-accordion-item-border); font-family: var(--onyx-font-family-paragraph); width: 100%; } @supports selector(::details-content) and (interpolate-size: allow-keywords) { .onyx-accordion-item { interpolate-size: allow-keywords; } .onyx-accordion-item::details-content { height: 0; overflow: clip; transition: content-visibility var(--onyx-accordion-toggle-duration) ease, height var(--onyx-accordion-toggle-duration) ease; transition-behavior: allow-discrete; } .onyx-accordion-item[open]::details-content { height: auto; } } .onyx-accordion-item__header { color: var(--onyx-accordion-item-color); width: 100%; display: flex; justify-content: var(--onyx-accordion-item-justify); align-items: center; gap: var(--onyx-accordion-item-gap); padding: var(--onyx-accordion-item-padding); cursor: pointer; font-size: var(--onyx-accordion-item-font-size); line-height: var(--onyx-accordion-item-line-height); font-weight: var(--onyx-accordion-item-font-weight); background-color: var(--onyx-accordion-item-background); list-style: none; } .onyx-accordion-item__header::-webkit-details-marker { display: none; } .onyx-accordion-item__header:hover, .onyx-accordion-item__header:focus-visible { outline: none; color: var(--onyx-accordion-item-color-hover); } .onyx-accordion-item__header:hover { background-color: var(--onyx-accordion-item-background-hover); } .onyx-accordion-item__header:focus-visible { background-color: var(--onyx-accordion-item-background-focus); } .onyx-accordion-item__header-content { display: flex; align-items: center; gap: var(--onyx-accordion-item-header-gap); flex-grow: 1; } .onyx-accordion-item--nested-large .onyx-accordion-item__header, .onyx-accordion-item--nested-small .onyx-accordion-item__header { position: sticky; top: 0; z-index: var(--onyx-z-index-sticky-content); } .onyx-accordion-item--nested-large .onyx-accordion-item__header-content, .onyx-accordion-item--nested-small .onyx-accordion-item__header-content { flex-grow: 0; } .onyx-accordion-item--card { border: var(--onyx-accordion-item-border); border-radius: var(--onyx-accordion-item-border-radius); background-color: var(--onyx-accordion-item-background); } .onyx-accordion-item--card .onyx-accordion-item__header { border-radius: var(--onyx-accordion-item-border-radius); } .onyx-accordion-item--card[open] .onyx-accordion-item__header { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .onyx-accordion-item:has(.onyx-accordion-item__header:focus-visible) { border-radius: var(--onyx-accordion-item-border-radius); border-bottom: var(--onyx-accordion-item-border-focus); outline: var(--onyx-accordion-item-outline); } .onyx-accordion-item__header-icon { transition: transform var(--onyx-accordion-toggle-duration) ease; transform: rotate(var(--onyx-accordion-item-chevron-rotation)); } .onyx-accordion-item[open] > .onyx-accordion-item__header .onyx-accordion-item__header-icon { transform: rotate(var(--onyx-accordion-item-chevron-rotation-open)); } .onyx-accordion-item[open] .onyx-accordion-item__header { color: var(--onyx-accordion-item-color-open); } .onyx-accordion-item[open] .onyx-accordion-item__header:hover, .onyx-accordion-item[open] .onyx-accordion-item__header:focus-visible { color: var(--onyx-accordion-item-color-hover); } .onyx-accordion-item[open] .onyx-accordion-item__header:focus-visible { border-radius: var(--onyx-accordion-item-border-radius) var(--onyx-accordion-item-border-radius) 0 0; } .onyx-accordion-item__panel { padding: var(--onyx-accordion-item-padding); color: var(--onyx-color-text-icons-neutral-intense); } .onyx-accordion-item:has(.onyx-accordion-item__header[aria-disabled=true]) { pointer-events: none; } .onyx-accordion-item:has(.onyx-accordion-item__header[aria-disabled=true]) .onyx-accordion-item__header, .onyx-accordion-item:has(.onyx-accordion-item__header[aria-disabled=true]) .onyx-accordion-item__panel { color: var(--onyx-color-text-icons-neutral-soft); } .onyx-accordion-item-skeleton { padding: var(--onyx-accordion-item-padding); display: flex; gap: var(--onyx-accordion-item-gap); border-bottom: var(--onyx-accordion-item-border); } .onyx-accordion-item-skeleton__main { width: 100%; height: 1.5rem; } .onyx-accordion-item-skeleton__icon { height: 1.5rem; width: 1.5rem; flex-shrink: 0; } .onyx-accordion-item-skeleton--card { border: none; height: calc(1.5rem + 2 * var(--onyx-accordion-item-padding)); } }@layer onyx.component { .onyx-basic-dialog { --onyx-basic-dialog-screen-gap: var(--onyx-grid-margin); --onyx-basic-dialog-border-radius: var(--onyx-radius-component-flyout); --onyx-basic-dialog-padding: var(--onyx-density-md) var(--onyx-density-lg); outline: none; border: var(--onyx-1px-in-rem) solid var(--onyx-color-component-border-neutral); border-radius: var(--onyx-basic-dialog-border-radius); font-family: var(--onyx-font-family-paragraph); color: var(--onyx-color-text-icons-neutral-intense); background-color: var(--onyx-color-base-background-blank); overflow: auto; z-index: var(--onyx-z-index-page-overlay); padding: 0; max-width: calc(100% - 2 * var(--onyx-basic-dialog-screen-gap)); max-height: calc(100% - 2 * var(--onyx-basic-dialog-screen-gap)); position: fixed; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: fit-content; height: fit-content; } .onyx-basic-dialog::backdrop { background-color: var(--onyx-color-component-opacity-backdrop-soft); } .onyx-basic-dialog__backdrop--medium::backdrop { background-color: var(--onyx-color-component-opacity-backdrop-medium); } .onyx-basic-dialog:modal { z-index: var(--onyx-z-index-app-overlay); border: none; } .onyx-basic-dialog--left, .onyx-basic-dialog--right { --onyx-basic-dialog-screen-gap: var(--onyx-density-xs); transform: none; height: 100%; } .onyx-basic-dialog--left { left: var(--onyx-basic-dialog-screen-gap); margin-left: 0; } .onyx-basic-dialog--right { left: unset; right: var(--onyx-basic-dialog-screen-gap); } .onyx-basic-dialog__content { padding: var(--onyx-basic-dialog-padding); width: inherit; } } @layer onyx.component { .dark .onyx-basic-dialog:modal { outline: var(--onyx-spacing-5xs) solid var(--onyx-color-component-border-neutral); } }@layer onyx.component { .onyx-visually-hidden { border: 0; clip: rect(0, 0, 0, 0); height: 0; margin: 0; overflow: hidden; padding: 0; position: absolute; width: 1px; white-space: nowrap; } }@layer onyx.component { .onyx-router-link { cursor: pointer; outline-offset: inherit; text-decoration: inherit; color: inherit; } }/** * Mixin to define common onyx sizes (e.g. used for icons). */ /** * Mixin to define h1-h6 headline font size and line height. */ @layer onyx.component { .onyx-headline { --onyx-headline-scroll-margin: var(--onyx-spacing-xl); --border-radius: var(--onyx-radius-sm); font-weight: var(--onyx-font-weight-semibold); color: var(--onyx-color-text-icons-neutral-intense); position: relative; border-radius: var(--border-radius); scroll-margin-top: var(--onyx-headline-scroll-margin); } .onyx-headline__hash { color: inherit; text-decoration: none; border-radius: 0 var(--border-radius) var(--border-radius) 0; outline: none; display: inline-block; } .onyx-headline__hash:hover, .onyx-headline__hash:focus-visible { background-color: var(--onyx-color-base-neutral-200); padding-right: var(--onyx-density-xs); } .onyx-headline__hash:hover::before, .onyx-headline__hash:focus-visible::before { position: absolute; width: 1.5rem; left: -1.5rem; text-align: center; color: var(--onyx-color-text-icons-primary-intense); cursor: pointer; background-color: inherit; line-height: inherit; border-radius: var(--border-radius) 0 0 var(--border-radius); content: "#"; content: "#"/""; } .onyx-headline__hash:focus-visible { outline: var(--onyx-outline-width) solid var(--onyx-color-component-focus-primary); outline-offset: 0; } .onyx-headline__hash:focus-visible::before { box-shadow: 0 0 0 var(--onyx-outline-width) var(--onyx-color-component-focus-primary); clip-path: inset(calc(-1 * var(--onyx-outline-width)) 0 calc(-1 * var(--onyx-outline-width)) calc(-1 * var(--onyx-outline-width))); } .onyx-headline-skeleton { height: 1lh; width: 10rem; max-width: 100%; } } @layer onyx.component { .onyx-headline--h1, .onyx-headline-skeleton--h1 { font-size: var(--onyx-font-size-xl); line-height: var(--onyx-font-line-height-xl); font-family: var(--onyx-font-family-h1); } .onyx-headline--h2, .onyx-headline-skeleton--h2 { font-size: var(--onyx-font-size-lg); line-height: var(--onyx-font-line-height-lg); font-family: var(--onyx-font-family-h2); } .onyx-headline--h3, .onyx-headline-skeleton--h3 { font-size: var(--onyx-font-size-md); line-height: var(--onyx-font-line-height-md); font-family: var(--onyx-font-family-h3); } .onyx-headline--h4, .onyx-headline--h5, .onyx-headline--h6, .onyx-headline-skeleton--h4, .onyx-headline-skeleton--h5, .onyx-headline-skeleton--h6 { font-size: var(--onyx-font-size-sm); line-height: var(--onyx-font-line-height-sm); font-family: var(--onyx-font-family-h4); } }@layer onyx.component { .onyx-system-button, .onyx-system-button-skeleton { --height: 1.5rem; } } @layer onyx.component { .onyx-system-button-skeleton { height: var(--height); width: var(--height); max-width: 100%; } .onyx-system-button-skeleton--text { width: var(--onyx-spacing-4xl); } } @layer onyx.component { .onyx-system-button { font-family: var(--onyx-font-family-paragraph); color: var(--color); background-color: var(--background-color); border-radius: var(--onyx-radius-component-system-button); border: none; padding: 0; height: var(--height); min-width: var(--height); max-width: 100%; display: inline-flex; align-items: center; justify-content: center; } .onyx-system-button:enabled, .onyx-system-button:is(a) { cursor: pointer; } .onyx-system-button:enabled:hover, .onyx-system-button:enabled:focus-visible, .onyx-system-button:is(a):hover, .onyx-system-button:is(a):focus-visible { --background-color: var(--hover-background-color); --color: var(--hover-focus-color); } .onyx-system-button:enabled:focus-visible, .onyx-system-button:is(a):focus-visible { --background-color: var(--focus-active-background-color); --color: var(--hover-focus-color); outline: var(--onyx-outline-width) solid var(--onyx-color-component-focus-primary); } .onyx-system-button:enabled:active, .onyx-system-button:is(a):active { --background-color: var(--focus-active-background-color); --color: var(--active-color); } .onyx-system-button .onyx-icon { --icon-size: 1rem; } .onyx-system-button:not(:has(.onyx-icon)) { padding: var(--onyx-spacing-5xs) var(--onyx-spacing-2xs); } .onyx-system-button--intense { --color: var(--onyx-color-text-icons-neutral-medium); --hover-focus-color: var(--onyx-color-text-icons-neutral-intense); --active-color: var(--onyx-color-text-icons-primary-bold); --background-color: transparent; --hover-background-color: var(--onyx-color-base-neutral-300); --focus-active-background-color: var(--onyx-color-base-neutral-300); } .onyx-system-button--intense:not(:has(.onyx-icon)) { --color: var(--onyx-color-text-icons-neutral-intense); --hover-focus-color: var(--onyx-color-text-icons-neutral-intense); --active-color: var(--onyx-color-text-icons-primary-bold); --background-color: var(--onyx-color-base-neutral-300); --hover-background-color: var(--onyx-color-base-neutral-200); --focus-active-background-color: var(--onyx-color-base-neutral-200); } .onyx-system-button--soft { --color: var(--onyx-color-text-icons-neutral-medium); --hover-focus-color: var(--onyx-color-text-icons-neutral-intense); --active-color: var(--onyx-color-text-icons-primary-intense); --background-color: transparent; --hover-background-color: var(--onyx-color-base-background-blank); --focus-active-background-color: var(--onyx-color-base-background-blank); } .onyx-system-button--soft:not(:has(.onyx-icon)) { --color: var(--onyx-color-text-icons-neutral-intense); --hover-focus-color: var(--onyx-color-text-icons-neutral-intense); --active-color: var(--onyx-color-text-icons-primary-intense); --background-color: transparent; --hover-background-color: var(--onyx-color-base-background-blank); --focus-active-background-color: var(--onyx-color-base-background-blank); } .onyx-system-button--medium { --color: var(--onyx-color-text-icons-neutral-medium); --hover-focus-color: var(--onyx-color-text-icons-neutral-intense); --active-color: var(--onyx-color-text-icons-primary-intense); --background-color: transparent; --hover-background-color: var(--onyx-color-base-neutral-200); --focus-active-background-color: var(--onyx-color-base-neutral-200); } .onyx-system-button--medium:not(:has(.onyx-icon)) { --color: var(--onyx-color-text-icons-neutral-intense); --hover-focus-color: var(--onyx-color-text-icons-neutral-intense); --active-color: var(--onyx-color-text-icons-primary-bold); --background-color: var(--onyx-color-base-neutral-200); --hover-background-color: var(--onyx-color-base-neutral-300); --focus-active-background-color: var(--onyx-color-base-neutral-200); } .onyx-system-button:disabled { --background-color: transparent; --color: var(--onyx-color-text-icons-neutral-soft); } }/*#region breakpoints*/ /*#endregion breakpoints*/ /** * Applies CSS only if the screen width satisfies the given onyx breakpoint. * @param {string} $min-max - Whether the breakpoint should be considered as min or max width. * @param {string} $name - name of the onyx breakpoint. One of: 2xs, xs, sm, md, lg or xl * * @example screen(min, sm) * @example screen(max, sm) */ /** * Applies CSS only if the container width satisfies the given onyx breakpoint. * @param {string} $min-max - Whether the breakpoint should be considered as min or max width. * @param {string} $name - name of the onyx breakpoint. One of: 2xs, xs, sm, md, lg or xl * @param {number} $offset - optional offset to add to the min/max width. Useful if both min and max are used for the same breakpoint * * @example container(min, sm) * @example container(max, sm) */ @layer onyx.component { .onyx-alert-modal { --max-width: 26rem; } .onyx-alert-modal__content { max-width: var(--max-width); display: flex; align-items: center; gap: var(--onyx-density-sm); } .onyx-alert-modal__headline { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--onyx-density-xs); } .onyx-alert-modal__body { margin-top: var(--onyx-density-sm); white-space: pre-line; } .onyx-alert-modal__actions { margin-top: var(--onyx-density-md); display: flex; align-items: center; justify-content: flex-end; gap: var(--onyx-density-xs); max-width: var(--max-width); } @media screen and (max-width: 992px) { .onyx-alert-modal__icon { --icon-size: 3rem; } } @media screen and (max-width: 768px) { .onyx-alert-modal__icon { --icon-size: 2rem; } } }@layer onyx.component { .onyx-fab-button, .onyx-fab-button-skeleton { --onyx-fab-button-background: var(--onyx-color-base-neutral-800); --onyx-fab-button-background-hover: var(--onyx-color-base-neutral-500); --onyx-fab-button-padding: var(--onyx-density-md); --onyx-fab-button-gap: var(--onyx-density-xs); box-shadow: var(--onyx-shadow-soft-bottom); } } @layer onyx.component { .onyx-fab-button-skeleton { width: calc(1.5rem + 2 * var(--onyx-fab-button-padding)); height: calc(1.5rem + 2 * var(--onyx-fab-button-padding)); border-radius: var(--onyx-radius-full); } } @layer onyx.component { .onyx-fab-button { font-family: var(--onyx-font-family-paragraph); background: var(--onyx-fab-button-background); border: none; cursor: pointer; color: var(--onyx-color-text-icons-neutral-inverted); display: inline-flex; justify-content: center; align-items: center; gap: var(--onyx-fab-button-gap); border-radius: var(--onyx-radius-full); width: max-content; max-width: 100%; padding: var(--onyx-fab-button-padding); } .onyx-fab-button:hover { background: var(--onyx-fab-button-background-hover); } .onyx-fab-button:focus-visible { background: var(--onyx-fab-button-background); outline: var(--onyx-outline-width) solid var(--onyx-color-component-focus-primary); } }@layer onyx.component { .onyx-basic-popover { --onyx-basic-popover-min-width: var(--onyx-spacing-4xl); --onyx-basic-popover-max-width: 20rem; --onyx-basic-popover-gap: var(--onyx-spacing-2xs); display: inline-flex; position: relative; } .onyx-basic-popover__dialog { position: fixed; border-radius: var(--onyx-radius-component-flyout); border: none; outline: none; box-shadow: var(--onyx-shadow-medium-bottom); background-color: var(--onyx-color-base-background-blank); padding: 0; box-sizing: border-box; min-width: var(--onyx-basic-popover-min-width); max-width: var(--onyx-basic-popover-max-width); height: max-content; max-height: calc(100vh - 2 * var(--onyx-grid-margin)); width: max-content; font-family: var(--onyx-font-family-paragraph); } .onyx-basic-popover__dialog:popover-open { display: flex; flex-direction: column; align-items: center; } .onyx-basic-popover__dialog--position-right { margin-left: var(--onyx-basic-popover-gap); } .onyx-basic-popover__dialog--position-left { margin-right: var(--onyx-basic-popover-gap); } .onyx-basic-popover__dialog--position-bottom { margin-top: var(--onyx-basic-popover-gap); } .onyx-basic-popover__dialog--position-bottom-right { margin-top: var(--onyx-basic-popover-gap); margin-left: var(--onyx-basic-popover-gap); } .onyx-basic-popover__dialog--position-bottom-left { margin-top: var(--onyx-basic-popover-gap); margin-right: var(--onyx-basic-popover-gap); } .onyx-basic-popover__dialog--position-top { margin-bottom: var(--onyx-basic-popover-gap); } .onyx-basic-popover__dialog--position-top-right { margin-bottom: var(--onyx-basic-popover-gap); margin-left: var(--onyx-basic-popover-gap); } .onyx-basic-popover__dialog--position-top-left { margin-bottom: var(--onyx-basic-popover-gap); margin-right: var(--onyx-basic-popover-gap); } .onyx-basic-popover__dialog--fitparent.onyx-basic-popover__dialog--position-top, .onyx-basic-popover__dialog--fitparent.onyx-basic-popover__dialog--position-bottom { min-width: inherit; max-width: inherit; } .onyx-basic-popover__dialog--fitparent.onyx-basic-popover__dialog--position-left, .onyx-basic-popover__dialog--fitparent.onyx-basic-popover__dialog--position-right { min-height: inherit; max-height: inherit; } .onyx-basic-popover__dialog--dont-support-anchor { margin: 0; } .onyx-basic-popover__dialog--sticky { margin: 0; top: auto; bottom: auto; } } @layer onyx.component { .dark .onyx-basic-popover__dialog { outline: var(--onyx-1px-in-rem) solid var(--onyx-color-component-border-neutral); } }@layer onyx.component { .onyx-flyout-menu { --onyx-flyout-menu-gap: var(--onyx-spacing-2xs); display: inline-flex; width: min-content; position: relative; } .onyx-flyout-menu__list-header { position: sticky; top: 0; min-height: var(--onyx-spacing-2xs); width: 100%; } .onyx-flyout-menu__list-footer { position: sticky; bottom: 0; min-height: var(--onyx-spacing-2xs); width: 100%; } .onyx-flyout-menu__wrapper { width: 100%; padding: 0; /** * The last option should only be half visible: * 7.5 * OnyxListItem, where OnyxListItem => 2 * padding + line-height of OnyxListItem */ max-height: calc((var(--onyx-flyout-menu-visible-item-count, 7) + 0.5) * (2 * var(--onyx-density-xs) + 1lh)); overflow: auto; } .onyx-flyout-menu__wrapper:has(> .onyx-menu-item--internal.onyx-menu-item--open) > .onyx-menu-item:not(.onyx-menu-item--open) { display: none; } } @layer onyx.component { .dark .onyx-flyout-menu__list { outline: var(--onyx-1px-in-rem) solid var(--onyx-color-component-border-neutral); } }@layer onyx.component { .onyx-fab { --onyx-fab-viewport-gap: var(--onyx-density-sm); --onyx-fab-offset-x: 0rem; --onyx-fab-offset-y: 0rem; --onyx-basic-popover-gap: var(--onyx-density-sm); font-family: var(--onyx-font-family-paragraph); color: var(--onyx-color-text-icons-neutral-inverted); position: fixed; bottom: calc(var(--onyx-fab-viewport-gap) + var(--onyx-fab-offset-y)); right: calc(var(--onyx-fab-viewport-gap) + var(--onyx-fab-offset-x)); z-index: var(--onyx-z-index-notification); } .onyx-fab .onyx-flyout-menu__list-header, .onyx-fab .onyx-flyout-menu__list-footer { display: none; } .onyx-fab .onyx-flyout-menu__wrapper { display: flex; flex-direction: column; gap: var(--onyx-density-2xs); align-items: flex-end; } .onyx-fab--left { right: unset; left: calc(var(--onyx-fab-viewport-gap) + var(--onyx-fab-offset-x)); } .onyx-fab--left .onyx-flyout-menu__wrapper { align-items: flex-start; } .onyx-fab .onyx-basic-popover__dialog { --onyx-basic-popover-min-width: 0; box-shadow: none; background-color: transparent; outline: none; width: calc(1.5rem + 2 * var(--onyx-density-md)); } .onyx-fab .onyx-basic-popover__dialog:not(:has(.onyx-fab-button__label)) .onyx-flyout-menu__wrapper { align-items: center; } .onyx-fab .onyx-basic-popover__dialog, .onyx-fab .onyx-flyout-menu__wrapper { overflow: visible; } }@layer onyx.component { .onyx-fab-item { list-style: none; } .onyx-fab-item .onyx-fab-button { --onyx-fab-button-background: var(--onyx-color-base-neutral-600); --onyx-fab-button-background-hover: var(--onyx-color-base-neutral-800); --onyx-fab-button-padding: var(--onyx-density-xs); --onyx-fab-button-gap: var(--onyx-density-2xs); } }/** * Calculates the stroke length for the circle spinner. * @param $percentage: Stroke percentage that should be covered. */ @layer onyx.component { .onyx-circle-spinner { --indicator-size: 1.5rem; --stroke-color: currentColor; max-width: var(--indicator-size); min-width: var(--indicator-size); padding: 1px; aspect-ratio: 1; animation: onyx-circle-spinner var(--onyx-duration-lg) cubic-bezier(0.4, 0.35, 0.7, 0.8) infinite; } .onyx-circle-spinner__circle { fill: transparent; stroke-width: 2px; stroke-linecap: round; stroke: var(--stroke-color); stroke-dasharray: 106.0287520587 35.3429173529; stroke-dashoffset: 35.3429173529; animation: onyx-circle-spinner-stroke var(--onyx-duration-lg) cubic-bezier(0.4, 0.35, 0.7, 0.8) infinite; } .onyx-circle-spinner { /** * Animates the circle by spinning/rotating it. */ } @keyframes onyx-circle-spinner { 100% { transform: rotate(1turn); } } .onyx-circle-spinner { /** * Animates the stroke gap from 25% to 75% to 25%. */ } @keyframes onyx-circle-spinner-stroke { 0% { stroke-dasharray: 106.0287520587 35.3429173529; } 75% { stroke-dasharray: 35.3429173529 106.0287520587; } 100% { stroke-dasharray: 106.0287520587 35.3429173529; } } }/** Animation duration. */ /** Max size the dot should shrink in the animation. Must be a negative value. */ /** * Defines the box shadow. * @param $shrink: Shrink factor. Set to 0 (default) to not shrink the box shadow. */ /** * Defines a single dot. */ @layer onyx.component { .onyx-loading-dots { --indicator-size: 1.5rem; /** Default (non-animated) size of a single dot. */ --dot-size: calc(0.25 * var(--indicator-size)); width: var(--indicator-size); aspect-ratio: 1; position: relative; } .onyx-loading-dots__center { box-shadow: 0 var(--dot-size) 0 0; position: absolute; background-color: transparent; width: var(--dot-size); aspect-ratio: 1; border-radius: var(--onyx-radius-full); animation: onyx-loading-dots var(--onyx-duration-lg) infinite linear; animation-delay: calc(var(--onyx-duration-lg) / 6); left: calc(50% - 0.5 * var(--dot-size)); top: calc(50% - 1.5 * var(--dot-size)); } .onyx-loading-dots__center::before, .onyx-loading-dots__center::after { content: ""; box-shadow: 0 var(--dot-size) 0 0; position: absolute; background-color: transparent; width: var(--dot-size); aspect-ratio: 1; border-radius: var(--onyx-radius-full); animation: onyx-loading-dots var(--onyx-duration-lg) infinite linear; } .onyx-loading-dots__center::before { left: calc(-0.5 * var(--indicator-size) + 0.5 * var(--dot-size)); } .onyx-loading-dots__center::after { right: calc(-0.5 * var(--indicator-size) + 0.5 * var(--dot-size)); animation-delay: calc(var(--onyx-duration-lg) / 3); } .onyx-loading-dots { /** * Animates the box shadow of the dots with a pulsing effect (grow and shrink). */ } @keyframes onyx-loading-dots { 0% { box-shadow: 0 var(--dot-size) 0 0; } 33% { box-shadow: 0 var(--dot-size) 0 calc(-1 * var(--dot-size) / 2); } 66% { box-shadow: 0 var(--dot-size) 0 calc(-1 * var(--dot-size) / 2); } } }@property --onyx-ripple-radius { syntax: ""; initial-value: 0%; inherits: false; } @layer onyx.component { .onyx-ripple { --onyx-ripple-color: var(--onyx-color-base-primary-600); display: block; position: absolute; inset: 0; overflow: hidden; border-radius: inherit; width: 100%; height: 100%; } .onyx-ripple__element { display: block; position: absolute; pointer-events: none; width: 100%; height: 100%; background: radial-gradient(circle at var(--onyx-ripple-left) var(--onyx-ripple-top), transparent var(--onyx-ripple-radius), var(--onyx-ripple-color) var(--onyx-ripple-radius)); animation: onyx-ripple var(--onyx-duration-sm) cubic-bezier(0, 0, 0.2, 1) forwards; } @media (prefers-reduced-motion) { .onyx-ripple__element { animation: none; } } @keyframes onyx-ripple { 0% { --onyx-ripple-radius: 0%; } 100% { --onyx-ripple-radius: 100%; } } }@layer onyx.component { .onyx-button, .onyx-button-skeleton { --onyx-button-padding-vertical: var(--onyx-density-xs); --onyx-button-padding-inline: var(--onyx-density-sm); } } @layer onyx.component { .onyx-button { --onyx-button-background-color: transparent; --onyx-button-background-color-hover: transparent; --onyx-button-background-color-disabled: transparent; --onyx-button-text-color: transparent; --onyx-button-text-color-hover: var(--onyx-button-text-color); --onyx-button-text-color-disabled: transparent; --onyx-button-border-color: transparent; --onyx-button-border-color-hover: var(--onyx-button-border-color); --onyx-button-border-color-disabled: transparent; --onyx-button-outline-color: var(--onyx-color-component-focus-primary); --onyx-button-border-width: var(--onyx-1px-in-rem); --onyx-button-border-radius: var(--onyx-radius-component-button); } .onyx-button--primary.onyx-button--default { --onyx-button-background-color: var(--onyx-color-component-cta-default); --onyx-button-background-color-hover: var(--onyx-color-component-cta-default-hover); --onyx-button-background-color-disabled: var(--onyx-color-base-primary-200); --onyx-button-text-color: var(--onyx-color-text-icons-neutral-button); --onyx-button-text-color-disabled: var(--onyx-color-text-icons-neutral-inverted); --onyx-button-border-color: var(--onyx-button-background-color); --onyx-button-border-color-hover: var(--onyx-button-background-color-hover); --onyx-button-border-color-disabled: var(--onyx-button-background-color-disabled); } .onyx-button--primary.onyx-button--outline { --onyx-button-background-color-hover: var(--onyx-color-base-primary-100); --onyx-button-text-color: var(--onyx-color-text-icons-primary-intense); --onyx-button-text-color-disabled: var(--onyx-color-text-icons-primary-soft); --onyx-button-border-color: var(--onyx-color-base-primary-400); --onyx-button-border-color-disabled: var(--onyx-color-base-primary-200); } .onyx-button--primary.onyx-button--plain { --onyx-button-background-color-hover: var(--onyx-color-base-primary-100); --onyx-button-text-color: var(--onyx-color-text-icons-primary-intense); --onyx-button-text-color-disabled: var(--onyx-color-text-icons-primary-soft); } .onyx-button--neutral { --onyx-button-outline-color: var(--onyx-color-component-focus-neutral); } .onyx-button--neutral.onyx-button--default { --onyx-button-background-color: var(--onyx-color-base-background-blank); --onyx-button-background-color-hover: var(--onyx-color-base-neutral-200); --onyx-button-background-color-disabled: var(--onyx-color-base-background-blank); --onyx-button-text-color: var(--onyx-color-text-icons-neutral-intense); --onyx-button-text-color-disabled: var(--onyx-color-text-icons-neutral-soft); --onyx-button-border-color: var(--onyx-color-base-neutral-400); --onyx-button-border-color-disabled: var(--onyx-color-base-neutral-200); } .onyx-button--neutral.onyx-button--outline { --onyx-button-background-color-hover: var(--onyx-color-base-neutral-200); --onyx-button-text-color: var(--onyx-color-text-icons-neutral-intense); --onyx-button-text-color-disabled: var(--onyx-color-text-icons-neutral-soft); --onyx-button-border-color: var(--onyx-color-base-neutral-400); --onyx-button-border-color-disabled: var(--onyx-color-base-neutral-200); } .onyx-button--neutral.onyx-button--plain { --onyx-button-background-color-hover: var(--onyx-color-base-neutral-200); --onyx-button-text-color: var(--onyx-color-text-icons-neutral-intense); --onyx-button-text-color-disabled: var(--onyx-color-text-icons-neutral-soft); } .onyx-button--danger { --onyx-button-outline-color: var(--onyx-color-component-focus-danger); } .onyx-button--danger.onyx-button--default { --onyx-button-background-color: var(--onyx-color-base-danger-200); --onyx-button-background-color-hover: var(--onyx-color-base-danger-100); --onyx-button-background-color-disabled: var(--onyx-color-base-danger-100); --onyx-button-text-color: var(--onyx-color-text-icons-danger-bold); --onyx-button-text-color-disabled: var(--onyx-color-text-icons-danger-medium); --onyx-button-border-color: var(--onyx-color-base-danger-500); --onyx-button-border-color-disabled: var(--onyx-color-base-danger-200); } .onyx-button--danger.onyx-button--outline { --onyx-button-background-color-hover: var(--onyx-color-base-danger-100); --onyx-button-text-color: var(--onyx-color-text-icons-danger-intense); --onyx-button-text-color-hover: var(--onyx-color-text-icons-danger-bold); --onyx-button-text-color-disabled: var(--onyx-color-text-icons-danger-medium); --onyx-button-border-color: var(--onyx-color-base-danger-500); --onyx-button-border-color-disabled: var(--onyx-color-base-danger-200); } .onyx-button--danger.onyx-button--plain { --onyx-button-background-color-hover: var(--onyx-color-base-danger-100); --onyx-button-text-color: var(--onyx-color-text-icons-danger-intense); --onyx-button-text-color-disabled: var(--onyx-color-text-icons-danger-medium); } .onyx-button { position: relative; display: inline-flex; max-width: 100%; width: max-content; padding-inline: var(--onyx-button-padding-inline); padding-block: calc(var(--onyx-button-padding-vertical) - var(--onyx-button-border-width)); justify-content: center; align-items: center; gap: var(--onyx-density-2xs); border-radius: var(--onyx-button-border-radius); cursor: pointer; font-family: var(--onyx-font-family-paragraph); background-color: var(--onyx-button-background-color); border: var(--onyx-button-border-width) solid var(--onyx-button-border-color); color: var(--onyx-button-text-color); } .onyx-button:focus-visible { outline: var(--onyx-outline-width) solid var(--onyx-button-outline-color); } .onyx-button:enabled:hover:not(:has(.onyx-ripple__element)), .onyx-button:is(a):hover:not(:has(.onyx-ripple__element)) { background-color: var(--onyx-button-background-color-hover); border-color: var(--onyx-button-border-color-hover); color: var(--onyx-button-text-color-hover); } .onyx-button:disabled { cursor: default; } .onyx-button:disabled:not(.onyx-button--loading) { background-color: var(--onyx-button-background-color-disabled); border-color: var(--onyx-button-border-color-disabled); color: var(--onyx-button-text-color-disabled); } .onyx-button__label { padding-inline: var(--onyx-density-2xs); font-size: var(--onyx-font-size-md); font-style: normal; font-weight: var(--onyx-font-weight-semibold); line-height: var(--onyx-font-line-height-md); position: relative; } .onyx-button__icon { position: relative; } .onyx-button--loading .onyx-button__label, .onyx-button--loading .onyx-button__icon { visibility: hidden; } .onyx-button__loading { position: absolute; } .onyx-button-skeleton { width: var(--onyx-density-4xl); height: calc(1.5rem + 2 * var(--onyx-button-padding-vertical)); display: inline-block; vertical-align: middle; } .onyx-button .onyx-ripple { --onyx-ripple-color: var(--onyx-button-background-color-hover); } }@layer onyx.component { .onyx-info-card { --onyx-info-card-padding: var(--onyx-density-md); display: flex; gap: var(--onyx-density-md); padding: var(--onyx-info-card-padding) var(--onyx-density-2xl) var(--onyx-info-card-padding) var(--onyx-info-card-padding); border-radius: var(--onyx-radius-md); border: var(--onyx-1px-in-rem) solid var(--onyx-info-card-border-color); background-color: var(--onyx-info-card-background); color: var(--onyx-color-text-icons-neutral-intense); font-family: var(--onyx-font-family-paragraph); max-width: 100%; position: relative; } .onyx-info-card__headline, .onyx-info-card__icon { color: var(--onyx-info-card-headline-color); } .onyx-info-card__content { display: flex; flex-direction: column; gap: var(--onyx-density-2xs); white-space: pre-line; } .onyx-info-card__buttons { display: flex; flex-wrap: wrap; gap: var(--onyx-density-xs); } .onyx-info-card__action { position: absolute; top: var(--onyx-info-card-padding); right: var(--onyx-info-card-padding); } .onyx-info-card--info { --onyx-info-card-background: var(--onyx-color-base-info-200); --onyx-info-card-border-color: var(--onyx-color-base-info-300); --onyx-info-card-headline-color: var(--onyx-color-text-icons-info-bold); } .onyx-info-card--neutral { --onyx-info-card-background: var(--onyx-color-base-neutral-200); --onyx-info-card-border-color: var(--onyx-color-base-neutral-300); --onyx-info-card-headline-color: var(--onyx-color-text-icons-neutral-intense); } .onyx-info-card--success { --onyx-info-card-background: var(--onyx-color-base-success-200); --onyx-info-card-border-color: var(--onyx-color-base-success-300); --onyx-info-card-headline-color: var(--onyx-color-text-icons-success-bold); } .onyx-info-card--warning { --onyx-info-card-background: var(--onyx-color-base-warning-200); --onyx-info-card-border-color: var(--onyx-color-base-warning-300); --onyx-info-card-headline-color: var(--onyx-color-text-icons-warning-bold); } .onyx-info-card--danger { --onyx-info-card-background: var(--onyx-color-base-danger-200); --onyx-info-card-border-color: var(--onyx-color-base-danger-300); --onyx-info-card-headline-color: var(--onyx-color-text-icons-danger-bold); } .onyx-info-card--primary { --onyx-info-card-background: var(--onyx-color-base-primary-200); --onyx-info-card-border-color: var(--onyx-color-base-primary-300); --onyx-info-card-headline-color: var(--onyx-color-text-icons-primary-bold); } }@layer onyx.component { .onyx-notification-message { --onyx-info-card-background: var(--onyx-color-base-neutral-900); --onyx-info-card-border-color: var(--onyx-info-card-background); --onyx-info-card-headline-color: var(--onyx-color-text-icons-neutral-inverted); color: var(--onyx-info-card-headline-color); width: 24rem; } .onyx-notification-message:focus-visible { outline: var(--onyx-outline-width) solid var(--onyx-color-component-focus-primary); } .onyx-notification-message:not(:hover, :focus-within) .onyx-info-card__close { display: none; } .onyx-notification-message .onyx-info-card__close { --color: var(--onyx-info-card-headline-color); } .onyx-notification-message .onyx-info-card__description { line-clamp: 2; -webkit-line-clamp: 2; -webkit-box-orient: vertical; display: -webkit-box; overflow: hidden; } .onyx-notification-message { animation: onyx-notification-message-animation linear; } @keyframes onyx-notification-message-animation {} .onyx-notification-message:hover, .onyx-notification-message:focus-within { animation-play-state: paused; } .onyx-notification-message--permanent { animation: none; } }@layer onyx.component { .onyx-notifications { --onyx-notifications-viewport-distance: var(--onyx-spacing-md); --onyx-notifications-gap: var(--onyx-spacing-2xs); --onyx-notifications-top: 0; padding: 0; border: none; background: none; z-index: var(--onyx-z-index-notification); position: fixed; top: var(--onyx-notifications-top); left: 100%; transform: translateX(-100%); overflow: auto; width: max-content; max-width: 100%; max-height: calc(100% - var(--onyx-notifications-viewport-distance) - var(--onyx-notifications-top)); } .onyx-notifications .onyx-notification-message { margin: var(--onyx-notifications-gap) var(--onyx-notifications-viewport-distance); max-width: calc(100% - 2 * var(--onyx-notifications-viewport-distance)); } .onyx-notifications .onyx-notification-message:last-child { margin-bottom: 0; } .onyx-component:has(.onyx-nav-bar):has(.onyx-notifications) .onyx-notifications { --onyx-notifications-top: var(--onyx-nav-bar-height); } }@layer onyx.component { .onyx-toast-message { --onyx-toast-message-padding-vertical: var(--onyx-density-sm); --onyx-toast-message-padding-horizontal: var(--onyx-density-md); --onyx-toast-message-color: var(--onyx-color-text-icons-neutral-inverted); --onyx-toast-message-background-color: var(--onyx-color-base-neutral-700); --onyx-toast-message-border-color: transparent; --onyx-toast-message-outline-color: var(--onyx-color-component-focus-primary); --onyx-toast-message-progress-bar-color: var(--onyx-color-base-primary-300); --onyx-toast-message-close-button-size: 1.5rem; font-family: var(--onyx-font-family-paragraph); width: 40rem; max-width: 100%; flex-shrink: 0; border-radius: var(--onyx-radius-md); overflow: hidden; box-shadow: var(--onyx-shadow-soft-bottom); color: var(--onyx-toast-message-color); background-color: var(--onyx-toast-message-background-color); position: relative; z-index: var(--onyx-z-index-notification); } .onyx-toast-message:hover .onyx-toast-message__progress-bar, .onyx-toast-message:focus .onyx-toast-message__progress-bar, .onyx-toast-message:has(.onyx-toast-message__description:focus-visible) .onyx-toast-message__progress-bar { animation-play-state: paused; } .onyx-toast-message:is(button) { text-align: left; cursor: pointer; border: none; padding: 0; } .onyx-toast-message:is(button):focus-within { outline: var(--onyx-outline-width) solid var(--onyx-toast-message-outline-color); } .onyx-toast-message:has(.onyx-toast-message__description:focus-visible) { outline: var(--onyx-outline-width) solid var(--onyx-toast-message-outline-color); } .onyx-toast-message__wrapper { display: flex; gap: var(--onyx-density-md); padding: var(--onyx-toast-message-padding-vertical) var(--onyx-toast-message-padding-horizontal); border: var(--onyx-1px-in-rem) solid var(--onyx-toast-message-border-color); border-radius: inherit; } .onyx-toast-message__content { width: 100%; } .onyx-toast-message__headline { font-weight: var(--onyx-font-weight-semibold); display: flex; align-items: flex-start; justify-content: space-between; } .onyx-toast-message__headline:has(.onyx-toast-message__close) { max-width: calc(100% - var(--onyx-toast-message-close-button-size)); } .onyx-toast-message__progress-bar { display: block; height: var(--onyx-spacing-5xs); background-color: var(--onyx-toast-message-progress-bar-color); animation: onyx-toast-message-progress-bar linear; width: 0; position: absolute; bottom: 0; left: 0; } @keyframes onyx-toast-message-progress-bar { 0% { width: 100%; } 100% { width: 0%; } } .onyx-toast-message__close { background: none; padding: 0; font: inherit; border: none; color: inherit; cursor: pointer; display: flex; position: absolute; right: var(--onyx-toast-message-padding-horizontal); top: var(--onyx-toast-message-padding-vertical); } .onyx-toast-message__close:focus-visible { border-radius: var(--onyx-radius-md); outline: var(--onyx-spacing-5xs) solid var(--onyx-toast-message-outline-color); } .onyx-toast-message:has(.onyx-toast-message__progress-bar):not(:hover) .onyx-toast-message__close { display: none; } .onyx-toast-message__description { margin-top: var(--onyx-density-2xs); white-space: pre-line; max-height: 3lh; overflow-y: auto; } .onyx-toast-message__description:focus-visible { outline: none; } .onyx-toast-message--danger { --onyx-toast-message-color: var(--onyx-color-text-icons-danger-bold); --onyx-toast-message-background-color: var(--onyx-color-base-danger-100); --onyx-toast-message-border-color: var(--onyx-color-base-danger-300); --onyx-toast-message-outline-color: var(--onyx-color-component-focus-danger); --onyx-toast-message-progress-bar-color: var(--onyx-color-base-danger-400); } .onyx-toast-message--warning { --onyx-toast-message-color: var(--onyx-color-text-icons-warning-bold); --onyx-toast-message-background-color: var(--onyx-color-base-warning-100); --onyx-toast-message-border-color: var(--onyx-color-base-warning-300); --onyx-toast-message-outline-color: var(--onyx-color-component-focus-warning); --onyx-toast-message-progress-bar-color: var(--onyx-color-base-warning-400); } .onyx-toast-message--success { --onyx-toast-message-color: var(--onyx-color-text-icons-success-bold); --onyx-toast-message-background-color: var(--onyx-color-base-success-100); --onyx-toast-message-border-color: var(--onyx-color-base-success-300); --onyx-toast-message-outline-color: var(--onyx-color-component-focus-success); --onyx-toast-message-progress-bar-color: var(--onyx-color-base-success-400); } }@layer onyx.component { .onyx-toast { padding: 0; border: none; background: none; z-index: var(--onyx-z-index-notification); position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); overflow: auto; width: max-content; max-width: 100%; max-height: calc(100% - var(--onyx-spacing-xl)); } .onyx-toast .onyx-toast-message { margin: var(--onyx-spacing-2xs) var(--onyx-grid-margin); max-width: calc(100% - 2 * var(--onyx-grid-margin)); } .onyx-toast .onyx-toast-message:last-child { margin-bottom: var(--onyx-spacing-xl); } }@layer onyx.component { .onyx-app { height: 100vh; width: 100vw; display: grid; grid-template-rows: max-content 1fr; container-type: inline-size; } .onyx-app--horizontal { grid-template-rows: none; grid-template-columns: max-content 1fr; } .onyx-app:not(:has(> .onyx-app__nav)) { grid-template-rows: 1fr; } .onyx-app__nav { z-index: var(--onyx-z-index-navigation); } .onyx-app__page { overflow: hidden auto; } }/** * Mixin to define common onyx sizes (e.g. used for icons). */ /** * Mixin to define h1-h6 headline font size and line height. */ @layer onyx.component { .onyx-avatar { width: var(--onyx-avatar-size); height: var(--onyx-avatar-size); min-width: var(--onyx-avatar-size); border-radius: var(--onyx-radius-full); background-color: var(--onyx-color-base-primary-200); color: var(--onyx-color-text-icons-primary-bold); font-family: var(--onyx-font-family-paragraph); line-height: normal; font-weight: var(--onyx-font-weight-semibold); display: flex; align-items: center; justify-content: center; } .onyx-avatar--custom { --onyx-avatar-padding: var(--onyx-spacing-sm); width: max-content; padding: var(--onyx-avatar-padding); } .onyx-avatar__image { border-radius: inherit; height: 100%; width: 100%; object-fit: cover; } .onyx-avatar__icon { --icon-size: 1em; } .onyx-avatar--16px { --onyx-avatar-size: 1rem; font-size: 0.5rem; --onyx-avatar-padding: var(--onyx-spacing-4xs); } .onyx-avatar--24px { --onyx-avatar-size: 1.5rem; font-size: 0.625rem; --onyx-avatar-padding: var(--onyx-spacing-3xs); } .onyx-avatar--32px { --onyx-avatar-size: 2rem; font-size: 0.875rem; --onyx-avatar-padding: var(--onyx-spacing-2xs); } .onyx-avatar--48px { --onyx-avatar-size: 3rem; font-size: 1.25rem; } .onyx-avatar--64px { --onyx-avatar-size: 4rem; font-size: 1.75rem; } .onyx-avatar--96px { --onyx-avatar-size: 6rem; font-size: 3rem; } }@layer onyx.component { .onyx-avatar-stack { display: flex; align-items: center; flex-wrap: wrap; width: max-content; max-width: 100%; } .onyx-avatar-stack > .onyx-avatar { border: var(--onyx-1px-in-rem) solid var(--onyx-color-base-primary-700); } .onyx-avatar-stack > .onyx-avatar:not(:last-child) { margin-right: calc(-0.5 * var(--onyx-avatar-size) - var(--onyx-1px-in-rem)); } }@layer onyx.component { .onyx-tooltip { /** * CSS [length](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/length) value that can be used to add an extra offset/margin the tooltip. */ --offset: 0rem; --onyx-tooltip-wedge-size: 0.5rem; --onyx-tooltip-max-width: 19rem; position: fixed; min-width: var(--onyx-spacing-3xl); width: max-content; max-width: min(var(--onyx-tooltip-max-width), 100vw); height: max-content; overflow: hidden; padding: 0; --offset-with-wedge: calc(var(--offset) + var(--onyx-tooltip-wedge-size)); --background-color: var(--onyx-color-base-neutral-900); --color: var(--onyx-color-text-icons-neutral-inverted); } .onyx-tooltip--danger { --background-color: var(--onyx-color-base-danger-200); --color: var(--onyx-color-text-icons-danger-bold); } .onyx-tooltip--success { --background-color: var(--onyx-color-base-success-200); --color: var(--onyx-color-text-icons-success-bold); } .onyx-tooltip:popover-open { border: none; outline: none; background: none; } .onyx-tooltip--content { position: relative; border-radius: var(--onyx-radius-sm); padding: var(--onyx-density-2xs) var(--onyx-density-sm); display: flex; justify-content: center; align-items: center; gap: var(--onyx-density-2xs); margin: 0 0 var(--offset-with-wedge) 0; background-color: var(--background-color); color: var(--color); font-family: var(--onyx-font-family-paragraph); text-align: center; white-space: pre-line; } .onyx-tooltip--content::after { content: " "; position: fixed; position-anchor: var(--onyx-tooltip-anchor); width: calc(2 * var(--onyx-tooltip-wedge-size)); height: calc(2 * var(--onyx-tooltip-wedge-size)); border-width: var(--onyx-tooltip-wedge-size); border-style: solid; border-color: var(--background-color) transparent transparent; white-space: normal; /* default styles target position "top": wedge points down, apex at trigger's top edge */ top: calc(anchor(top) - var(--offset) - var(--onyx-tooltip-wedge-size)); left: calc(anchor(center) - var(--onyx-tooltip-wedge-size)); } .onyx-tooltip--dont-support-anchor .onyx-tooltip--content::after { position: absolute; top: 100%; left: 50%; margin-left: calc(-1 * var(--onyx-tooltip-wedge-size)); } .onyx-tooltip--position-bottom .onyx-tooltip--content { margin: var(--offset-with-wedge) 0 0 0; } .onyx-tooltip--position-bottom .onyx-tooltip--content::after { border-color: transparent transparent var(--background-color); top: calc(anchor(bottom) + var(--offset) - var(--onyx-tooltip-wedge-size)); left: calc(anchor(center) - var(--onyx-tooltip-wedge-size)); } .onyx-tooltip--position-bottom.onyx-tooltip--dont-support-anchor .onyx-tooltip--content::after { top: calc(-2 * var(--onyx-tooltip-wedge-size)); left: 50%; } .onyx-tooltip--position-left .onyx-tooltip--content { margin: 0 var(--offset-with-wedge) 0 0; } .onyx-tooltip--position-left .onyx-tooltip--content::after { border-color: transparent transparent transparent var(--background-color); top: calc(anchor(center) - var(--onyx-tooltip-wedge-size)); left: calc(anchor(left) - var(--offset) - var(--onyx-tooltip-wedge-size)); } .onyx-tooltip--position-left.onyx-tooltip--dont-support-anchor .onyx-tooltip--content::after { right: 0; left: 100%; transform: translateX(var(--onyx-tooltip-wedge-size)); top: 50%; margin-left: 0; margin-top: calc(-1 * var(--onyx-tooltip-wedge-size)); } .onyx-tooltip--position-right .onyx-tooltip--content { margin: 0 0 0 var(--offset-with-wedge); } .onyx-tooltip--position-right .onyx-tooltip--content::after { border-color: transparent var(--background-color) transparent transparent; top: calc(anchor(center) - var(--onyx-tooltip-wedge-size)); left: calc(anchor(right) + var(--offset) - var(--onyx-tooltip-wedge-size)); } .onyx-tooltip--position-right.onyx-tooltip--dont-support-anchor .onyx-tooltip--content::after { left: 0; right: 100%; transform: translateX(calc(-1 * var(--onyx-tooltip-wedge-size))); top: 50%; margin-left: 0; margin-top: calc(-1 * var(--onyx-tooltip-wedge-size)); } .onyx-tooltip--without-wedge .onyx-tooltip--content::after, .onyx-tooltip--position-top-left .onyx-tooltip--content::after, .onyx-tooltip--position-top-right .onyx-tooltip--content::after, .onyx-tooltip--position-bottom-left .onyx-tooltip--content::after, .onyx-tooltip--position-bottom-right .onyx-tooltip--content::after { display: none; } .onyx-tooltip--position-top-left .onyx-tooltip--content { margin: 0 var(--offset-with-wedge) var(--offset-with-wedge) 0; } .onyx-tooltip--position-top-right .onyx-tooltip--content { margin: 0 0 var(--offset-with-wedge) var(--offset-with-wedge); } .onyx-tooltip--position-bottom-left .onyx-tooltip--content { margin: var(--offset-with-wedge) var(--offset-with-wedge) 0 0; } .onyx-tooltip--position-bottom-right .onyx-tooltip--content { margin: var(--onyx-tooltip-wedge-size) 0 0 var(--onyx-tooltip-wedge-size); } .onyx-tooltip--alignment-left.onyx-tooltip--position-top, .onyx-tooltip--alignment-left.onyx-tooltip--position-bottom { left: calc(-1 * anchor-size(width) / 2 - 2 * var(--onyx-tooltip-wedge-size)); } .onyx-tooltip--alignment-left.onyx-tooltip--position-top.onyx-tooltip--dont-support-anchor, .onyx-tooltip--alignment-left.onyx-tooltip--position-bottom.onyx-tooltip--dont-support-anchor { transform: translateX(calc(-2 * var(--onyx-tooltip-wedge-size))); } .onyx-tooltip--alignment-left.onyx-tooltip--position-top.onyx-tooltip--aligns-with-edge, .onyx-tooltip--alignment-left.onyx-tooltip--position-bottom.onyx-tooltip--aligns-with-edge { transform: translateX(100%); } .onyx-tooltip--alignment-left.onyx-tooltip--position-top.onyx-tooltip--aligns-with-edge.onyx-tooltip--dont-support-anchor, .onyx-tooltip--alignment-left.onyx-tooltip--position-bottom.onyx-tooltip--aligns-with-edge.onyx-tooltip--dont-support-anchor { transform: none; } .onyx-tooltip--alignment-left.onyx-tooltip--position-top .onyx-tooltip--content::after, .onyx-tooltip--alignment-left.onyx-tooltip--position-bottom .onyx-tooltip--content::after { left: calc(anchor(center) - var(--onyx-tooltip-wedge-size)); } .onyx-tooltip--alignment-left.onyx-tooltip--position-top.onyx-tooltip--dont-support-anchor .onyx-tooltip--content::after, .onyx-tooltip--alignment-left.onyx-tooltip--position-bottom.onyx-tooltip--dont-support-anchor .onyx-tooltip--content::after { left: calc(2 * var(--onyx-tooltip-wedge-size)); } .onyx-tooltip--alignment-right.onyx-tooltip--position-top, .onyx-tooltip--alignment-right.onyx-tooltip--position-bottom { right: calc(-1 * anchor-size(width) / 2 - 2 * var(--onyx-tooltip-wedge-size)); } .onyx-tooltip--alignment-right.onyx-tooltip--position-top.onyx-tooltip--dont-support-anchor, .onyx-tooltip--alignment-right.onyx-tooltip--position-bottom.onyx-tooltip--dont-support-anchor { transform: translateX(calc(2 * var(--onyx-tooltip-wedge-size))); } .onyx-tooltip--alignment-right.onyx-tooltip--position-top.onyx-tooltip--aligns-with-edge, .onyx-tooltip--alignment-right.onyx-tooltip--position-bottom.onyx-tooltip--aligns-with-edge { transform: translateX(-100%); } .onyx-tooltip--alignment-right.onyx-tooltip--position-top.onyx-tooltip--aligns-with-edge.onyx-tooltip--dont-support-anchor, .onyx-tooltip--alignment-right.onyx-tooltip--position-bottom.onyx-tooltip--aligns-with-edge.onyx-tooltip--dont-support-anchor { transform: none; } .onyx-tooltip--alignment-right.onyx-tooltip--position-top .onyx-tooltip--content::after, .onyx-tooltip--alignment-right.onyx-tooltip--position-bottom .onyx-tooltip--content::after { left: calc(anchor(center) - var(--onyx-tooltip-wedge-size)); } .onyx-tooltip--alignment-right.onyx-tooltip--position-top.onyx-tooltip--dont-support-anchor .onyx-tooltip--content::after, .onyx-tooltip--alignment-right.onyx-tooltip--position-bottom.onyx-tooltip--dont-support-anchor .onyx-tooltip--content::after { left: calc(100% - 2 * var(--onyx-tooltip-wedge-size)); } } @layer onyx.component { .onyx-tooltip-wrapper { anchor-name: var(--onyx-tooltip-anchor); position: relative; width: max-content; height: max-content; place-content: center; } }@layer onyx.density { .onyx-density-compact .onyx-badge, :is(.onyx-badge).onyx-density-compact { --onyx-badge-icon-padding: var(--onyx-spacing-4xs); --onyx-badge-icon-size: 1rem; } } @layer onyx.density { .onyx-badge, .onyx-density-default .onyx-badge, :is(.onyx-badge).onyx-density-default { --onyx-badge-icon-padding: var(--onyx-spacing-3xs); --onyx-badge-icon-size: 1rem; } } @layer onyx.density { .onyx-density-cozy .onyx-badge, :is(.onyx-badge).onyx-density-cozy { --onyx-badge-icon-padding: var(--onyx-spacing-4xs); --onyx-badge-icon-size: 1.5rem; } } @layer onyx.component { .onyx-badge { --onyx-badge-background-color: var(--onyx-color-component-cta-default); --onyx-badge-hover-background-color: var(--onyx-color-component-cta-default-hover); --onyx-badge-focus-color: var(--onyx-color-component-focus-primary); --onyx-badge-active-background-color: var(--onyx-color-base-primary-700); display: inline-block; max-width: 100%; padding: var(--onyx-density-3xs) var(--onyx-density-sm); border-radius: var(--onyx-radius-component-badge); background-color: var(--onyx-badge-background-color); color: var(--onyx-color-text-icons-neutral-inverted); font-family: var(--onyx-font-family-paragraph); font-style: normal; vertical-align: middle; max-height: max-content; border: none; text-align: center; cursor: default; } .onyx-badge:has(.onyx-badge__icon) { padding: var(--onyx-badge-icon-padding); } .onyx-badge:has(.onyx-badge__icon) .onyx-icon { --icon-size: var(--onyx-badge-icon-size); } .onyx-badge:is(button) { cursor: pointer; outline: none; transition: background-color var(--onyx-duration-sm), box-shadow var(--onyx-duration-sm); } .onyx-badge:is(button):hover { background-color: var(--onyx-badge-hover-background-color); } .onyx-badge:is(button):focus-visible { outline: var(--onyx-outline-width) solid var(--onyx-badge-focus-color); } .onyx-badge:is(button):active { filter: brightness(0.9); } .onyx-badge--active { background-color: var(--onyx-badge-active-background-color); } .onyx-badge--neutral { --onyx-badge-background-color: var(--onyx-color-base-neutral-700); --onyx-badge-hover-background-color: var(--onyx-color-base-neutral-400); --onyx-badge-focus-color: var(--onyx-color-component-focus-neutral); --onyx-badge-active-background-color: var(--onyx-color-base-neutral-900); } .onyx-badge--danger { --onyx-badge-background-color: var(--onyx-color-base-danger-500); --onyx-badge-hover-background-color: var(--onyx-color-base-danger-200); --onyx-badge-focus-color: var(--onyx-color-component-focus-danger); --onyx-badge-active-background-color: var(--onyx-color-base-danger-700); } .onyx-badge--warning { --onyx-badge-background-color: var(--onyx-color-base-warning-500); --onyx-badge-hover-background-color: var(--onyx-color-base-warning-200); --onyx-badge-focus-color: var(--onyx-color-component-focus-warning); --onyx-badge-active-background-color: var(--onyx-color-base-warning-700); } .onyx-badge--success { --onyx-badge-background-color: var(--onyx-color-base-success-500); --onyx-badge-hover-background-color: var(--onyx-color-base-success-200); --onyx-badge-focus-color: var(--onyx-color-component-focus-success); --onyx-badge-active-background-color: var(--onyx-color-base-success-700); } .onyx-badge--info { --onyx-badge-background-color: var(--onyx-color-base-info-500); --onyx-badge-hover-background-color: var(--onyx-color-base-info-200); --onyx-badge-focus-color: var(--onyx-color-base-info-200); --onyx-badge-active-background-color: var(--onyx-color-base-info-700); } .onyx-badge__icon { display: flex; } .onyx-badge--dot { height: max-content; width: max-content; padding: var(--onyx-density-2xs); } }@layer onyx.component { .onyx-bottom-bar { position: sticky; bottom: 0; width: 100%; background-color: var(--onyx-color-base-background-blank); container-type: inline-size; } .onyx-bottom-bar--border { border-top: var(--onyx-1px-in-rem) solid var(--onyx-color-component-border-neutral); } .onyx-bottom-bar__content { display: flex; justify-content: space-between; gap: var(--onyx-density-xs); overflow-x: auto; padding: var(--onyx-spacing-2xs) var(--onyx-modal-padding-inline, var(--onyx-grid-margin)); } .onyx-bottom-bar__content--left, .onyx-bottom-bar__content--right { display: flex; gap: var(--onyx-density-xs); } }@layer onyx.component { .onyx-list-item { --onyx-list-item-color: var(--onyx-color-text-icons-neutral-intense); --onyx-list-item-color-selected: var(--onyx-color-text-icons-primary-bold); --onyx-list-item-background: var(--onyx-color-base-background-blank); --onyx-list-item-background-hover: var(--onyx-color-base-primary-100); --onyx-list-item-background-selected: var(--onyx-color-base-primary-200); --onyx-list-item-padding: var(--onyx-density-xs) var(--onyx-density-sm); font-family: var(--onyx-font-family-paragraph); color: var(--onyx-list-item-color); padding: var(--onyx-list-item-padding); background-color: var(--onyx-list-item-background); font-weight: var(--onyx-font-weight-regular); font-size: var(--onyx-font-size-md); line-height: var(--onyx-font-line-height-md); border: none; width: 100%; outline: none; display: flex; align-items: center; gap: var(--onyx-density-sm); } .onyx-list-item:not(.onyx-list-item--disabled) { cursor: pointer; } .onyx-list-item:not(.onyx-list-item--disabled):hover, .onyx-list-item:not(.onyx-list-item--disabled):focus-within, .onyx-list-item:not(.onyx-list-item--disabled).onyx-list-item--active { background-color: var(--onyx-list-item-background-hover); } .onyx-list-item:not(.onyx-list-item--disabled):focus-within { color: var(--onyx-list-item-color-selected); } .onyx-list-item:not(.onyx-list-item--disabled).onyx-list-item--selected { background-color: var(--onyx-list-item-background-selected); } .onyx-list-item:not(.onyx-list-item--disabled).onyx-list-item--selected:hover, .onyx-list-item:not(.onyx-list-item--disabled).onyx-list-item--selected.onyx-list-item--active { color: var(--onyx-list-item-color-selected); } .onyx-list-item:not(.onyx-list-item--disabled).onyx-list-item--checked:hover, .onyx-list-item:not(.onyx-list-item--disabled).onyx-list-item--checked.onyx-list-item--active { background-color: var(--onyx-list-item-background-selected); color: var(--onyx-list-item-color-selected); } .onyx-list-item--disabled { color: var(--onyx-color-text-icons-neutral-soft); } .onyx-list-item--danger { --onyx-list-item-color: var(--onyx-color-text-icons-danger-intense); --onyx-list-item-color-selected: var(--onyx-color-text-icons-danger-intense); --onyx-list-item-background-hover: var(--onyx-color-base-danger-100); --onyx-list-item-background-selected: var(--onyx-color-base-danger-200); } }@layer onyx.component { .onyx-external-link-icon { vertical-align: text-top; place-self: baseline; } }@layer onyx.reset { button.onyx-menu-item__trigger, a.onyx-menu-item__trigger { all: unset; } } @layer onyx.component { .onyx-menu-item { --onyx-menu-item-gap: var(--onyx-density-sm); padding: 0; } .onyx-menu-item__trigger { display: flex; align-items: center; gap: var(--onyx-menu-item-gap); color: inherit; text-decoration: none; padding: var(--onyx-list-item-padding); width: 100%; border-radius: inherit; } .onyx-menu-item__trigger:enabled { cursor: pointer; } .onyx-menu-item__trigger:focus { outline: none; } .onyx-menu-item__trigger:is(button) { background-color: inherit; border: none; } .onyx-menu-item__children { padding: 0; width: 100%; display: flex; flex-direction: column; } .onyx-menu-item__children:has(> .onyx-menu-item--internal.onyx-menu-item--open) > .onyx-menu-item:not(.onyx-menu-item--open) { display: none; } .onyx-menu-item__chevron { flex: 1 0 1.5rem; display: flex; justify-content: end; } .onyx-menu-item__back { font-weight: var(--onyx-font-weight-semibold); } .onyx-menu-item__popover { width: 100%; } .onyx-menu-item__popover .onyx-basic-popover__dialog { margin-top: calc(-1 * var(--onyx-spacing-2xs)); } }@layer onyx.component { .onyx-breadcrumb-item { --onyx-breadcrumb-item-color: var(--onyx-color-text-icons-neutral-medium); --onyx-breadcrumb-item-color-hover: var(--onyx-color-text-icons-neutral-intense); --onyx-breadcrumb-item-background: transparent; --onyx-breadcrumb-item-background-hover: var(--onyx-color-base-neutral-200); --onyx-breadcrumb-item-outline-color: var(--onyx-color-component-focus-neutral); --onyx-breadcrumb-item-padding-vertical: var(--onyx-density-3xs); --onyx-breadcrumb-item-padding-inline: var(--onyx-density-xs); list-style: none; font-family: var(--onyx-font-family-paragraph); color: var(--onyx-breadcrumb-item-color); background-color: var(--onyx-breadcrumb-item-background); display: inline-flex; justify-content: center; align-items: center; } .onyx-breadcrumb-item__link { display: inherit; justify-content: inherit; align-items: inherit; gap: var(--onyx-density-3xs); padding: var(--onyx-breadcrumb-item-padding-vertical) var(--onyx-breadcrumb-item-padding-inline); border-radius: var(--onyx-radius-sm); border: none; background-color: transparent; cursor: pointer; } .onyx-breadcrumb-item__link:hover { color: var(--onyx-breadcrumb-item-color-hover); background-color: var(--onyx-breadcrumb-item-background-hover); } .onyx-breadcrumb-item__link:focus-visible { outline: var(--onyx-outline-width) solid var(--onyx-breadcrumb-item-outline-color); } .onyx-breadcrumb-item--active { --onyx-breadcrumb-item-color: var(--onyx-color-text-icons-primary-intense); --onyx-breadcrumb-item-color-hover: var(--onyx-color-text-icons-primary-bold); --onyx-breadcrumb-item-background-hover: var(--onyx-color-base-primary-200); --onyx-breadcrumb-item-outline-color: var(--onyx-color-component-focus-primary); } .onyx-breadcrumb-item::before { content: "/"; margin-right: var(--onyx-density-xs); color: var(--onyx-color-text-icons-neutral-medium); } .onyx-breadcrumb-item:has(.onyx-icon:only-child) { --onyx-breadcrumb-item-padding-vertical: var(--onyx-density-2xs); --onyx-breadcrumb-item-padding-inline: var(--onyx-breadcrumb-item-padding-vertical); } .onyx-breadcrumb-item__skeleton { padding: 0; cursor: initial; height: calc(1lh + 2 * var(--onyx-breadcrumb-item-padding-vertical)); width: calc(1.5rem + 2 * var(--onyx-breadcrumb-item-padding-inline)); } }@layer onyx.component { .onyx-more-list { display: flex; align-items: center; gap: var(--onyx-spacing-4xs); contain: inline-size; width: 100%; } .onyx-more-list__elements { display: inherit; align-items: inherit; gap: inherit; overflow-x: clip; } .onyx-more-list__indicator { min-width: max-content; max-width: 100%; } .onyx-more-list--vertical { width: auto; height: 100%; flex-direction: column; align-items: inherit; } .onyx-more-list--vertical .onyx-more-list__elements { display: flex; flex-direction: column; overflow-y: clip; overflow-x: unset; } .onyx-more-list--vertical .onyx-more-list__indicator { min-height: max-content; max-height: 100%; min-width: inherit; max-width: inherit; } }@layer onyx.component { .onyx-breadcrumb--container { border-bottom: var(--onyx-1px-in-rem) solid var(--onyx-color-component-border-neutral); background-color: var(--onyx-color-base-background-blank); } .onyx-breadcrumb--container .onyx-breadcrumb__list { padding: var(--onyx-density-xs) var(--onyx-grid-margin); } .onyx-breadcrumb__list { list-style: none; padding: 0; font-family: var(--onyx-font-family-paragraph); display: flex; align-items: center; gap: var(--onyx-density-xs); } .onyx-breadcrumb__home .onyx-breadcrumb-item__skeleton { width: 1.5rem; } .onyx-breadcrumb__home::before { display: none; } }@layer onyx.component { .onyx-card { --onyx-card-padding: var(--onyx-density-md); --onyx-card-gap: var(--onyx-density-xs); display: flex; flex-direction: column; padding: var(--onyx-card-padding); gap: var(--onyx-card-gap); border-radius: var(--onyx-radius-md); border: var(--onyx-1px-in-rem) solid var(--onyx-color-component-border-neutral); background-color: var(--onyx-color-base-background-blank); font-family: var(--onyx-font-family-paragraph); color: var(--onyx-color-text-icons-neutral-intense); max-width: 100%; } .onyx-card:is(button, a) { cursor: pointer; text-align: initial; } .onyx-card:is(button, a):focus-visible { border-color: var(--onyx-color-component-focus-primary); outline: var(--onyx-outline-width) solid var(--onyx-color-component-focus-primary); } }@layer onyx.component { .onyx-calendar-cell { --onyx-calendar-cell-date-size: 2rem; --onyx-calendar-cell-padding: var(--onyx-density-2xs); --onyx-calendar-cell-date-background: transparent; --onyx-calendar-cell-date-background-hover: var(--onyx-color-base-neutral-300); --onyx-calendar-cell-date-color: inherit; --onyx-calendar-cell-date-color-hover: var(--onyx-calendar-cell-date-color); --onyx-calendar-cell-range-background: var(--onyx-color-text-icons-primary-soft); --onyx-calendar-cell-range-color: var(--onyx-color-text-icons-primary-bold); --onyx-calendar-cell-focus-color: var(--onyx-color-component-focus-primary); font-family: var(--onyx-font-family-paragraph); color: var(--onyx-color-text-icons-neutral-medium); font-size: var(--onyx-font-size-md); font-weight: var(--onyx-font-weight-regular); line-height: var(--onyx-font-line-height-md); padding: 0; } .onyx-calendar-cell--tinted .onyx-calendar-cell__content { background-color: var(--onyx-color-base-background-tinted); } .onyx-calendar-cell__header, .onyx-calendar-cell__main { width: 100%; padding-inline: var(--onyx-calendar-cell-padding); } .onyx-calendar-cell__content { background-color: transparent; border: none; padding-block: var(--onyx-calendar-cell-padding); padding-inline: 0; color: inherit; font: inherit; display: flex; flex-direction: column; gap: var(--onyx-density-2xs); height: 100%; width: 100%; aspect-ratio: 1; text-align: left; } .onyx-calendar-cell__content:disabled, .onyx-calendar-cell__content--disabled { color: var(--onyx-color-base-neutral-300); } .onyx-calendar-cell__content--disabled { --onyx-calendar-cell-date-color-hover: var(--onyx-color-text-icons-neutral-medium); } .onyx-calendar-cell__content:enabled { cursor: pointer; } .onyx-calendar-cell__content:enabled:hover .onyx-calendar-cell__date { color: var(--onyx-calendar-cell-date-color-hover); background-color: var(--onyx-calendar-cell-date-background-hover); } .onyx-calendar-cell__content:enabled:focus-visible { outline: none; } .onyx-calendar-cell__content:enabled:focus-visible .onyx-calendar-cell__date { color: var(--onyx-calendar-cell-date-color-hover); border: var(--onyx-outline-width) solid var(--onyx-calendar-cell-focus-color); } .onyx-calendar-cell__date { display: flex; align-items: center; justify-content: center; min-width: var(--onyx-calendar-cell-date-size); width: var(--onyx-calendar-cell-date-size); height: var(--onyx-calendar-cell-date-size); border-radius: var(--onyx-radius-full); background-color: var(--onyx-calendar-cell-date-background); color: var(--onyx-calendar-cell-date-color); } .onyx-calendar-cell--primary { --onyx-calendar-cell-date-background: var(--onyx-color-base-primary-500); --onyx-calendar-cell-date-background-hover: var(--onyx-color-base-primary-700); --onyx-calendar-cell-date-color: var(--onyx-color-neutral-grayscale-white); } .onyx-calendar-cell--range-start, .onyx-calendar-cell--range-middle, .onyx-calendar-cell--range-end { --onyx-calendar-cell-focus-color: var(--onyx-color-base-primary-600); } .onyx-calendar-cell--range-start .onyx-calendar-cell__header { padding-right: 0; } .onyx-calendar-cell--range-start .onyx-calendar-cell__date-container { background-color: var(--onyx-calendar-cell-range-background); border-top-left-radius: var(--onyx-radius-full); border-bottom-left-radius: var(--onyx-radius-full); } .onyx-calendar-cell--range-middle { --onyx-calendar-cell-date-background: var(--onyx-calendar-cell-range-background); --onyx-calendar-cell-date-background-hover: var(--onyx-calendar-cell-date-background); --onyx-calendar-cell-date-color: var(--onyx-calendar-cell-range-color); } .onyx-calendar-cell--range-middle .onyx-calendar-cell__header { padding-inline: 0; } .onyx-calendar-cell--range-middle .onyx-calendar-cell__date-container { padding-inline: var(--onyx-calendar-cell-padding); background-color: var(--onyx-calendar-cell-range-background); } .onyx-calendar-cell--range-end .onyx-calendar-cell__header { padding-inline: 0; } .onyx-calendar-cell--range-end .onyx-calendar-cell__date-container { padding-left: var(--onyx-calendar-cell-padding); background-color: var(--onyx-calendar-cell-range-background); border-top-right-radius: var(--onyx-radius-full); border-bottom-right-radius: var(--onyx-radius-full); width: calc(var(--onyx-calendar-cell-padding) + var(--onyx-calendar-cell-date-size)); min-width: var(--onyx-calendar-cell-date-size); } .onyx-calendar-cell--neutral { --onyx-calendar-cell-date-background: var(--onyx-color-base-neutral-500); --onyx-calendar-cell-date-color: var(--onyx-color-neutral-grayscale-white); } .onyx-calendar-cell--neutral[aria-disabled=true] { --onyx-calendar-cell-date-background: var(--onyx-color-base-neutral-300); --onyx-calendar-cell-date-color: var(--onyx-color-text-icons-neutral-medium); } .onyx-calendar-cell--neutral.onyx-calendar-cell--range-middle .onyx-calendar-cell__date { --onyx-calendar-cell-date-background: var(--onyx-color-base-primary-700); --onyx-calendar-cell-date-background-hover: var(--onyx-color-base-neutral-300); --onyx-calendar-cell-date-color: var(--onyx-color-neutral-grayscale-white); } .onyx-calendar-cell--small .onyx-calendar-cell__content { justify-content: center; align-items: center; } .onyx-calendar-cell--small .onyx-calendar-cell__header { display: flex; justify-content: inherit; align-items: inherit; } .onyx-calendar-cell--small.onyx-calendar-cell--range-start .onyx-calendar-cell__header { justify-content: flex-end; } .onyx-calendar-cell--small.onyx-calendar-cell--range-start .onyx-calendar-cell__date-container { width: calc(50% + 0.5 * var(--onyx-calendar-cell-date-size)); } .onyx-calendar-cell--small.onyx-calendar-cell--range-middle .onyx-calendar-cell__date-container { width: 100%; display: flex; align-items: center; justify-content: center; } .onyx-calendar-cell--small.onyx-calendar-cell--range-end .onyx-calendar-cell__header { justify-content: flex-start; } .onyx-calendar-cell--small.onyx-calendar-cell--range-end .onyx-calendar-cell__date-container { display: flex; justify-content: flex-end; width: calc(50% + 0.5 * var(--onyx-calendar-cell-date-size)); } }@layer onyx.component { .onyx-tag { display: inline-flex; align-items: center; gap: var(--onyx-density-2xs); width: max-content; max-width: 100%; padding: var(--onyx-density-3xs) var(--onyx-density-xs); border-radius: var(--onyx-radius-xs); font-family: var(--onyx-font-family-paragraph); color: var(--onyx-tag-color); border: var(--onyx-1px-in-rem) solid var(--onyx-tag-border-color); background-color: var(--onyx-tag-background-color); } .onyx-tag--primary { --onyx-tag-background-color: var(--onyx-color-base-primary-100); --onyx-tag-border-color: var(--onyx-color-component-border-primary); --onyx-tag-color: var(--onyx-color-text-icons-primary-bold); --onyx-tag-hover-background-color: var(--onyx-color-base-primary-200); --onyx-tag-focus-color: var(--onyx-color-component-focus-primary); --onyx-tag-focus-background-color: var(--onyx-color-base-primary-200); } .onyx-tag--neutral { --onyx-tag-background-color: var(--onyx-color-base-background-blank); --onyx-tag-border-color: var(--onyx-color-base-neutral-400); --onyx-tag-color: var(--onyx-color-text-icons-neutral-intense); --onyx-tag-hover-background-color: var(--onyx-color-base-neutral-200); --onyx-tag-focus-color: var(--onyx-color-component-focus-neutral); --onyx-tag-focus-background-color: var(--onyx-color-base-neutral-200); } .onyx-tag--danger { --onyx-tag-background-color: var(--onyx-color-base-danger-100); --onyx-tag-border-color: var(--onyx-color-base-danger-400); --onyx-tag-color: var(--onyx-color-text-icons-danger-bold); --onyx-tag-hover-background-color: var(--onyx-color-base-danger-200); --onyx-tag-focus-color: var(--onyx-color-component-focus-danger); --onyx-tag-focus-background-color: var(--onyx-color-base-danger-200); } .onyx-tag--warning { --onyx-tag-background-color: var(--onyx-color-base-warning-100); --onyx-tag-border-color: var(--onyx-color-base-warning-400); --onyx-tag-color: var(--onyx-color-text-icons-warning-bold); --onyx-tag-hover-background-color: var(--onyx-color-base-warning-200); --onyx-tag-focus-color: var(--onyx-color-component-focus-warning); --onyx-tag-focus-background-color: var(--onyx-color-base-warning-200); } .onyx-tag--success { --onyx-tag-background-color: var(--onyx-color-base-success-100); --onyx-tag-border-color: var(--onyx-color-base-success-400); --onyx-tag-color: var(--onyx-color-text-icons-success-bold); --onyx-tag-hover-background-color: var(--onyx-color-base-success-200); --onyx-tag-focus-color: var(--onyx-color-component-focus-success); --onyx-tag-focus-background-color: var(--onyx-color-base-success-200); } .onyx-tag--info { --onyx-tag-background-color: var(--onyx-color-base-info-100); --onyx-tag-border-color: var(--onyx-color-base-info-400); --onyx-tag-color: var(--onyx-color-text-icons-info-bold); --onyx-tag-hover-background-color: var(--onyx-color-base-info-200); --onyx-tag-focus-color: var(--onyx-color-base-info-200); --onyx-tag-focus-background-color: var(--onyx-color-base-info-200); } .onyx-tag--interactive { cursor: pointer; } .onyx-tag--interactive:hover { background-color: var(--onyx-tag-hover-background-color); } .onyx-tag--interactive:focus-visible { background-color: var(--onyx-tag-focus-background-color); outline: var(--onyx-outline-width) solid var(--onyx-tag-focus-color); } .onyx-tag-skeleton { width: var(--onyx-density-2xl); height: calc(1.5rem + 2 * var(--onyx-density-3xs)); display: inline-block; vertical-align: middle; } }@layer onyx.component { .onyx-calendar__picker-grid { display: grid; scroll-behavior: auto; grid-template-columns: repeat(3, 1fr); gap: var(--onyx-density-2xs); padding: var(--onyx-density-xs); aspect-ratio: 1; overflow-y: auto; min-width: 16rem; } .onyx-calendar__picker-grid--inline { width: 100%; aspect-ratio: 1; background-color: var(--onyx-color-base-background-blank); border: var(--onyx-1px-in-rem) solid var(--onyx-color-component-border-neutral); border-radius: var(--onyx-calendar-border-radius); } .onyx-calendar__picker-grid .onyx-button { width: 100%; } .onyx-calendar--small .onyx-calendar__picker-grid { border: var(--onyx-1px-in-rem) solid var(--onyx-color-component-border-neutral); border-radius: var(--onyx-calendar-border-radius); background-color: var(--onyx-color-base-background-blank); width: 100%; height: calc(85.7142857143cqw + calc(var(--onyx-font-line-height-sm) + 2 * var(--onyx-density-xs)) + var(--onyx-1px-in-rem)); } }@layer onyx.component { .onyx-calendar { --onyx-calendar-border-radius: var(--onyx-radius-md); display: flex; flex-direction: column; flex-grow: 1; gap: var(--onyx-density-sm); color: var(--onyx-color-text-icons-neutral-medium); font-family: var(--onyx-font-family-paragraph); } .onyx-calendar__header { display: flex; justify-content: space-between; align-items: center; } .onyx-calendar__header .control-container__month-buttons { display: flex; margin-left: var(--onyx-density-md); } .onyx-calendar__header .control-container { display: flex; gap: var(--onyx-density-xs); align-items: center; } .onyx-calendar__header .control-container__date-display { min-width: calc(3 * var(--onyx-density-2xl)); text-align: center; } .onyx-calendar .onyx-calendar__body { container-type: inline-size; } .onyx-calendar .onyx-calendar__body table { width: 100%; border: var(--onyx-1px-in-rem) solid var(--onyx-color-component-border-neutral); border-radius: var(--onyx-calendar-border-radius); table-layout: fixed; overflow: hidden; box-sizing: border-box; border-spacing: 0; background-color: var(--onyx-color-base-background-blank); } .onyx-calendar .onyx-calendar__body table th { padding: var(--onyx-density-xs); justify-content: center; align-items: center; background-color: var(--onyx-color-base-neutral-200); border-bottom: var(--onyx-1px-in-rem) solid var(--onyx-color-component-border-neutral); font-family: var(--onyx-font-family-h4); font-weight: var(--onyx-font-weight-semibold); font-size: var(--onyx-font-size-sm); line-height: var(--onyx-font-line-height-sm); } .onyx-calendar .onyx-calendar__body table th[scope=row] { border-right: var(--onyx-1px-in-rem) solid var(--onyx-color-component-border-neutral); } .onyx-calendar .onyx-calendar__body table:has(th[scope=row]) th:first-of-type { width: 2.5rem; } .onyx-calendar .onyx-calendar__body table:has(th[scope=row]) th:first-of-type[role=button]:not([aria-disabled=true]) { cursor: pointer; } .onyx-calendar .onyx-calendar__body table:has(th[scope=row]) th:first-of-type[role=button]:not([aria-disabled=true]):hover { background-color: var(--onyx-color-base-neutral-300); } .onyx-calendar .onyx-calendar__body table:has(th[scope=row]) tr:last-of-type th[scope=row] { border-bottom: none; } .onyx-calendar--big table th { border-right: var(--onyx-1px-in-rem) solid var(--onyx-color-component-border-neutral); } .onyx-calendar--big table th:last-of-type { border-right: none; } .onyx-calendar--big table td { border-bottom: var(--onyx-1px-in-rem) solid var(--onyx-color-component-border-neutral); border-right: var(--onyx-1px-in-rem) solid var(--onyx-color-component-border-neutral); } .onyx-calendar--big table td:last-of-type { border-right: none; padding-top: var(--onyx-1px-in-rem); } .onyx-calendar--big table tr:last-of-type td { border-bottom: none; } .onyx-calendar--small .time-control-container { width: 100%; } .onyx-calendar--small .control-container { gap: var(--onyx-density-2xs); } .onyx-calendar--small:has(th[scope=row]) th:first-of-type { border-bottom: none; } .onyx-calendar-skeleton { display: flex; flex-direction: column; gap: var(--onyx-density-sm); } .onyx-calendar-skeleton__header { width: 100%; height: var(--onyx-font-line-height-lg); } .onyx-calendar-skeleton__body { width: 100%; aspect-ratio: 1; } }@layer onyx.component { .onyx-checkbox { --onyx-checkbox-input-size: 1rem; --onyx-checkbox-input-padding: var(--onyx-density-sm); --onyx-checkbox-label-padding-vertical: var(--onyx-density-xs); font-family: var(--onyx-font-family-paragraph); color: var(--onyx-color-text-icons-neutral-intense); display: inline-flex; align-items: flex-start; cursor: pointer; width: max-content; max-width: 100%; } .onyx-tooltip-wrapper:has(.onyx-checkbox) { max-width: 100%; } .onyx-checkbox:has(.onyx-checkbox__label) { padding-right: var(--onyx-checkbox-label-padding-vertical); } .onyx-checkbox:hover .onyx-checkbox__input:enabled { border-color: var(--onyx-color-component-border-primary-hover); } .onyx-checkbox:hover .onyx-checkbox__input:user-invalid { border-color: var(--onyx-color-component-border-danger-hover); } .onyx-checkbox:has(.onyx-checkbox__input:focus-visible) .onyx-checkbox__container:has(.onyx-checkbox__input:enabled) { background-color: var(--onyx-color-base-primary-200); } .onyx-checkbox:has(.onyx-checkbox__input:focus-visible) .onyx-checkbox__input:enabled { border-color: var(--onyx-color-component-border-primary); } .onyx-checkbox:has(.onyx-checkbox__input:focus-visible) .onyx-checkbox__container:has(.onyx-checkbox__input:user-invalid) { background-color: var(--onyx-color-base-danger-200); } .onyx-checkbox:has(.onyx-checkbox__input:focus-visible) .onyx-checkbox__input:user-invalid { border-color: var(--onyx-color-component-border-danger); } .onyx-checkbox:has(.onyx-checkbox__input:disabled) { cursor: default; color: var(--onyx-color-text-icons-neutral-soft); } .onyx-checkbox:has(.onyx-checkbox__loading) { cursor: default; } .onyx-checkbox__container { display: inline-flex; align-items: flex-start; padding: var(--onyx-checkbox-input-padding); border-radius: var(--onyx-radius-full); } .onyx-checkbox__label { display: inline-block; padding: var(--onyx-checkbox-label-padding-vertical) 0; } .onyx-checkbox__input { height: var(--onyx-checkbox-input-size); width: var(--onyx-checkbox-input-size); appearance: none; margin: 0; border-radius: var(--onyx-radius-component-checkbox); outline: none; cursor: inherit; border: var(--onyx-1px-in-rem) solid var(--onyx-color-component-border-neutral); background: var(--onyx-color-base-background-blank); background-position: 50%; background-repeat: no-repeat; background-size: 100% 100%; } .onyx-checkbox__input:checked:enabled, .onyx-checkbox__input:indeterminate:enabled { border-color: var(--onyx-color-component-cta-default); background-color: var(--onyx-color-component-cta-default); } .onyx-checkbox__input:checked:enabled:hover, .onyx-checkbox__input:indeterminate:enabled:hover { background-color: var(--onyx-color-component-cta-default-hover); } .onyx-checkbox__input:checked:user-invalid, .onyx-checkbox__input:indeterminate:user-invalid { border-color: var(--onyx-color-component-cta-danger); background-color: var(--onyx-color-component-cta-danger); } .onyx-checkbox__input:checked:user-invalid:hover, .onyx-checkbox__input:indeterminate:user-invalid:hover { background-color: var(--onyx-color-component-cta-danger-hover); } .onyx-checkbox__input:checked:disabled, .onyx-checkbox__input:indeterminate:disabled { background-color: var(--onyx-color-base-neutral-300); } .onyx-checkbox__input:disabled { border-color: var(--onyx-color-base-neutral-300); } .onyx-checkbox__input:user-invalid { border-color: var(--onyx-color-component-border-danger); } .onyx-checkbox__input:checked::after { content: " "; background-color: var(--onyx-color-text-icons-neutral-inverted); width: 100%; height: 100%; display: block; clip-path: polygon(66.6% 33.7%, 40.7% 59.6%, 30.4% 49.3%, 26% 53.7%, 40.7% 68.4%, 71% 38.1%); } .onyx-checkbox__input:indeterminate::after { content: " "; background-color: var(--onyx-color-text-icons-neutral-inverted); width: 100%; height: 100%; display: block; clip-path: polygon(25% 46.9%, 75% 46.9%, 75% 53.1%, 25% 53.1%); } .onyx-checkbox__label, .onyx-checkbox__marker { padding: var(--onyx-checkbox-label-padding-vertical) 0; font-size: var(--onyx-font-size-md); line-height: var(--onyx-font-line-height-md); } .onyx-checkbox__loading { color: var(--onyx-color-text-icons-primary-intense); --indicator-size: var(--onyx-checkbox-input-size); } } @layer onyx.component { .onyx-checkbox-skeleton { --onyx-checkbox-input-size: 1rem; --onyx-checkbox-input-padding: var(--onyx-density-sm); display: flex; align-items: flex-start; gap: var(--onyx-checkbox-input-padding); padding: var(--onyx-checkbox-input-padding); width: max-content; } .onyx-checkbox-skeleton__input { height: var(--onyx-checkbox-input-size); width: var(--onyx-checkbox-input-size); } .onyx-checkbox-skeleton__label { height: var(--onyx-spacing-md); width: var(--onyx-spacing-3xl); } }@layer onyx.component { .onyx-info-tooltip__trigger { display: inline-flex; align-items: center; font-size: inherit; vertical-align: middle; --height: 1em; } .onyx-info-tooltip__trigger .onyx-icon { --icon-size: 1em; } }@layer onyx.component { .onyx-checkbox-group { padding: 0; border: none; width: max-content; max-width: 100%; min-width: unset; } .onyx-checkbox-group__label { display: flex; gap: var(--onyx-spacing-2xs); align-items: center; margin-bottom: var(--onyx-density-xs); } .onyx-checkbox-group__content { display: flex; } .onyx-checkbox-group__content--vertical { flex-direction: column; } .onyx-checkbox-group__content--vertical .onyx-checkbox-group__check-all { width: 100%; border-bottom: var(--onyx-1px-in-rem) solid var(--onyx-color-component-border-neutral); } .onyx-checkbox-group__content--horizontal { flex-flow: row wrap; column-gap: var(--onyx-density-xl); } .onyx-checkbox-group__content--horizontal .onyx-checkbox-group__check-all { border-right: var(--onyx-1px-in-rem) solid var(--onyx-color-component-border-neutral); } .onyx-checkbox-group__content--horizontal .onyx-checkbox-group__check-all .onyx-checkbox__label { padding-right: var(--onyx-density-md); } }/** * Mixin to define common onyx sizes (e.g. used for icons). */ /** * Mixin to define h1-h6 headline font size and line height. */ @layer onyx.component { .onyx-tab, .onyx-tab-skeleton { --onyx-tab-padding-vertical: var(--onyx-density-xs); --onyx-tab-highlight-gap: var(--onyx-density-3xs); } .onyx-tab--h1, .onyx-tab-skeleton--h1 { font-size: var(--onyx-font-size-xl); line-height: var(--onyx-font-line-height-xl); font-family: var(--onyx-font-family-h1); } .onyx-tab--h2, .onyx-tab-skeleton--h2 { font-size: var(--onyx-font-size-lg); line-height: var(--onyx-font-line-height-lg); font-family: var(--onyx-font-family-h2); } .onyx-tab--h3, .onyx-tab-skeleton--h3 { font-size: var(--onyx-font-size-md); line-height: var(--onyx-font-line-height-md); font-family: var(--onyx-font-family-h3); } .onyx-tab--h4, .onyx-tab--h5, .onyx-tab--h6, .onyx-tab-skeleton--h4, .onyx-tab-skeleton--h5, .onyx-tab-skeleton--h6 { font-size: var(--onyx-font-size-sm); line-height: var(--onyx-font-line-height-sm); font-family: var(--onyx-font-family-h4); } } @layer onyx.component { .onyx-tab { --onyx-tab-color: var(--onyx-color-text-icons-neutral-medium); --onyx-tab-color-selected: var(--onyx-color-text-icons-neutral-intense); --onyx-tab-color-active: var(--onyx-color-text-icons-primary-bold); --onyx-tab-color-disabled: var(--onyx-color-text-icons-neutral-soft); font-family: var(--onyx-font-family-paragraph); color: var(--onyx-tab-color); border-radius: var(--onyx-radius-sm); padding: var(--onyx-tab-padding-vertical) var(--onyx-density-md); font-weight: var(--onyx-font-weight-semibold); min-width: max-content; border: none; background-color: transparent; } .onyx-tab--selected { color: var(--onyx-tab-color-selected); } .onyx-tab--selected .onyx-tab__label::after { content: ""; height: 0.125rem; background-color: var(--onyx-color-component-nav-stroke); width: calc(100% - 2 * var(--onyx-density-xs)); min-width: 1rem; position: absolute; left: 50%; bottom: calc(-1 * var(--onyx-tab-highlight-gap)); transform: translateX(-50%); } .onyx-tab:enabled { cursor: pointer; } .onyx-tab:enabled:hover, .onyx-tab:enabled:focus-visible, .onyx-tab:enabled:active { background-color: var(--onyx-color-base-neutral-200); color: var(--onyx-tab-color-selected); } .onyx-tab:enabled:focus-visible { outline: var(--onyx-outline-width) solid var(--onyx-color-component-focus-primary); } .onyx-tab:enabled:active { color: var(--onyx-tab-color-active); } .onyx-tab:disabled { color: var(--onyx-tab-color-disabled); } .onyx-tab__label { display: flex; align-items: center; justify-content: center; gap: var(--onyx-density-xs); position: relative; } .onyx-tab__panel { font-family: var(--onyx-font-family-paragraph); color: var(--onyx-color-text-icons-neutral-intense); font-size: var(--onyx-font-size-md); line-height: var(--onyx-font-line-height-md); } .onyx-tab-skeleton { width: var(--onyx-density-4xl); height: calc(1lh + 2 * var(--onyx-tab-padding-vertical) + var(--onyx-tab-highlight-gap)); display: inline-block; vertical-align: middle; } }@layer onyx.component { .onyx-code-tab.onyx-tab__panel { border-bottom-left-radius: inherit; border-bottom-right-radius: inherit; font-family: var(--onyx-font-family-mono); font-size: var(--onyx-font-size-sm); line-height: var(--onyx-font-line-height-sm); padding: var(--onyx-density-md); background-color: var(--onyx-color-base-background-tinted); border: var(--onyx-code-group-border); border-top: none; display: flex; gap: var(--onyx-density-lg); justify-content: space-between; white-space: pre-wrap; } .onyx-code-tab.onyx-tab__panel pre, .onyx-code-tab.onyx-tab__panel code { font-family: inherit; white-space: inherit; } .onyx-code-tab__language { user-select: none; } .onyx-code-tab__skeletons { --onyx-code-tab-skeleton-gap: var(--onyx-density-xs); display: flex; flex-direction: column; flex-grow: 1; gap: var(--onyx-code-tab-skeleton-gap); } .onyx-code-tab__skeleton { height: calc(1lh - var(--onyx-code-tab-skeleton-gap) / 3 * 2); } .onyx-code-tab:only-of-type:disabled .onyx-tab__label { color: var(--onyx-tab-color-selected); } .onyx-code-tab:only-of-type:disabled .onyx-tab__label::after { display: none; } }@layer onyx.component { .onyx-tabs { --onyx-tabs-tablist-margin-bottom: var(--onyx-density-md); } .onyx-tabs__tablist { overflow-x: auto; } .onyx-tabs__tablist:has(.onyx-tab:focus-visible) { padding-top: var(--onyx-outline-width); margin-top: calc(-1 * var(--onyx-outline-width)); padding-bottom: var(--onyx-outline-width); margin-bottom: calc(-1 * var(--onyx-outline-width)); } .onyx-tabs__tablist:has(.onyx-tab:focus-visible:first-of-type) { padding-left: var(--onyx-outline-width); margin-left: calc(-1 * var(--onyx-outline-width)); } .onyx-tabs__tablist:has(.onyx-tab:focus-visible:last-of-type) { padding-right: var(--onyx-outline-width); margin-right: calc(-1 * var(--onyx-outline-width)); } .onyx-tabs__tablist { display: flex; align-items: center; gap: var(--onyx-density-2xs); flex-grow: 1; } .onyx-tabs__header { display: flex; align-items: center; justify-content: space-between; gap: var(--onyx-density-md); margin-bottom: var(--onyx-tabs-tablist-margin-bottom); } .onyx-tabs__actions { display: flex; align-items: center; gap: var(--onyx-density-xs); } .onyx-tabs--stretched .onyx-tabs__tablist { justify-content: space-between; } .onyx-tabs--stretched .onyx-tab, .onyx-tabs--stretched .onyx-tab-skeleton { width: 100%; } }@layer onyx.component { .onyx-code-tabs { --onyx-code-group-border: var(--onyx-1px-in-rem) solid var(--onyx-color-component-border-neutral); --onyx-code-group-tablist-padding: var(--onyx-density-xs); --onyx-tabs-tablist-margin-bottom: 0; border-radius: var(--onyx-radius-md); } .onyx-code-tabs .onyx-tabs__tablist { padding: 0; } .onyx-code-tabs .onyx-tabs__header { background-color: var(--onyx-color-base-background-blank); border-top-left-radius: inherit; border-top-right-radius: inherit; border: var(--onyx-code-group-border); padding: var(--onyx-code-group-tablist-padding); padding-right: calc(var(--onyx-code-group-tablist-padding) + var(--onyx-density-xs)); } .onyx-code-tabs .onyx-tabs__header:has(.onyx-tab:focus-visible) { padding-top: 0; padding-left: 0; padding-bottom: 0; } .onyx-code-tabs .onyx-tabs__header:has(.onyx-tab:focus-visible) .onyx-tabs__tablist { margin: 0; padding: var(--onyx-code-group-tablist-padding); } }@layer onyx.component { .onyx-empty-svg { --onyx-empty-svg-color-border: var(--onyx-color-base-neutral-400); --onyx-empty-svg-color-border-light: var(--onyx-color-base-neutral-300); --onyx-empty-svg-color-primary: var(--onyx-color-text-icons-primary-intense); --onyx-empty-svg-color-background: var(--onyx-color-base-background-tinted); --onyx-empty-svg-color-accent: var(--onyx-color-base-neutral-600); } }@layer onyx.component { .onyx-empty { padding: var(--onyx-density-xl); max-width: max-content; font-family: var(--onyx-font-family-paragraph); text-align: center; color: var(--onyx-color-text-icons-neutral-soft); display: flex; flex-direction: column; justify-content: center; align-items: center; gap: var(--onyx-density-md); } .onyx-empty__text-wrapper { display: flex; flex-direction: column; gap: var(--onyx-density-2xs); } .onyx-empty__description { color: var(--onyx-color-text-icons-neutral-intense); font-size: var(--onyx-font-size-sm); } .onyx-empty__buttons { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: var(--onyx-density-xs); } }/** * Defines all border styles for the table. * info: most borders are handled on cell level, not on the table itself * (which would lead to unstable background appliance and other visual bugs) */ @layer onyx.component { .onyx-table-wrapper { --onyx-table-border: var(--onyx-1px-in-rem) solid var(--onyx-color-component-border-neutral); display: flex; flex-direction: column; gap: var(--onyx-density-xs); font-family: var(--onyx-font-family-paragraph); color: var(--onyx-color-text-icons-neutral-intense); } .onyx-table-wrapper__container { border-radius: var(--onyx-radius-sm); overflow: auto; box-sizing: border-box; max-height: inherit; max-width: inherit; overscroll-behavior-x: none; border: var(--onyx-table-border); } .onyx-table-wrapper__container:focus-visible { outline: var(--onyx-outline-width) solid var(--onyx-color-component-focus-primary); } .onyx-table-wrapper__container--no-scroll { overflow: initial; } .onyx-table-wrapper__top, .onyx-table-wrapper__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--onyx-density-xs) var(--onyx-density-xl); container-type: inline-size; } .onyx-table-wrapper__actions { gap: var(--onyx-density-xs); display: flex; flex-wrap: wrap; align-items: center; flex-grow: 1; justify-content: flex-end; } } @layer onyx.component { .onyx-table { --onyx-table-padding-block: var(--onyx-density-xs); --onyx-table-padding-inline: var(--onyx-density-md); --onyx-table-z-index-cell: 0; text-align: left; width: 100%; border-spacing: 0; border-collapse: separate; } .onyx-table > thead > tr:last-of-type > td, .onyx-table > tbody > tr:last-of-type > td { border-bottom: none; } .onyx-table > thead > tr > th, .onyx-table > thead > tr > td, .onyx-table > tbody > tr > th, .onyx-table > tbody > tr > td { border-bottom: var(--onyx-table-border); } .onyx-table--vertical-borders > thead > tr > td:not(:last-child), .onyx-table--vertical-borders > thead > tr > th:not(:last-child), .onyx-table--vertical-borders > tbody > tr > td:not(:last-child), .onyx-table--vertical-borders > tbody > tr > th:not(:last-child) { border-right: var(--onyx-table-border); } .onyx-table__header { position: sticky; top: 0; z-index: var(--onyx-z-index-sticky-content); } .onyx-table > thead > tr:hover:not(.onyx-table__empty, .onyx-table__standalone-row) > td::before, .onyx-table > tbody > tr:hover:not(.onyx-table__empty, .onyx-table__standalone-row) > td::before { background-color: var(--onyx-color-base-neutral-200); } .onyx-table > thead > tr > th, .onyx-table > thead > tr > td, .onyx-table > tbody > tr > th, .onyx-table > tbody > tr > td { position: relative; padding: var(--onyx-table-padding-block) var(--onyx-table-padding-inline); outline: none; } .onyx-table > thead > tr > th:focus::after, .onyx-table > thead > tr > th:focus-visible::after, .onyx-table > thead > tr > th:focus-within::after, .onyx-table > thead > tr > td:focus::after, .onyx-table > thead > tr > td:focus-visible::after, .onyx-table > thead > tr > td:focus-within::after, .onyx-table > tbody > tr > th:focus::after, .onyx-table > tbody > tr > th:focus-visible::after, .onyx-table > tbody > tr > th:focus-within::after, .onyx-table > tbody > tr > td:focus::after, .onyx-table > tbody > tr > td:focus-visible::after, .onyx-table > tbody > tr > td:focus-within::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: calc(var(--onyx-table-z-index-cell) - 2); border: var(--onyx-1px-in-rem) solid var(--onyx-color-component-border-primary); } .onyx-table > thead > tr > th > .onyx-skeleton, .onyx-table > thead > tr > td > .onyx-skeleton, .onyx-table > tbody > tr > th > .onyx-skeleton, .onyx-table > tbody > tr > td > .onyx-skeleton { max-width: 8rem; } .onyx-table > thead > tr > th.onyx-table__colgroup, .onyx-table > thead > tr > td.onyx-table__colgroup, .onyx-table > tbody > tr > th.onyx-table__colgroup, .onyx-table > tbody > tr > td.onyx-table__colgroup { padding-top: var(--onyx-density-3xs); padding-bottom: var(--onyx-density-3xs); } .onyx-table > thead > tr > th, .onyx-table > tbody > tr > th { font-size: var(--onyx-font-size-sm); line-height: var(--onyx-font-line-height-sm); font-weight: var(--onyx-font-weight-semibold); font-family: var(--onyx-font-family-h4); } .onyx-table > thead > tr > th:not(.onyx-table__colgroup), .onyx-table > tbody > tr > th:not(.onyx-table__colgroup) { background-color: var(--onyx-color-base-neutral-200); color: var(--onyx-color-text-icons-neutral-medium); height: calc(1.5rem + 2 * var(--onyx-table-padding-block) + var(--onyx-1px-in-rem)); align-content: center; } .onyx-table > thead > tr > th:not(.onyx-table__colgroup):hover, .onyx-table > thead > tr > th:not(.onyx-table__colgroup).hover, .onyx-table > tbody > tr > th:not(.onyx-table__colgroup):hover, .onyx-table > tbody > tr > th:not(.onyx-table__colgroup).hover { background: var(--onyx-color-base-neutral-300); } .onyx-table > thead > tr > td, .onyx-table > tbody > tr > td { font-family: var(--onyx-font-family-data); font-size: var(--onyx-font-size-md); font-weight: var(--onyx-font-weight-400); line-height: var(--onyx-font-line-height-md); z-index: var(--onyx-table-z-index-cell); } .onyx-table > thead > tr > td::before, .onyx-table > tbody > tr > td::before { content: ""; background-color: var(--onyx-table-row-background-color, var(--onyx-color-base-background-blank)); position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: calc(var(--onyx-table-z-index-cell) - 2); } .onyx-table > thead > tr > td > .onyx-skeleton, .onyx-table > tbody > tr > td > .onyx-skeleton { height: 0.5rem; margin: var(--onyx-density-xs) 0; border-radius: var(--onyx-radius-full); } .onyx-table > thead:not(:has(.onyx-table__empty)) > tr > th:not(.onyx-table__colgroup):hover::before, .onyx-table > thead:not(:has(.onyx-table__empty)) > tr > th.hover::before, .onyx-table > tbody:not(:has(.onyx-table__empty)) > tr > th:not(.onyx-table__colgroup):hover::before, .onyx-table > tbody:not(:has(.onyx-table__empty)) > tr > th.hover::before { background-color: color-mix(in srgb, var(--onyx-color-base-neutral-500), transparent 85%); content: ""; height: var(--onyx-table-observed-height); position: absolute; top: 0; left: 0; width: 100%; bottom: 0; z-index: calc(var(--onyx-table-z-index-cell) - 1); pointer-events: none; } .onyx-table--cell-truncation-ellipsis > thead > tr td, .onyx-table--cell-truncation-ellipsis > thead > tr th, .onyx-table--cell-truncation-ellipsis > tbody > tr td, .onyx-table--cell-truncation-ellipsis > tbody > tr th { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .onyx-table--striped > tbody > tr:nth-child(even of :not(.onyx-table__standalone-row)):not(:hover) > td::before { background-color: var(--onyx-table-row-background-color, var(--onyx-color-base-background-tinted)); } .onyx-table__colgroup { background-color: var(--onyx-color-base-primary-100); color: var(--onyx-color-text-icons-primary-intense); } } .onyx-table__empty { --onyx-table-padding-block: 0; --onyx-table-padding-inline: 0; } .onyx-table__empty-wrapper { position: sticky; left: 0; width: 0; overflow: visible; } .onyx-table__empty-content { display: flex; justify-content: center; align-items: center; width: calc(var(--onyx-table-wrapper-observed-width) - 2 * var(--onyx-1px-in-rem)); box-sizing: border-box; }@layer onyx.override { .onyx-data-grid { width: 100%; max-width: 100%; } .onyx-data-grid .onyx-table-wrapper__container { display: grid; grid-template-columns: var(--onyx-data-grid-template-columns); grid-template-rows: repeat(var(--onyx-data-grid-row-count), minmax(min-content, auto)); } .onyx-data-grid .onyx-table-wrapper__container > table { display: grid; grid-template-columns: subgrid; grid-template-rows: subgrid; grid-column: 1/-1; grid-row: 1/-1; } .onyx-data-grid .onyx-table-wrapper__container > table > thead { display: grid; grid-template-columns: subgrid; grid-column: 1/-1; grid-row: 1/3; } .onyx-data-grid .onyx-table-wrapper__container > table > tbody { display: grid; grid-column: 1/-1; grid-row: 3/-1; grid-template-columns: subgrid; grid-template-rows: subgrid; } .onyx-data-grid .onyx-table-wrapper__container > table > thead > tr, .onyx-data-grid .onyx-table-wrapper__container > table > tbody > tr { display: grid; grid-column: 1/-1; grid-template-columns: subgrid; grid-template-rows: subgrid; } .onyx-data-grid .onyx-table-wrapper__container > table > thead > tr > th, .onyx-data-grid .onyx-table-wrapper__container > table > tbody > tr > th { height: unset; } .onyx-data-grid .onyx-table-wrapper__container :is(th, td)[colspan="1"] { grid-column: span 1; } .onyx-data-grid .onyx-table-wrapper__container :is(th, td)[colspan="2"] { grid-column: span 2; } .onyx-data-grid .onyx-table-wrapper__container :is(th, td)[colspan="3"] { grid-column: span 3; } .onyx-data-grid .onyx-table-wrapper__container :is(th, td)[colspan="4"] { grid-column: span 4; } .onyx-data-grid .onyx-table-wrapper__container :is(th, td)[colspan="5"] { grid-column: span 5; } .onyx-data-grid .onyx-table-wrapper__container :is(th, td)[colspan="6"] { grid-column: span 6; } .onyx-data-grid .onyx-table-wrapper__container :is(th, td)[colspan="7"] { grid-column: span 7; } .onyx-data-grid .onyx-table-wrapper__container :is(th, td)[colspan="8"] { grid-column: span 8; } .onyx-data-grid .onyx-table-wrapper__container :is(th, td)[colspan="9"] { grid-column: span 9; } .onyx-data-grid .onyx-table-wrapper__container :is(th, td)[colspan="10"] { grid-column: span 10; } .onyx-data-grid .onyx-table-wrapper__container :is(th, td)[colspan="11"] { grid-column: span 11; } .onyx-data-grid .onyx-table-wrapper__container :is(th, td)[colspan="12"] { grid-column: span 12; } .onyx-data-grid .onyx-table-wrapper__container :is(th, td)[colspan="13"] { grid-column: span 13; } .onyx-data-grid .onyx-table-wrapper__container :is(th, td)[colspan="14"] { grid-column: span 14; } .onyx-data-grid .onyx-table-wrapper__container :is(th, td)[colspan="15"] { grid-column: span 15; } .onyx-data-grid .onyx-table-wrapper__container :is(th, td)[colspan="16"] { grid-column: span 16; } .onyx-data-grid .onyx-table-wrapper__container :is(th, td)[colspan="17"] { grid-column: span 17; } .onyx-data-grid .onyx-table-wrapper__container :is(th, td)[colspan="18"] { grid-column: span 18; } .onyx-data-grid .onyx-table-wrapper__container :is(th, td)[colspan="19"] { grid-column: span 19; } .onyx-data-grid .onyx-table-wrapper__container :is(th, td)[colspan="20"] { grid-column: span 20; } .onyx-data-grid .onyx-table-wrapper__container :is(th, td)[colspan="21"] { grid-column: span 21; } .onyx-data-grid .onyx-table-wrapper__container :is(th, td)[colspan="22"] { grid-column: span 22; } .onyx-data-grid .onyx-table-wrapper__container :is(th, td)[colspan="23"] { grid-column: span 23; } .onyx-data-grid .onyx-table-wrapper__container :is(th, td)[colspan="24"] { grid-column: span 24; } .onyx-data-grid .onyx-table-wrapper__container :is(th, td)[colspan="25"] { grid-column: span 25; } .onyx-data-grid .onyx-table-wrapper__container :is(th, td)[colspan="26"] { grid-column: span 26; } .onyx-data-grid .onyx-table-wrapper__container :is(th, td)[colspan="27"] { grid-column: span 27; } .onyx-data-grid .onyx-table-wrapper__container :is(th, td)[colspan="28"] { grid-column: span 28; } .onyx-data-grid .onyx-table-wrapper__container :is(th, td)[colspan="29"] { grid-column: span 29; } .onyx-data-grid .onyx-table-wrapper__container :is(th, td)[colspan="30"] { grid-column: span 30; } .onyx-data-grid .onyx-table-wrapper__container :is(th, td)[colspan="31"] { grid-column: span 31; } .onyx-data-grid .onyx-table-wrapper__container :is(th, td)[colspan="32"] { grid-column: span 32; } .onyx-data-grid .onyx-table-wrapper__container :is(th, td)[colspan="33"] { grid-column: span 33; } .onyx-data-grid .onyx-table-wrapper__container :is(th, td)[colspan="34"] { grid-column: span 34; } .onyx-data-grid .onyx-table-wrapper__container :is(th, td)[colspan="35"] { grid-column: span 35; } .onyx-data-grid .onyx-table-wrapper__container :is(th, td)[colspan="36"] { grid-column: span 36; } .onyx-data-grid .onyx-table-wrapper__container :is(th, td)[colspan="37"] { grid-column: span 37; } .onyx-data-grid .onyx-table-wrapper__container :is(th, td)[colspan="38"] { grid-column: span 38; } .onyx-data-grid .onyx-table-wrapper__container :is(th, td)[colspan="39"] { grid-column: span 39; } .onyx-data-grid .onyx-table-wrapper__container :is(th, td)[colspan="40"] { grid-column: span 40; } .onyx-data-grid .onyx-table-wrapper__container :is(th, td)[colspan="41"] { grid-column: span 41; } .onyx-data-grid .onyx-table-wrapper__container :is(th, td)[colspan="42"] { grid-column: span 42; } .onyx-data-grid .onyx-table-wrapper__container :is(th, td)[colspan="43"] { grid-column: span 43; } .onyx-data-grid .onyx-table-wrapper__container :is(th, td)[colspan="44"] { grid-column: span 44; } .onyx-data-grid .onyx-table-wrapper__container :is(th, td)[colspan="45"] { grid-column: span 45; } .onyx-data-grid .onyx-table-wrapper__container :is(th, td)[colspan="46"] { grid-column: span 46; } .onyx-data-grid .onyx-table-wrapper__container :is(th, td)[colspan="47"] { grid-column: span 47; } .onyx-data-grid .onyx-table-wrapper__container :is(th, td)[colspan="48"] { grid-column: span 48; } .onyx-data-grid .onyx-table-wrapper__container :is(th, td)[colspan="49"] { grid-column: span 49; } .onyx-data-grid .onyx-table-wrapper__container :is(th, td)[colspan="50"] { grid-column: span 50; } .onyx-data-grid .onyx-table-wrapper__container :is(th, td)[colspan="51"] { grid-column: span 51; } .onyx-data-grid .onyx-table-wrapper__container :is(th, td)[colspan="52"] { grid-column: span 52; } .onyx-data-grid .onyx-table-wrapper__container :is(th, td)[colspan="53"] { grid-column: span 53; } .onyx-data-grid .onyx-table-wrapper__container :is(th, td)[colspan="54"] { grid-column: span 54; } .onyx-data-grid .onyx-table-wrapper__container :is(th, td)[colspan="55"] { grid-column: span 55; } .onyx-data-grid .onyx-table-wrapper__container :is(th, td)[colspan="56"] { grid-column: span 56; } .onyx-data-grid .onyx-table-wrapper__container :is(th, td)[colspan="57"] { grid-column: span 57; } .onyx-data-grid .onyx-table-wrapper__container :is(th, td)[colspan="58"] { grid-column: span 58; } .onyx-data-grid .onyx-table-wrapper__container :is(th, td)[colspan="59"] { grid-column: span 59; } .onyx-data-grid .onyx-table-wrapper__container :is(th, td)[colspan="60"] { grid-column: span 60; } .onyx-data-grid .onyx-table-wrapper__container :is(th, td)[colspan="61"] { grid-column: span 61; } .onyx-data-grid .onyx-table-wrapper__container :is(th, td)[colspan="62"] { grid-column: span 62; } .onyx-data-grid .onyx-table-wrapper__container :is(th, td)[colspan="63"] { grid-column: span 63; } .onyx-data-grid .onyx-table-wrapper__container :is(th, td)[colspan="64"] { grid-column: span 64; } .onyx-data-grid .onyx-table-wrapper__container :is(th, td)[colspan="65"] { grid-column: span 65; } .onyx-data-grid .onyx-table-wrapper__container :is(th, td)[colspan="66"] { grid-column: span 66; } .onyx-data-grid .onyx-table-wrapper__container :is(th, td)[colspan="67"] { grid-column: span 67; } .onyx-data-grid .onyx-table-wrapper__container :is(th, td)[colspan="68"] { grid-column: span 68; } .onyx-data-grid .onyx-table-wrapper__container :is(th, td)[colspan="69"] { grid-column: span 69; } .onyx-data-grid .onyx-table-wrapper__container :is(th, td)[colspan="70"] { grid-column: span 70; } .onyx-data-grid .onyx-table-wrapper__container :is(th, td)[colspan="71"] { grid-column: span 71; } .onyx-data-grid .onyx-table-wrapper__container :is(th, td)[colspan="72"] { grid-column: span 72; } .onyx-data-grid .onyx-table-wrapper__container :is(th, td)[colspan="73"] { grid-column: span 73; } .onyx-data-grid .onyx-table-wrapper__container :is(th, td)[colspan="74"] { grid-column: span 74; } .onyx-data-grid .onyx-table-wrapper__container :is(th, td)[colspan="75"] { grid-column: span 75; } .onyx-data-grid .onyx-table-wrapper__container :is(th, td)[colspan="76"] { grid-column: span 76; } .onyx-data-grid .onyx-table-wrapper__container :is(th, td)[colspan="77"] { grid-column: span 77; } .onyx-data-grid .onyx-table-wrapper__container :is(th, td)[colspan="78"] { grid-column: span 78; } .onyx-data-grid .onyx-table-wrapper__container :is(th, td)[colspan="79"] { grid-column: span 79; } .onyx-data-grid .onyx-table-wrapper__container :is(th, td)[colspan="80"] { grid-column: span 80; } .onyx-data-grid .onyx-table-wrapper__container :is(th, td)[colspan="81"] { grid-column: span 81; } .onyx-data-grid .onyx-table-wrapper__container :is(th, td)[colspan="82"] { grid-column: span 82; } .onyx-data-grid .onyx-table-wrapper__container :is(th, td)[colspan="83"] { grid-column: span 83; } .onyx-data-grid .onyx-table-wrapper__container :is(th, td)[colspan="84"] { grid-column: span 84; } .onyx-data-grid .onyx-table-wrapper__container :is(th, td)[colspan="85"] { grid-column: span 85; } .onyx-data-grid .onyx-table-wrapper__container :is(th, td)[colspan="86"] { grid-column: span 86; } .onyx-data-grid .onyx-table-wrapper__container :is(th, td)[colspan="87"] { grid-column: span 87; } .onyx-data-grid .onyx-table-wrapper__container :is(th, td)[colspan="88"] { grid-column: span 88; } .onyx-data-grid .onyx-table-wrapper__container :is(th, td)[colspan="89"] { grid-column: span 89; } .onyx-data-grid .onyx-table-wrapper__container :is(th, td)[colspan="90"] { grid-column: span 90; } .onyx-data-grid .onyx-table-wrapper__container :is(th, td)[colspan="91"] { grid-column: span 91; } .onyx-data-grid .onyx-table-wrapper__container :is(th, td)[colspan="92"] { grid-column: span 92; } .onyx-data-grid .onyx-table-wrapper__container :is(th, td)[colspan="93"] { grid-column: span 93; } .onyx-data-grid .onyx-table-wrapper__container :is(th, td)[colspan="94"] { grid-column: span 94; } .onyx-data-grid .onyx-table-wrapper__container :is(th, td)[colspan="95"] { grid-column: span 95; } .onyx-data-grid .onyx-table-wrapper__container :is(th, td)[colspan="96"] { grid-column: span 96; } .onyx-data-grid .onyx-table-wrapper__container :is(th, td)[colspan="97"] { grid-column: span 97; } .onyx-data-grid .onyx-table-wrapper__container :is(th, td)[colspan="98"] { grid-column: span 98; } .onyx-data-grid .onyx-table-wrapper__container :is(th, td)[colspan="99"] { grid-column: span 99; } }/** * Function for getting a approximated CSS "ch" length value that can be used to e.g. set the width of an element based on the text length. * Adds 1px of additional space to ensure no overflow for low character counts. */ @layer onyx.component { .onyx-mini-search { --onyx-mini-search-icon-size: 1.5rem; --onyx-mini-search-padding-inline: var(--onyx-density-sm); display: flex; gap: var(--onyx-mini-search-padding-inline); padding: var(--onyx-density-xs) var(--onyx-mini-search-padding-inline); background-color: var(--onyx-color-base-background-blank); color: var(--onyx-color-text-icons-neutral-intense); } .onyx-mini-search__input, .onyx-mini-search__clear { all: initial; } .onyx-mini-search__input { font-family: var(--onyx-font-family-paragraph); font-style: normal; flex-grow: 1; min-width: calc(var(--onyx-placeholder-character-count) * 1ch + var(--onyx-1px-in-rem)); color: inherit; } .onyx-mini-search__input::placeholder { color: var(--onyx-color-text-icons-neutral-soft); } .onyx-mini-search__clear { color: var(--onyx-color-text-icons-neutral-medium); cursor: pointer; display: none; } .onyx-mini-search__clear .onyx-icon { --icon-size: var(--onyx-mini-search-icon-size); } .onyx-mini-search__icon { display: grid; align-self: center; color: var(--onyx-color-text-icons-neutral-soft); --icon-size: var(--onyx-mini-search-icon-size); } .onyx-mini-search:has(.onyx-mini-search__input:not(:placeholder-shown)) .onyx-mini-search__clear { display: grid; place-items: center; } .onyx-mini-search:has(.onyx-mini-search__input:not(:placeholder-shown)) .onyx-mini-search__icon { display: none; } }@layer onyx.component { .onyx-modal { --onyx-modal-padding-inline: var(--onyx-density-lg); --onyx-basic-dialog-padding: 0; display: flex; } .onyx-modal .onyx-basic-dialog__content { display: flex; flex-direction: column; } .onyx-modal__header { display: flex; flex-direction: column; gap: var(--onyx-density-2xs); padding: var(--onyx-density-sm) var(--onyx-modal-padding-inline); border-bottom: var(--onyx-1px-in-rem) solid var(--onyx-color-component-border-neutral); } .onyx-modal__headline { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--onyx-density-sm); } .onyx-modal__headline-content { display: flex; flex-wrap: wrap; align-items: center; gap: inherit; } .onyx-modal__body { overflow: auto; flex-grow: 1; } .onyx-modal__description { color: var(--onyx-color-text-icons-neutral-soft); white-space: pre-line; } }@layer onyx.component { .onyx-select-dialog { --onyx-select-dialog-icon-size: 1.5rem; --onyx-select-dialog-gap: var(--onyx-density-md); width: 32rem; background-color: var(--onyx-color-base-background-tinted); } .onyx-select-dialog__form { display: flex; flex-direction: column; gap: var(--onyx-density-xs); padding: var(--onyx-select-dialog-gap) var(--onyx-modal-padding-inline); } .onyx-select-dialog__list { list-style: none; padding: 0; display: contents; } .onyx-select-dialog__label { font-weight: 600; font-size: var(--onyx-font-size-md); line-height: var(--onyx-font-line-height-md); color: var(--onyx-color-text-icons-neutral-intense); } .onyx-select-dialog__option { --onyx-card-gap: var(--onyx-select-dialog-gap); flex-direction: row; align-items: center; color: var(--onyx-color-text-icons-neutral-medium); cursor: pointer; } .onyx-select-dialog__option:hover { background: var(--onyx-color-base-neutral-200); } .onyx-select-dialog__option:has(input:checked) { border-color: var(--onyx-color-base-primary-200); background-color: var(--onyx-color-base-primary-100); } .onyx-select-dialog__option:has(input:checked):hover { border-color: var(--onyx-color-component-border-primary); } .onyx-select-dialog__option:has(input:checked) .onyx-select-dialog__label, .onyx-select-dialog__option:has(input:checked) .onyx-select-dialog__icon { color: var(--onyx-color-text-icons-primary-intense); } .onyx-select-dialog__icon { --icon-size: var(--onyx-select-dialog-icon-size); display: inline-flex; height: auto; } }@layer onyx.component { .onyx-color-scheme-dialog { --onyx-select-dialog-icon-size: 10rem; } .onyx-color-scheme-dialog .onyx-select-dialog__form { container-type: inline-size; } .onyx-color-scheme-dialog .onyx-select-dialog__option { align-items: flex-start; } @container (max-width: 24rem) { .onyx-color-scheme-dialog .onyx-select-dialog__option { --onyx-select-dialog-icon-size: 6rem; flex-direction: column; align-items: flex-start; } } .onyx-color-scheme-dialog .onyx-select-dialog__option .onyx-select-dialog__icon { box-shadow: var(--onyx-shadow-medium-top); } }@layer onyx.component { .onyx-color-scheme-menu-item__value { color: var(--onyx-color-text-icons-neutral-soft); } .onyx-color-scheme-menu-item .onyx-color-scheme-dialog { text-align: left; } }@layer onyx.component { .onyx-language-menu-item__value { color: var(--onyx-color-text-icons-neutral-soft); } }@layer onyx.component { .onyx-separator { --onyx-separator-size: var(--onyx-1px-in-rem); --onyx-separator-min-size: 2rem; background-color: var(--onyx-color-component-border-neutral); height: var(--onyx-separator-size); min-width: var(--onyx-separator-min-size); } .onyx-separator--vertical { width: var(--onyx-separator-size); min-width: var(--onyx-separator-size); min-height: var(--onyx-separator-min-size); height: initial; max-height: 100%; } }@layer onyx.override { .onyx-nav-item--navbar, .onyx-nav-item--vertical-navbar { position: relative; height: 2.5rem; width: max-content; border-radius: var(--onyx-radius-sm); white-space: nowrap; --onyx-list-item-background-hover: transparent; --onyx-list-item-background-selected: var(--onyx-color-base-background-blank); --onyx-list-item-padding: var(--onyx-spacing-2xs) var(--onyx-spacing-md); } .onyx-nav-item--navbar:has(:focus-visible), .onyx-nav-item--vertical-navbar:has(:focus-visible) { outline: var(--onyx-outline-width) solid var(--onyx-color-component-focus-primary); color: var(--onyx-list-item-color); } .onyx-nav-item--navbar:hover, .onyx-nav-item--vertical-navbar:hover { --onyx-list-item-background-selected: var(--onyx-color-base-neutral-200); --onyx-list-item-background-hover: var(--onyx-color-base-neutral-200); } .onyx-nav-item--navbar .onyx-menu-item__chevron, .onyx-nav-item--vertical-navbar .onyx-menu-item__chevron { display: none; } .onyx-nav-item--navbar:has(.onyx-nav-item--active), .onyx-nav-item--navbar.onyx-nav-item--active, .onyx-nav-item--vertical-navbar:has(.onyx-nav-item--active), .onyx-nav-item--vertical-navbar.onyx-nav-item--active { font-weight: var(--onyx-font-weight-semibold); color: var(--onyx-color-component-nav-label); --onyx-list-item-color-selected: var(--onyx-color-component-nav-label); } .onyx-nav-item--navbar:has(.onyx-nav-item--active)::after, .onyx-nav-item--navbar.onyx-nav-item--active::after, .onyx-nav-item--vertical-navbar:has(.onyx-nav-item--active)::after, .onyx-nav-item--vertical-navbar.onyx-nav-item--active::after { content: " "; position: absolute; width: 100%; height: 0.125rem; bottom: calc(-1 * var(--onyx-spacing-2xs)); border-radius: var(--onyx-radius-full) var(--onyx-radius-full) 0 0; background: var(--onyx-color-component-nav-stroke); z-index: 1; } .onyx-nav-item--mobile { --onyx-list-item-padding: var(--onyx-spacing-sm); color: var(--onyx-color-text-icons-neutral-intense); width: 100%; align-self: stretch; line-height: var(--onyx-font-line-height-md); text-align: start; font-size: var(--onyx-font-size-md); font-weight: var(--onyx-font-weight-regular); border-radius: var(--onyx-radius-sm); border: var(--onyx-1px-in-rem) solid var(--onyx-color-component-border-neutral); } .onyx-nav-item--mobile:focus-within { background-color: var(--onyx-color-base-background-blank); } .onyx-nav-item--mobile:hover { background-color: var(--onyx-color-base-background-tinted); } .onyx-nav-item--mobile:has(.onyx-nav-item--active), .onyx-nav-item--mobile.onyx-nav-item--active { --onyx-list-item-background-selected: var(--onyx-color-base-primary-100); --onyx-list-item-color-selected: var(--onyx-color-component-nav-label); background-color: var(--onyx-list-item-background-selected); border-color: var(--onyx-color-base-primary-200); color: var(--onyx-color-text-icons-primary-bold); font-weight: 600; } .onyx-nav-item--mobile:has(.onyx-nav-item--active):hover, .onyx-nav-item--mobile.onyx-nav-item--active:hover { border-color: var(--onyx-component-border-primary); } .onyx-nav-item--mobile.onyx-nav-item--open { all: unset; } .onyx-nav-item--vertical-navbar { width: 100%; } .onyx-nav-item--vertical-navbar:has(.onyx-nav-item--active)::after, .onyx-nav-item--vertical-navbar.onyx-nav-item--active::after { width: 0.125rem; height: 100%; left: calc(-1 * var(--onyx-spacing-2xs)); bottom: auto; border-radius: 0 var(--onyx-radius-full) var(--onyx-radius-full) 0; } }@layer onyx.component { .onyx-nav-item-wrapper__mobile-children, .onyx-nav-item-wrapper--open { padding: 0; width: 100%; display: flex; flex-direction: column; gap: var(--onyx-spacing-2xs); } .onyx-nav-item-wrapper { /** * control items should act as flex items */ } .onyx-nav-item-wrapper__controls { display: contents; } .onyx-nav-item-wrapper { /** * Don't display controls when a child element is opened. */ } .onyx-nav-item-wrapper--open:has(.onyx-nav-item-wrapper--open) > .onyx-nav-item-wrapper__controls { display: none; } .onyx-nav-item-wrapper:has(~ .onyx-nav-item-wrapper--open), .onyx-nav-item-wrapper--open ~ .onyx-nav-item-wrapper { display: none; } } @layer onyx.component { .onyx-nav-item { /** * Hide siblings before and after an opened item. */ } .onyx-nav-item:has(~ .onyx-menu-item--internal.onyx-menu-item--open), .onyx-menu-item--internal.onyx-menu-item--open ~ .onyx-nav-item, .onyx-nav-item:has(~ .onyx-nav-item-wrapper--open), .onyx-nav-item-wrapper--open ~ .onyx-nav-item { display: none; } }@layer onyx.component { .onyx-timer { display: inline-flex; gap: var(--onyx-spacing-2xs); border-radius: var(--onyx-radius-md); border: none; background: var(--onyx-color-base-background-blank); padding: var(--onyx-spacing-2xs) var(--onyx-spacing-md); font-family: var(--onyx-font-family-paragraph); color: var(--onyx-color-text-icons-neutral-intense); width: max-content; max-width: 100%; } .onyx-timer__label { color: var(--onyx-color-text-icons-neutral-soft); } .onyx-timer__time { font-weight: var(--onyx-font-weight-semibold); } }@layer onyx.component { .onyx-user-menu__footer, .onyx-user-menu__mobile-footer { color: var(--onyx-color-text-icons-neutral-soft); display: flex; align-items: center; justify-content: space-between; gap: var(--onyx-spacing-2xs); } .onyx-user-menu__footer { border-top: var(--onyx-1px-in-rem) solid var(--onyx-color-component-border-neutral); padding: var(--onyx-spacing-4xs) var(--onyx-spacing-md); } .onyx-user-menu__mobile-footer { margin-top: var(--onyx-spacing-2xs); border: var(--onyx-1px-in-rem) solid var(--onyx-color-component-border-neutral); border-radius: var(--onyx-radius-sm); font-size: var(--onyx-font-size-sm); line-height: var(--onyx-font-line-height-sm); } }@layer onyx.component { .onyx-user-menu { --onyx-user-menu-height: 2.5rem; font-family: var(--onyx-font-family-paragraph); width: max-content; position: relative; } .onyx-user-menu:focus-within, .onyx-user-menu:hover { outline: 0; } .onyx-user-menu:focus-within .onyx-user-menu__trigger, .onyx-user-menu:hover .onyx-user-menu__trigger { outline: var(--onyx-outline-width) solid var(--onyx-color-component-focus-primary); background-color: var(--onyx-color-base-neutral-200); } .onyx-user-menu__trigger { border-radius: var(--onyx-radius-sm); border: none; background: var(--onyx-color-base-background-blank); padding: var(--onyx-spacing-2xs) var(--onyx-spacing-md); display: flex; align-items: center; gap: var(--onyx-spacing-2xs); color: var(--onyx-color-text-icons-neutral-intense); margin-left: auto; font-weight: var(--onyx-font-weight-semibold); } .onyx-user-menu__trigger:disabled { color: var(--onyx-color-text-icons-neutral-soft); } .onyx-user-menu__trigger:hover:disabled { background-color: var(--onyx-color-base-background-blank); outline: 0; } .onyx-user-menu__trigger:hover { background-color: var(--onyx-color-base-neutral-200); } .onyx-user-menu__trigger:focus { outline: 0; } .onyx-user-menu .onyx-flyout-menu__list { right: 0; } .onyx-user-menu__header { border-bottom: var(--onyx-1px-in-rem) solid var(--onyx-color-component-border-neutral); padding: var(--onyx-spacing-md); color: var(--onyx-color-text-icons-neutral-intense); display: flex; align-items: center; gap: var(--onyx-spacing-md); text-align: left; } .onyx-user-menu__username { font-weight: var(--onyx-font-weight-semibold); } .onyx-user-menu__description { color: var(--onyx-color-text-icons-neutral-soft); font-weight: var(--onyx-font-weight-semibold); } .onyx-user-menu--mobile { width: 100%; position: static; } .onyx-user-menu--mobile .onyx-user-menu__header { border: var(--onyx-1px-in-rem) solid var(--onyx-color-component-border-neutral); background-color: var(--onyx-color-base-background-blank); border-radius: var(--onyx-radius-sm); margin-bottom: var(--onyx-spacing-2xs); } .onyx-user-menu--mobile .onyx-user-menu__options .onyx-list-item { border: var(--onyx-1px-in-rem) solid var(--onyx-color-component-border-neutral); border-bottom: none; } .onyx-user-menu--mobile .onyx-user-menu__options .onyx-list-item:first-of-type { border-radius: var(--onyx-radius-sm) var(--onyx-radius-sm) 0 0; } .onyx-user-menu--mobile .onyx-user-menu__options .onyx-list-item:last-of-type { border-bottom: var(--onyx-1px-in-rem) solid var(--onyx-color-component-border-neutral); border-radius: 0 0 var(--onyx-radius-sm) var(--onyx-radius-sm); } }@layer onyx.component { .onyx-icon-button, .onyx-icon-button-skeleton { --onyx-icon-button-padding: var(--onyx-density-xs); } } @layer onyx.component { .onyx-icon-button-skeleton { height: calc(1.5rem + 2 * var(--onyx-icon-button-padding)); width: calc(1.5rem + 2 * var(--onyx-icon-button-padding)); border-radius: var(--onyx-radius-component-icon-button); } } @layer onyx.component { .onyx-icon-button { --icon-button-color: var(--onyx-color-text-icons-primary-intense); --icon-button-bg-color: transparent; --icon-button-cursor: pointer; display: inline-grid; place-items: center; padding: var(--onyx-icon-button-padding); color: var(--icon-button-color); cursor: var(--icon-button-cursor); outline: none; appearance: none; border: none; background: none; border-radius: var(--onyx-radius-component-icon-button); background-color: var(--icon-button-bg-color); } .onyx-icon-button:hover, .onyx-icon-button:focus-visible { --icon-button-bg-color: var(--onyx-color-base-primary-200); --icon-button-color: var(--onyx-color-text-icons-primary-bold); } .onyx-icon-button:disabled:not(.onyx-icon-button--loading) { --icon-button-color: var(--onyx-color-text-icons-primary-soft); } .onyx-icon-button:active { --icon-button-bg-color: var(--onyx-color-base-primary-300); --icon-button-color: var(--onyx-color-text-icons-primary-bold); } .onyx-icon-button--neutral { --icon-button-color: var(--onyx-color-text-icons-neutral-medium); } .onyx-icon-button--neutral:hover, .onyx-icon-button--neutral:focus-visible { --icon-button-bg-color: var(--onyx-color-base-neutral-200); --icon-button-color: var(--onyx-color-text-icons-neutral-intense); } .onyx-icon-button--neutral:disabled:not(.onyx-icon-button--neutral--loading) { --icon-button-color: var(--onyx-color-text-icons-neutral-soft); } .onyx-icon-button--neutral:active { --icon-button-bg-color: var(--onyx-color-base-neutral-300); --icon-button-color: var(--onyx-color-text-icons-neutral-intense); } .onyx-icon-button--danger { --icon-button-color: var(--onyx-color-text-icons-danger-intense); } .onyx-icon-button--danger:hover, .onyx-icon-button--danger:focus-visible { --icon-button-bg-color: var(--onyx-color-base-danger-200); --icon-button-color: var(--onyx-color-text-icons-danger-bold); } .onyx-icon-button--danger:disabled:not(.onyx-icon-button--danger--loading) { --icon-button-color: var(--onyx-color-text-icons-danger-soft); } .onyx-icon-button--danger:active { --icon-button-bg-color: var(--onyx-color-base-danger-300); --icon-button-color: var(--onyx-color-text-icons-danger-bold); } .onyx-icon-button:disabled { --icon-button-bg-color: transparent; --icon-button-cursor: default; } }@layer onyx.component { .onyx-data-grid-actions { width: unset; flex-grow: 1; justify-content: flex-end; } }@layer onyx.component { .onyx-form-message { display: inline-flex; gap: var(--onyx-spacing-2xs); } }@layer onyx.component { .onyx-use-optional:not(:has(.onyx-required-marker)) .onyx-form-element__optional { display: inline-block; } } @layer onyx.override { .onyx-form-element__footer--reserved { height: 1lh; display: flex; } } @layer onyx.component { .onyx-form-element { font-family: var(--onyx-font-family-paragraph); display: flex; flex-direction: column; gap: var(--onyx-density-3xs); } .onyx-form-element__label { display: flex; align-items: center; max-width: 100%; width: 100%; color: var(--onyx-color-text-icons-neutral-medium); } .onyx-form-element__label .onyx-optional-marker { flex-grow: 1; text-align: end; } .onyx-form-element__optional { display: none; font-family: var(--onyx-font-family-paragraph); font-weight: var(--onyx-font-weight-regular); font-style: normal; color: var(--onyx-color-text-icons-neutral-soft); padding-left: var(--onyx-density-xs); hyphens: none; margin-left: auto; } .onyx-form-element__label-tooltip { margin-left: var(--onyx-spacing-2xs); } .onyx-form-element__footer { width: 100%; max-width: 100%; display: none; justify-content: space-between; gap: var(--onyx-spacing-2xs); color: var(--onyx-color-text-icons-neutral-soft); } .onyx-form-element:has(.onyx-form-message__danger) .onyx-form-element__footer { display: var(--error-message-display, none); } .onyx-form-element:has(.onyx-form-message__neutral, .onyx-form-message__success, .onyx-form-element__counter) .onyx-form-element__footer { display: flex; } .onyx-form-element__footer-messages { flex: 1; min-width: 0; display: flex; flex-direction: column; } .onyx-form-element__counter { max-width: fit-content; } .onyx-form-element__counter--violated { color: var(--onyx-color-text-icons-danger-intense); } .onyx-form-element__error-message, .onyx-form-element__error-tooltip { display: var(--error-message-display, none); color: var(--onyx-color-base-danger-500); } .onyx-form-element__success-message, .onyx-form-element__success-tooltip { display: var(--success-message-display, flex); color: var(--onyx-color-base-success-700); } .onyx-form-element__message { display: var(--message-display, flex); } }/** * Gets a comma separated CSS selector for the input autofill. * Includes default browser selectors as well as some specific selectors e.g. for certain password managers. */ @layer onyx.component { .onyx-datepicker, .onyx-datepicker-skeleton { --onyx-datepicker-padding-vertical: var(--onyx-density-xs); } } @layer onyx.component { .onyx-datepicker-skeleton { display: flex; flex-direction: column; gap: calc(var(--onyx-density-3xs) + var(--skeleton-label-density-adjustment, 0rem)); line-height: var(--onyx-font-line-height-md); } .onyx-datepicker-skeleton__label { width: var(--onyx-density-3xl); height: calc(1.25rem - var(--skeleton-label-density-adjustment, 0rem)); } .onyx-datepicker-skeleton__input { width: 17rem; max-width: 100%; height: calc(1lh + 2 * var(--onyx-datepicker-padding-vertical)); } @layer onyx.density { .onyx-density-compact .onyx-datepicker-skeleton, :is(.onyx-datepicker-skeleton).onyx-density-compact { --skeleton-label-density-adjustment: var(--onyx-spacing-5xs); } } } @layer onyx.component { .onyx-datepicker { --border-color: var(--onyx-color-component-border-neutral); --border-radius: var(--onyx-radius-component-input); --hover-border-color: var(--onyx-color-component-border-primary-hover); --selection-color: var(--onyx-color-base-primary-200); --caret-color: var(--onyx-color-component-cta-default); --background-color: var(--onyx-color-base-background-blank); --outline-color: var(--onyx-color-component-focus-primary); --outline-style: none; --button-color: var(--onyx-color-text-icons-neutral-soft); --border-style: solid; --padding-horizontal: var(--onyx-density-sm); } .onyx-datepicker__wrapper { border-radius: var(--border-radius); border: var(--onyx-1px-in-rem) var(--border-style) var(--border-color); background-color: var(--background-color); color: var(--onyx-color-text-icons-neutral-medium); outline: var(--onyx-outline-width) var(--outline-style) var(--outline-color); display: flex; align-items: center; gap: var(--onyx-density-xs); font-size: var(--onyx-font-size-md); line-height: var(--onyx-font-line-height-md); padding: var(--onyx-datepicker-padding-vertical) var(--padding-horizontal); height: calc(1lh + 2 * var(--onyx-datepicker-padding-vertical)); } .onyx-datepicker__wrapper .onyx-datepicker__native { color: var(--onyx-color-text-icons-neutral-intense); } .onyx-datepicker__wrapper:has(.onyx-datepicker__native:read-write):hover { --border-color: var(--hover-border-color, var(--onyx-color-component-border-primary-hover)); --button-color: var(--button-hover-color, var(--onyx-color-text-icons-primary-medium)); } .onyx-datepicker__wrapper:has(.onyx-datepicker__native:enabled:focus, .onyx-datepicker__native--show-focus) { --border-color: var(--focus-border-color, var(--onyx-color-component-border-primary-hover)); --outline-style: solid; } .onyx-datepicker__wrapper:has(.onyx-datepicker__native:enabled:focus, .onyx-datepicker__native--show-focus):has(.onyx-datepicker__native:read-write) { --button-color: var(--button-focus-color, var(--onyx-color-text-icons-primary-intense)); } .onyx-datepicker__wrapper:has(.onyx-datepicker__native:read-only) { --selection-color: var(--onyx-color-base-neutral-200); --caret-color: var(--onyx-color-base-neutral-700); --background-color: var(--onyx-color-base-background-tinted); } .onyx-datepicker__wrapper:has(.onyx-datepicker__native:enabled:read-only):hover { --border-color: var(--onyx-color-component-border-neutral-hover); } .onyx-datepicker__wrapper:has(.onyx-datepicker__native:enabled:read-only):has(.onyx-datepicker__native:focus, .onyx-datepicker__native--show-focus) { --border-color: var(--onyx-color-component-border-neutral); --outline-color: var(--onyx-color-component-focus-neutral); } .onyx-datepicker__wrapper:has(.onyx-datepicker__native:read-write):has(.onyx-datepicker__native:autofill, .onyx-datepicker__native[data-test-autofill], .onyx-datepicker__native[data-com-onepassword-filled]) { background-color: var(--onyx-color-base-warning-100); } .onyx-datepicker__wrapper:focus-within .onyx-datepicker__check-icon, .onyx-datepicker__wrapper:has(.onyx-datepicker__native--show-focus) .onyx-datepicker__check-icon { display: none; } .onyx-datepicker__separator { --onyx-separator-min-size: calc( 1lh + 2 * var(--onyx-input-padding-vertical) - 2 * var(--onyx-1px-in-rem) ); } .onyx-datepicker__separator--leading { margin-left: calc(var(--onyx-density-sm) - var(--onyx-density-xs)); } .onyx-datepicker__separator--trailing { margin-right: calc(var(--onyx-density-sm) - var(--onyx-density-xs)); } .onyx-datepicker__loading { color: var(--onyx-color-text-icons-primary-intense); } .onyx-datepicker__button { all: initial; display: flex; color: var(--button-color); } .onyx-datepicker__button:enabled { cursor: pointer; } .onyx-datepicker__button:focus-visible { outline: var(--onyx-outline-width) solid var(--outline-color); border-radius: var(--onyx-radius-sm); --button-color: var(--button-focus-color, var(--onyx-color-text-icons-primary-intense)); } .onyx-datepicker:has(.onyx-form-element__success-message) { --message-display: none; --border-color: var(--onyx-color-component-border-success); --outline-color: var(--onyx-color-component-focus-success); --selection-color: var(--onyx-color-base-success-200); --caret-color: var(--onyx-color-base-neutral-900); --focus-border-color: var(--onyx-color-component-border-success); --hover-border-color: var(--onyx-color-component-border-success-hover); --button-hover-color: var(--onyx-color-text-icons-success-medium); --button-focus-color: var(--onyx-color-text-icons-success-intense); } .onyx-datepicker:not(.onyx-form-element-suppress-invalid).onyx-form-element--touched-invalid:has(.onyx-datepicker__native:user-invalid, .onyx-datepicker__native--touched:invalid), .onyx-datepicker:not(.onyx-form-element-suppress-invalid).onyx-form-element--immediate-invalid:has(.onyx-datepicker__native:invalid) { --error-message-display: inline-flex; --message-display: none; --success-message-display: none; --border-color: var(--onyx-color-component-border-danger); --outline-color: var(--onyx-color-component-focus-danger); --selection-color: var(--onyx-color-base-danger-200); --caret-color: var(--onyx-color-base-neutral-900); --focus-border-color: var(--onyx-color-component-border-danger); --hover-border-color: var(--onyx-color-component-border-danger-hover); --button-hover-color: var(--onyx-color-text-icons-danger-medium); --button-focus-color: var(--onyx-color-text-icons-danger-intense); } .onyx-datepicker__native { border: none; border-radius: inherit; background-color: transparent; color: inherit; width: 100%; outline: none; font-family: inherit; font-size: inherit; line-height: inherit; padding: 0; height: 100%; caret-color: var(--caret-color); } .onyx-datepicker__native::placeholder { color: var(--onyx-color-text-icons-neutral-soft); font-weight: var(--onyx-font-weight-regular); opacity: 1; } .onyx-datepicker__native::selection { background: var(--selection-color); } .onyx-datepicker__native:autofill, .onyx-datepicker__native[data-test-autofill], .onyx-datepicker__native[data-com-onepassword-filled] { background-color: transparent; -webkit-text-fill-color: var(--onyx-color-text-icons-neutral-intense); transition: background-color calc(infinity * 1s); } .onyx-datepicker:has(.onyx-datepicker__native:disabled) .onyx-form-element__label { color: var(--onyx-color-text-icons-neutral-soft); } .onyx-datepicker:has(.onyx-datepicker__native:disabled) .onyx-datepicker__wrapper { color: var(--onyx-color-text-icons-neutral-soft); } .onyx-datepicker__native::-webkit-calendar-picker-indicator { cursor: pointer; } }/** Defines styles when the form element input container is hovered */ /** Defines styles when the form element input container is focused or the popover is opened */ @layer onyx.component { .onyx-form-element-action { --onyx-form-element-action-color: var(--onyx-color-text-icons-neutral-medium); --onyx-form-element-action-color-hover: var( --onyx-form-element-v2-border-color-focus, var(--onyx-color-text-icons-primary-intense) ); --onyx-form-element-action-color-highlight: var(--onyx-form-element-action-color-hover); --onyx-form-element-action-display: inline-flex; display: var(--onyx-form-element-action-display); } .onyx-form-element-action__button { all: initial; color: var(--onyx-form-element-action-color); } .onyx-form-element-action__button[aria-pressed=true] { --onyx-form-element-action-color: var(--onyx-color-text-icons-neutral-intense); } .onyx-form-element-action__button:enabled { cursor: pointer; } .onyx-form-element-action__button:enabled:hover, .onyx-form-element-action__button:enabled:focus-visible { color: var(--onyx-form-element-action-color-hover); } .onyx-form-element-action__button:disabled { color: var(--onyx-color-text-icons-neutral-soft); } .onyx-form-element-action--lg .onyx-form-element-action__button { padding: var(--onyx-density-xs) var(--onyx-density-sm); } .onyx-form-element-action--show-on-focus { display: none; } .onyx-form-element-action--highlighted .onyx-form-element-action__button { color: var(--onyx-form-element-action-color-highlight); } } @layer onyx.component { .onyx-form-element-v2 .onyx-form-element-v2__input-container:focus-within .onyx-form-element-action--show-on-focus, .onyx-form-element-v2 .onyx-form-element-v2__popover:has(> .onyx-basic-popover__dialog:popover-open) > .onyx-form-element-v2__input-container .onyx-form-element-action--show-on-focus { display: var(--onyx-form-element-action-display); } .onyx-form-element-v2 .onyx-form-element-v2__input-container:focus-within .onyx-form-element-action--auto-highlight .onyx-form-element-action__button, .onyx-form-element-v2 .onyx-form-element-v2__popover:has(> .onyx-basic-popover__dialog:popover-open) > .onyx-form-element-v2__input-container .onyx-form-element-action--auto-highlight .onyx-form-element-action__button { color: var(--onyx-form-element-action-color-highlight); } .onyx-form-element-v2 .onyx-form-element-v2__input-container:hover:has(.onyx-form-element-v2__input:enabled) .onyx-form-element-action--auto-highlight .onyx-form-element-action__button { color: var(--onyx-form-element-action-color-highlight); } }@layer onyx.component { .onyx-form-element-v2__popover { --onyx-basic-popover-max-width: 100%; flex-grow: 1; border-radius: inherit; height: 100%; } .onyx-form-element-v2__popover > .onyx-form-element-v2__input-container > .onyx-form-element-v2__input { caret-color: transparent; } .onyx-form-element-v2__popover > .onyx-form-element-v2__input-container > .onyx-form-element-v2__input:read-write { cursor: pointer; } .onyx-form-element-v2__popover-description { display: flex; width: 100%; padding: var(--onyx-density-3xs) var(--onyx-density-sm); justify-content: flex-end; text-align: right; align-items: center; gap: var(--onyx-spacing-md); color: var(--onyx-color-text-icons-neutral-soft); font-size: var(--onyx-font-size-sm); line-height: var(--onyx-font-line-height-sm); } }@layer onyx.component { .onyx-form-element-v2 { --onyx-form-element-v2-bottom-height: 1lh; } .onyx-form-element-v2__bottom { color: var(--onyx-color-text-icons-neutral-soft); height: var(--onyx-form-element-v2-bottom-height); display: flex; align-items: center; justify-content: space-between; gap: var(--onyx-spacing-2xs); } .onyx-form-element-v2__bottom:not(.onyx-form-element-v2__bottom--reserve-empty):empty { display: none; } .onyx-form-element-v2__bottom:not(.onyx-form-element-v2__bottom--reserve-empty):has(.onyx-form-element-v2__message--danger:only-child) { display: var(--onyx-form-element-v2-error-display); } .onyx-form-element-v2__message { display: var(--onyx-form-element-v2-message-display); } .onyx-form-element-v2__message:not(.onyx-form-element-v2__message--danger) ~ .onyx-form-element-v2__message:not(.onyx-form-element-v2__message--danger) { display: none; } .onyx-form-element-v2__message--danger { display: var(--onyx-form-element-v2-error-display); color: var(--onyx-color-text-icons-danger-intense); } .onyx-form-element-v2__message--success { color: var(--onyx-color-text-icons-success-intense); } .onyx-form-element-v2__bottom-right { flex-grow: 1; justify-content: flex-end; display: flex; } .onyx-form-element-v2:has(.onyx-form-element-v2__content-skeleton) .onyx-form-element-v2__bottom { visibility: hidden; } }@layer onyx.component { .onyx-form-element-v2__label { display: flex; align-items: center; max-width: 100%; width: 100%; color: var(--onyx-color-text-icons-neutral-medium); } .onyx-form-element-v2__label .onyx-optional-marker { flex-grow: 1; text-align: end; } .onyx-form-element-v2__label-skeleton { height: var(--onyx-form-element-v2-label-skeleton-height); width: var(--onyx-density-3xl); } }/** * Function for getting a approximated CSS "ch" length value that can be used to e.g. set the width of an element based on the text length. * Adds 1px of additional space to ensure no overflow for low character counts. */ /** Defines styles when the form element input container is hovered */ /** Defines styles when the form element input container is focused or the popover is opened */ @layer onyx.component { .onyx-form-element-v2 { --onyx-form-element-v2-gap: var(--onyx-density-3xs); --onyx-form-element-v2-border-radius: var(--onyx-radius-component-input); --onyx-form-element-v2-border-size: var(--onyx-1px-in-rem); --onyx-form-element-v2-border-color: var(--onyx-color-component-border-neutral); --onyx-form-element-v2-border-color-hover: var(--onyx-color-component-border-primary-hover); --onyx-form-element-v2-border-color-focus: var(--onyx-color-component-border-primary); --onyx-form-element-v2-background: var(--onyx-color-base-background-blank); --onyx-form-element-v2-background-hover: var(--onyx-form-element-v2-background); --onyx-form-element-v2-background-autofill: var(--onyx-color-base-warning-100); --onyx-form-element-v2-padding-block: var(--onyx-density-xs); --onyx-form-element-v2-padding-inline: var(--onyx-density-sm); --onyx-form-element-v2-padding-inline-icons: var(--onyx-density-xs); --onyx-form-element-v2-caret-color: var(--onyx-color-component-cta-default); --onyx-form-element-v2-selection-background: var(--onyx-color-base-primary-200); --onyx-form-element-v2-outline-color: var(--onyx-color-component-focus-primary); --onyx-form-element-v2-error-display: none; --onyx-form-element-v2-message-display: flex; --onyx-form-element-v2-input-width: 100%; /** Base content and skeleton height. Useful when e.g. changing the base height for textarea etc. */ --onyx-form-element-v2-content-height: 1lh; --onyx-form-element-v2-label-skeleton-height: 1lh; } .onyx-form-element-v2:has(.onyx-form-element-v2__input:read-only) { --onyx-form-element-v2-selection-background: var(--onyx-color-base-neutral-200); --onyx-form-element-v2-caret-color: var(--onyx-color-base-neutral-700); --onyx-form-element-v2-background: var(--onyx-color-base-background-tinted); } .onyx-form-element-v2:has(.onyx-form-element-v2__input:enabled:read-only) { --onyx-form-element-v2-border-color-hover: var(--onyx-color-component-border-neutral-hover); --onyx-form-element-v2-border-color-focus: var(--onyx-color-component-border-neutral); --onyx-form-element-v2-outline-color: var(--onyx-color-component-focus-neutral); } .onyx-form-element-v2:not(.onyx-form-element--suppress-invalid).onyx-form-element--touched-invalid:has(.onyx-form-element-v2__input:user-invalid, .onyx-form-element-v2__input--touched:invalid, .onyx-form-element-v2__input--touched[aria-invalid=true]), .onyx-form-element-v2:not(.onyx-form-element--suppress-invalid).onyx-form-element--immediate-invalid:has(.onyx-form-element-v2__input:invalid, .onyx-form-element-v2__input[aria-invalid=true]) { --onyx-form-element-v2-border-color: var(--onyx-color-component-border-danger); --onyx-form-element-v2-border-color-hover: var(--onyx-color-component-border-danger-hover); --onyx-form-element-v2-border-color-focus: var(--onyx-color-component-border-danger); --onyx-form-element-v2-outline-color: var(--onyx-color-component-focus-danger); --onyx-form-element-v2-selection-background: var(--onyx-color-base-danger-200); --onyx-form-element-v2-caret-color: var(--onyx-color-base-neutral-900); --onyx-form-element-v2-error-display: flex; --onyx-form-element-v2-message-display: none; } .onyx-form-element-v2:has(.onyx-form-element-v2__message--success) { --onyx-form-element-v2-border-color: var(--onyx-color-component-border-success); --onyx-form-element-v2-border-color-hover: var(--onyx-color-component-border-success-hover); --onyx-form-element-v2-border-color-focus: var(--onyx-color-component-border-success); --onyx-form-element-v2-outline-color: var(--onyx-color-component-focus-success); --onyx-form-element-v2-selection-background: var(--onyx-color-base-success-200); --onyx-form-element-v2-caret-color: var(--onyx-color-base-neutral-900); } } @layer onyx.density { .onyx-density-compact .onyx-form-element-v2:has(.onyx-form-element-v2__content-skeleton), :is(.onyx-form-element-v2).onyx-density-compact:has(.onyx-form-element-v2__content-skeleton) { --onyx-form-element-v2-gap: var(--onyx-spacing-5xs); --onyx-form-element-v2-label-skeleton-height: calc(1lh - var(--onyx-form-element-v2-gap)); } } @layer onyx.component { .onyx-form-element-v2 { font-family: var(--onyx-font-family-paragraph); display: flex; flex-direction: column; gap: var(--onyx-form-element-v2-gap); color: var(--onyx-color-text-icons-neutral-intense); font-size: var(--onyx-font-size-md); line-height: var(--onyx-font-line-height-md); max-width: 100%; } .onyx-form-element-v2--label-left, .onyx-form-element-v2--label-right { --onyx-form-element-v2-gap: var(--onyx-density-lg); align-items: flex-start; justify-content: space-between; } .onyx-form-element-v2--label-left > .onyx-form-element-v2__label, .onyx-form-element-v2--label-right > .onyx-form-element-v2__label { width: max-content; padding-block: calc(var(--onyx-form-element-v2-padding-block) + var(--onyx-form-element-v2-border-size)); line-height: var(--onyx-font-line-height-md); } .onyx-form-element-v2--label-left { flex-direction: row; } .onyx-form-element-v2--label-right { flex-direction: row-reverse; } .onyx-form-element-v2__body { display: flex; flex-direction: column; gap: var(--onyx-density-3xs); width: 100%; } .onyx-form-element-v2__content { border-radius: var(--onyx-form-element-v2-border-radius); background-color: var(--onyx-form-element-v2-background); display: flex; align-items: center; height: calc(var(--onyx-form-element-v2-content-height) + 2 * var(--onyx-form-element-v2-padding-block)); } .onyx-form-element-v2__input-container { display: flex; align-items: center; flex-grow: 1; border: var(--onyx-form-element-v2-border-size) solid var(--onyx-form-element-v2-border-color); border-radius: inherit; height: 100%; max-width: 100%; } .onyx-form-element-v2__input-container:has(.onyx-form-element-v2__input:read-write):hover { border-color: var(--onyx-form-element-v2-border-color-hover); } .onyx-form-element-v2__input-container:has(.onyx-form-element-v2__input:autofill), .onyx-form-element-v2__input-container:has(.onyx-form-element-v2__input[data-test-autofill]) { background-color: var(--onyx-form-element-v2-background-autofill); } .onyx-form-element-v2__input-container:has(.onyx-form-element-v2__icons--leading) .onyx-form-element-v2__input { padding-left: var(--onyx-form-element-v2-padding-inline-icons); } .onyx-form-element-v2__input-container:has(.onyx-form-element-v2__icons--trailing) .onyx-form-element-v2__input { padding-right: var(--onyx-form-element-v2-padding-inline-icons); } .onyx-form-element-v2 .onyx-form-element-v2__input-container:focus-within, .onyx-form-element-v2 .onyx-form-element-v2__popover:has(> .onyx-basic-popover__dialog:popover-open) > .onyx-form-element-v2__input-container { border-color: var(--onyx-form-element-v2-border-color-focus); outline: var(--onyx-outline-width) solid var(--onyx-form-element-v2-outline-color); background-color: var(--onyx-form-element-v2-background-hover); } .onyx-form-element-v2 .onyx-form-element-v2__input-container:hover:has(.onyx-form-element-v2__input:enabled) { background-color: var(--onyx-form-element-v2-background-hover); } .onyx-form-element-v2__icons { color: var(--onyx-color-text-icons-neutral-medium); display: flex; align-items: center; padding: var(--onyx-form-element-v2-padding-block) var(--onyx-form-element-v2-padding-inline); gap: var(--onyx-density-2xs); } .onyx-form-element-v2__icons--leading { padding-right: 0; } .onyx-form-element-v2__icons--trailing { padding-left: 0; } .onyx-form-element-v2__slot { height: 100%; border: var(--onyx-form-element-v2-border-size) solid var(--onyx-form-element-v2-border-color); display: flex; align-items: center; } .onyx-form-element-v2__slot--leading { border-right: none; border-top-left-radius: inherit; border-bottom-left-radius: inherit; } .onyx-form-element-v2__slot--trailing { border-left: none; border-top-right-radius: inherit; border-bottom-right-radius: inherit; } .onyx-form-element-v2__slot .onyx-form-element-v2 { --onyx-form-element-v2-input-width: calc(3ch + var(--onyx-1px-in-rem)); --onyx-form-element-v2-border-size: 0; --onyx-form-element-v2-background: transparent; } .onyx-form-element-v2__content:has(> .onyx-form-element-v2__slot--leading) > .onyx-form-element-v2__popover:not(:has(.onyx-form-element-v2__input:focus)):not(:has(.onyx-basic-popover__dialog:popover-open)), .onyx-form-element-v2__content:has(> .onyx-form-element-v2__slot--leading) > .onyx-form-element-v2__input-container:not(:has(.onyx-form-element-v2__input:focus)):not(:has(.onyx-basic-popover__dialog:popover-open)) { border-top-left-radius: 0; border-bottom-left-radius: 0; } .onyx-form-element-v2__content:has(> .onyx-form-element-v2__slot--trailing) > .onyx-form-element-v2__popover:not(:has(.onyx-form-element-v2__input:focus)):not(:has(.onyx-basic-popover__dialog:popover-open)), .onyx-form-element-v2__content:has(> .onyx-form-element-v2__slot--trailing) > .onyx-form-element-v2__input-container:not(:has(.onyx-form-element-v2__input:focus)):not(:has(.onyx-basic-popover__dialog:popover-open)) { border-top-right-radius: 0; border-bottom-right-radius: 0; } .onyx-form-element-v2__input { border: none; border-radius: inherit; background-color: transparent; color: inherit; width: calc(var(--onyx-form-element-v2-input-width) + 2 * var(--onyx-form-element-v2-padding-inline)); max-width: 100%; height: 100%; outline: none; font-family: inherit; font-size: inherit; line-height: inherit; caret-color: var(--onyx-form-element-v2-caret-color); padding: var(--onyx-form-element-v2-padding-block) var(--onyx-form-element-v2-padding-inline); cursor: inherit; } .onyx-form-element-v2__input::placeholder { color: var(--onyx-color-text-icons-neutral-soft); font-weight: var(--onyx-font-weight-regular); opacity: 1; } .onyx-form-element-v2__input::selection { background: var(--onyx-form-element-v2-selection-background); } .onyx-form-element-v2__input::-webkit-search-cancel-button, .onyx-form-element-v2__input::-webkit-calendar-picker-indicator { display: none; } .onyx-form-element-v2__input::-webkit-outer-spin-button, .onyx-form-element-v2__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .onyx-form-element-v2__input[type=number] { -moz-appearance: textfield; } .onyx-form-element-v2__input:autofill { background-color: transparent; -webkit-text-fill-color: var(--onyx-color-text-icons-neutral-intense); transition: background-color calc(infinity * 1s); } .onyx-form-element-v2__tooltip { margin-left: var(--onyx-spacing-2xs); } .onyx-form-element-v2:has(.onyx-form-element-v2__bottom:not(:empty)):has(.onyx-form-element-v2__popover > .onyx-basic-popover__dialog--position-bottom) .onyx-form-element-v2__popover, .onyx-form-element-v2:has(> .onyx-form-element-v2__label):has(.onyx-form-element-v2__popover > .onyx-basic-popover__dialog--position-top) .onyx-form-element-v2__popover { --onyx-basic-popover-gap: var(--onyx-form-element-v2-bottom-height); } .onyx-form-element-v2__loading { color: var(--onyx-color-text-icons-primary-intense); } .onyx-form-element-v2__content-skeleton { width: 100%; height: calc(var(--onyx-form-element-v2-content-height) + 2 * var(--onyx-form-element-v2-padding-block)); } }@layer onyx.component { .onyx-input__counter--violated { color: var(--onyx-color-text-icons-danger-intense); } .onyx-input:not(.onyx-input--no-slot-padding) .onyx-form-element-v2__slot:not(:has(.onyx-input__password)) { padding-inline: var(--onyx-form-element-v2-padding-inline); } }@layer onyx.component { .onyx-link { text-decoration: underline; color: var(--onyx-color-text-icons-primary-intense); display: inline-block; } .onyx-link:hover { color: var(--onyx-color-text-icons-primary-medium); } .onyx-link:focus-visible { color: var(--onyx-color-text-icons-primary-intense); border-radius: var(--onyx-radius-sm); outline: var(--onyx-1px-in-rem) solid var(--onyx-color-component-focus-primary); } .onyx-link:active { color: var(--onyx-color-text-icons-primary-bold); } .onyx-link:visited { color: var(--onyx-color-text-icons-primary-bold); } .onyx-link:visited:hover { color: var(--onyx-color-text-icons-primary-intense); } .onyx-link .onyx-external-link-icon { margin-left: var(--onyx-density-3xs); } }@layer onyx.component { .onyx-select-option { --onyx-checkbox-input-size: 1rem; --onyx-checkbox-input-padding: var(--onyx-density-sm); } .onyx-select-option__checkbox { flex-shrink: 0; height: var(--onyx-checkbox-input-size); width: var(--onyx-checkbox-input-size); appearance: none; margin: 0; border-radius: var(--onyx-radius-component-checkbox); outline: none; cursor: inherit; border: var(--onyx-1px-in-rem) solid var(--onyx-color-component-border-neutral); background: var(--onyx-color-base-background-blank); background-position: 50%; background-repeat: no-repeat; background-size: 100% 100%; } .onyx-select-option__checkbox:checked:enabled, .onyx-select-option__checkbox:indeterminate:enabled { border-color: var(--onyx-color-component-cta-default); background-color: var(--onyx-color-component-cta-default); } .onyx-select-option__checkbox:checked:enabled:hover, .onyx-select-option__checkbox:indeterminate:enabled:hover { background-color: var(--onyx-color-component-cta-default-hover); } .onyx-select-option__checkbox:checked:user-invalid, .onyx-select-option__checkbox:indeterminate:user-invalid { border-color: var(--onyx-color-component-cta-danger); background-color: var(--onyx-color-component-cta-danger); } .onyx-select-option__checkbox:checked:user-invalid:hover, .onyx-select-option__checkbox:indeterminate:user-invalid:hover { background-color: var(--onyx-color-component-cta-danger-hover); } .onyx-select-option__checkbox:checked:disabled, .onyx-select-option__checkbox:indeterminate:disabled { background-color: var(--onyx-color-base-neutral-300); } .onyx-select-option__checkbox:disabled { border-color: var(--onyx-color-base-neutral-300); } .onyx-select-option__checkbox:user-invalid { border-color: var(--onyx-color-component-border-danger); } .onyx-select-option__checkbox:checked::after { content: " "; background-color: var(--onyx-color-text-icons-neutral-inverted); width: 100%; height: 100%; display: block; clip-path: polygon(66.6% 33.7%, 40.7% 59.6%, 30.4% 49.3%, 26% 53.7%, 40.7% 68.4%, 71% 38.1%); } .onyx-select-option__checkbox:indeterminate::after { content: " "; background-color: var(--onyx-color-text-icons-neutral-inverted); width: 100%; height: 100%; display: block; clip-path: polygon(25% 46.9%, 75% 46.9%, 75% 53.1%, 25% 53.1%); } .onyx-select-option__content { flex-grow: 1; } }@layer onyx.component { .onyx-select { /** @deprecated Use --onyx-select-flyout-max-height instead */ --max-flyout-height: 20rem; --onyx-select-flyout-max-height: var(--max-flyout-height, 20rem); } .onyx-select__badge { display: flex; align-items: center; gap: var(--onyx-density-2xs); cursor: pointer; } .onyx-select__badge .onyx-form-element-action { --onyx-form-element-action-color: currentColor; } .onyx-select__flyout { width: 100%; margin-block: var(--onyx-spacing-2xs); max-height: var(--onyx-select-flyout-max-height); overflow: auto; } .onyx-select__flyout .onyx-empty { max-width: 100%; } .onyx-select__flyout:has(.onyx-select__search) .onyx-select__group-name:first-child, .onyx-select__flyout:has(.onyx-select__check-all) .onyx-select__group-name:first-child { margin-top: var(--onyx-density-xs); } .onyx-select__flyout:has(.onyx-select__search) { scroll-padding-top: calc(1lh + 2 * var(--onyx-density-xs)); } .onyx-select__group, .onyx-select__check-all { padding: 0; list-style: none; } .onyx-select__group:not(:last-of-type), .onyx-select__check-all:not(:last-of-type) { border-bottom: var(--onyx-1px-in-rem) solid var(--onyx-color-component-border-neutral); } .onyx-select__group:not(:last-of-type) { margin-bottom: var(--onyx-density-xs); } .onyx-select__group-name { display: block; padding-inline: var(--onyx-density-sm); color: var(--onyx-color-text-icons-neutral-medium); font-weight: var(--onyx-font-weight-semibold); font-size: var(--onyx-font-size-sm); line-height: var(--onyx-font-line-height-sm); } .onyx-select__search { position: sticky; top: 0; border-bottom: var(--onyx-1px-in-rem) solid var(--onyx-color-component-border-neutral); } .onyx-select__loading { color: var(--onyx-color-text-icons-primary-intense); } .onyx-select__slot { padding-inline: var(--onyx-density-sm); display: flex; flex-direction: column; align-items: center; justify-content: center; } }@layer onyx.component { .onyx-stepper { --onyx-stepper-text-align: center; } .onyx-stepper__counter { border: none; height: 100%; background-color: transparent; color: var(--onyx-color-text-icons-neutral-medium); display: inline-flex; align-items: center; padding: var(--onyx-form-element-v2-padding-block); border-radius: inherit; outline: none; } .onyx-stepper__counter:enabled { cursor: pointer; } .onyx-stepper__counter:enabled:hover, .onyx-stepper__counter:enabled:focus-visible { color: var(--onyx-color-text-icons-primary-intense); } .onyx-stepper__counter:enabled:focus-visible { outline: none; background-color: var(--onyx-color-base-primary-100); } .onyx-stepper__counter:enabled:active { background-color: var(--onyx-color-base-primary-100); } .onyx-stepper__counter:disabled { color: var(--onyx-color-text-icons-neutral-soft); } .onyx-stepper__input { text-align: var(--onyx-stepper-text-align); } .onyx-stepper__input:not(:focus-visible) { color: transparent; } .onyx-stepper .onyx-form-element-v2__input-container:has(.onyx-form-element-v2__icons--leading) .onyx-stepper__display { padding-left: var(--onyx-form-element-v2-padding-inline-icons); } .onyx-stepper .onyx-form-element-v2__input-container:has(.onyx-form-element-v2__icons--trailing) .onyx-stepper__display { padding-right: var(--onyx-form-element-v2-padding-inline-icons); } .onyx-stepper__display-wrapper { position: relative; width: 100%; } .onyx-stepper__display { position: absolute; height: 100%; width: 100%; color: var(--onyx-color-text-icons-neutral-intense); pointer-events: none; display: flex; justify-content: var(--onyx-stepper-text-align); align-items: center; overflow: hidden; white-space: nowrap; padding: var(--onyx-form-element-v2-padding-block) var(--onyx-form-element-v2-padding-inline); } .onyx-stepper__display:has(+ .onyx-stepper__input:focus-visible) { display: none; } }@layer onyx.component { .onyx-switch, .onyx-switch-skeleton { --onyx-switch-icon-size: 1.25rem; --onyx-switch-container-padding: var(--onyx-1px-in-rem); --onyx-switch-frame-height: calc( var(--onyx-switch-icon-size) + 2 * var(--onyx-switch-container-padding) + 2 * var(--onyx-1px-in-rem) ); --onyx-switch-label-padding-vertical: var(--onyx-density-xs); --onyx-switch-transform: var(--onyx-1px-in-rem); } } @layer onyx.component { .onyx-switch { display: inline-flex; align-items: flex-start; cursor: pointer; max-width: 100%; } .onyx-tooltip-wrapper:has(.onyx-switch) { max-width: 100%; } .onyx-switch__frame { position: absolute; border: var(--onyx-1px-in-rem) solid var(--onyx-color-base-neutral-600); height: var(--onyx-switch-frame-height); border-radius: var(--onyx-radius-full); width: calc(2 * var(--onyx-switch-icon-size) - 2 * var(--onyx-switch-container-padding)); box-sizing: border-box; top: 0; left: 0; } .onyx-switch__input { position: absolute; opacity: 0; cursor: inherit; width: 0; height: 0; margin: 0; } .onyx-switch__input:checked + .onyx-switch__click-area .onyx-switch__container { background-color: var(--onyx-color-component-cta-default); } .onyx-switch__input:checked + .onyx-switch__click-area .onyx-switch__container .onyx-switch__icon { background-color: var(--onyx-color-base-neutral-100); transform: translateX(calc(75% - var(--onyx-switch-transform))); color: var(--onyx-color-text-icons-primary-intense); } .onyx-switch__input:checked + .onyx-switch__click-area .onyx-switch__container .onyx-switch__spinner { color: var(--onyx-color-text-icons-primary-intense); } .onyx-switch__input:checked:disabled:not(.onyx-switch__loading) + .onyx-switch__click-area .onyx-switch__container { background-color: var(--onyx-color-base-primary-200); } .onyx-switch__input:checked:disabled:not(.onyx-switch__loading) + .onyx-switch__click-area .onyx-switch__container .onyx-switch__icon { background-color: var(--onyx-color-base-background-blank); color: var(--onyx-color-text-icons-primary-soft); } .onyx-switch__input:disabled:not(.onyx-switch__loading) + .onyx-switch__click-area .onyx-switch__container { background-color: var(--onyx-color-base-neutral-200); } .onyx-switch__input:disabled:not(.onyx-switch__loading) + .onyx-switch__click-area .onyx-switch__container .onyx-switch__icon { background-color: var(--onyx-color-base-neutral-300); color: var(--onyx-color-text-icons-neutral-inverted); } .onyx-switch__input:user-invalid + .onyx-switch__click-area .onyx-switch__container { background-color: var(--onyx-color-base-danger-200); } .onyx-switch__input:user-invalid + .onyx-switch__click-area .onyx-switch__container .onyx-switch__icon { background-color: var(--onyx-color-base-danger-500); color: var(--onyx-color-text-icons-neutral-inverted); } .onyx-switch__input:user-invalid + .onyx-switch__click-area .onyx-switch__container .onyx-switch__frame { border-color: var(--onyx-color-component-border-danger); } .onyx-switch__input:user-invalid:checked + .onyx-switch__click-area .onyx-switch__container { background-color: var(--onyx-color-component-cta-danger); } .onyx-switch__input:user-invalid:checked + .onyx-switch__click-area .onyx-switch__container .onyx-switch__icon { background-color: var(--onyx-color-base-background-blank); color: var(--onyx-color-text-icons-danger-intense); } .onyx-switch__click-area, .onyx-switch-skeleton__click-area { padding: var(--onyx-switch-label-padding-vertical); display: flex; align-items: center; } .onyx-switch__container { display: inline-flex; position: relative; width: calc(2 * var(--onyx-switch-icon-size) - 2 * var(--onyx-switch-container-padding)); min-width: calc(2 * var(--onyx-switch-icon-size) - 2 * var(--onyx-switch-container-padding)); padding: var(--onyx-switch-container-padding); box-sizing: border-box; background-color: var(--onyx-color-base-neutral-300); border-radius: var(--onyx-radius-full); transition: background-color var(--onyx-duration-sm) ease; } .onyx-switch__container .onyx-switch__icon { margin: var(--onyx-1px-in-rem); display: flex; align-self: center; justify-content: center; background-color: var(--onyx-color-base-neutral-100); border-radius: var(--onyx-radius-full); transition: transform var(--onyx-duration-sm) ease, background-color var(--onyx-duration-sm) ease; overflow: hidden; color: var(--onyx-color-text-icons-neutral-soft); height: var(--onyx-switch-icon-size); width: var(--onyx-switch-icon-size); } .onyx-switch__container .onyx-switch__icon .onyx-icon { --icon-size: var(--onyx-switch-icon-size); } .onyx-switch__container .onyx-switch__icon .onyx-switch__spinner { --indicator-size: var(--onyx-switch-icon-size); } .onyx-switch__label, .onyx-switch__marker { padding: var(--onyx-switch-label-padding-vertical) 0; font-size: var(--onyx-font-size-md); line-height: var(--onyx-font-line-height-md); } .onyx-switch__label { color: var(--onyx-color-text-icons-neutral-intense); font-family: var(--onyx-font-family-paragraph); font-style: normal; font-weight: var(--onyx-font-weight-regular); } .onyx-switch:hover:has(.onyx-switch__input:enabled) .onyx-switch__container { background-color: var(--onyx-color-base-neutral-400); } .onyx-switch:hover:has(.onyx-switch__input:enabled:checked) .onyx-switch__container { background-color: var(--onyx-color-component-cta-default-hover); } .onyx-switch:hover:has(.onyx-switch__input:user-invalid:enabled) .onyx-switch__container { background-color: var(--onyx-color-base-danger-300); } .onyx-switch:hover:has(.onyx-switch__input:user-invalid:enabled:checked) .onyx-switch__container { background-color: var(--onyx-color-component-cta-danger-hover); } .onyx-switch:has(.onyx-switch__input:focus-visible) { outline: none; } .onyx-switch:has(.onyx-switch__input:focus-visible):has(.onyx-switch__input:enabled) .onyx-switch__container { outline: var(--onyx-outline-width) solid var(--onyx-color-base-neutral-600); } .onyx-switch:has(.onyx-switch__input:focus-visible):has(.onyx-switch__input:checked:enabled) .onyx-switch__container { outline: var(--onyx-outline-width) solid var(--onyx-color-component-focus-primary); } .onyx-switch:has(.onyx-switch__input:focus-visible):has(.onyx-switch__input:user-invalid:enabled) .onyx-switch__container { outline: var(--onyx-outline-width) solid var(--onyx-color-component-focus-danger); } .onyx-switch:has(.onyx-switch__input:disabled) { cursor: default; } .onyx-switch:has(.onyx-switch__input:disabled) .onyx-switch__frame { border-color: transparent; } .onyx-switch:has(.onyx-switch__input:disabled) .onyx-switch__label { color: var(--onyx-color-text-icons-neutral-soft); } .onyx-switch:has(.onyx-switch__input:disabled.onyx-switch__loading) .onyx-switch__frame { border-color: var(--onyx-color-base-neutral-600); } } @layer onyx.component { .onyx-switch-skeleton { display: inline-flex; align-items: center; } .onyx-switch-skeleton__input { height: var(--onyx-switch-frame-height); border-radius: var(--onyx-radius-full); width: calc(2 * var(--onyx-switch-icon-size) - 2 * var(--onyx-switch-container-padding)); } .onyx-switch-skeleton__label { height: var(--onyx-spacing-md); width: var(--onyx-spacing-3xl); } }@layer onyx.component { .onyx-toggle { --track-padding: min(var(--onyx-density-2xs), var(--onyx-number-spacing-200)); display: inline-block; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; flex-shrink: 0; } .onyx-toggle__input { position: absolute; opacity: 0; width: 0; height: 0; } .onyx-toggle__track { height: calc(1lh + 2 * var(--onyx-density-xs)); position: relative; display: flex; flex-direction: column; align-items: center; background-color: var(--onyx-color-base-neutral-200); border-radius: var(--onyx-radius-sm); padding: var(--track-padding); width: fit-content; border: var(--onyx-1px-in-rem) solid var(--onyx-color-base-neutral-200); } .onyx-toggle:has(.onyx-toggle__input:focus-visible) .onyx-toggle__track { border-color: var(--onyx-color-component-border-primary); outline: var(--onyx-outline-width) solid var(--onyx-color-component-focus-primary); } .onyx-toggle__option { position: relative; font-size: var(--onyx-font-size-sm); font-weight: var(--onyx-font-weight-semibold); color: var(--onyx-color-text-icons-neutral-medium); padding: var(--onyx-density-3xs) var(--onyx-density-xs); display: flex; justify-content: center; align-items: center; height: 50%; } .onyx-toggle__slider { position: absolute; top: var(--track-padding); left: var(--track-padding); right: var(--track-padding); height: calc(50% - var(--track-padding)); background-color: var(--onyx-color-base-background-blank); border-radius: var(--onyx-radius-sm); transition: transform var(--onyx-duration-sm) cubic-bezier(0.4, 0, 0.2, 1); } .onyx-toggle__slider.is-checked { transform: translateY(100%); } }@layer onyx.component { .onyx-time-picker__group { display: flex; flex-direction: column; gap: var(--onyx-density-xs); } .onyx-time-picker__segments { width: 100%; display: flex; gap: var(--onyx-density-xs); align-items: center; } .onyx-time-picker__segment-separator { font-size: var(--onyx-font-size-xl); pointer-events: none; -webkit-user-select: none; user-select: none; } }@layer onyx.component { .onyx-time-picker__wrapper { width: 100%; display: flex; flex-direction: column; gap: var(--onyx-density-lg); padding: var(--onyx-density-xs) var(--onyx-density-sm); } }@layer onyx.override { .onyx-data-grid-form-wrapper, .onyx-data-grid-form-wrapper :is(.onyx-select-input, .onyx-time-picker-input) { --border-color: transparent; --border-style: none; --border-radius: 0; --background-color: transparent; --outline-style: none; --onyx-outline-width: 0; --padding-horizontal: 0; --onyx-form-element-v2-border-size: 0; --onyx-form-element-v2-border-radius: 0; --onyx-form-element-v2-background: transparent; --onyx-outline-width: 0; --onyx-form-element-v2-padding-inline: 0rem; } .onyx-table :is(td, th):has(.onyx-data-grid-form-wrapper, .onyx-data-grid-form-wrapper :is(.onyx-select-input, .onyx-time-picker-input)) { padding-block: 0; } .onyx-data-grid-form-wrapper.onyx-slider { padding: var(--onyx-density-xs) var(--onyx-density-sm); } }@layer onyx.component { .onyx-dialog { --onyx-dialog-padding-inline: var(--onyx-density-md); --onyx-basic-dialog-padding: 0; width: fit-content; } .onyx-dialog .onyx-basic-popover__dialog { --onyx-basic-popover-max-width: calc(100% - 2 * (var(--onyx-density-md))); } .onyx-dialog .onyx-basic-dialog__content { display: flex; flex-direction: column; } .onyx-dialog__header { display: flex; flex-direction: column; width: 100%; gap: var(--onyx-density-2xs); padding: var(--onyx-density-md) var(--onyx-dialog-padding-inline); } .onyx-dialog__headline { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--onyx-density-sm); } .onyx-dialog__headline-content { display: flex; flex-wrap: wrap; align-items: center; gap: inherit; position: relative; width: 100%; overflow: hidden; justify-content: center; } .onyx-dialog__body { overflow: auto; width: 100%; flex-grow: 1; } .onyx-dialog__footer { width: 100%; } }@layer onyx.component { .onyx-link-dialog .onyx-basic-popover__dialog { width: 16rem; } .onyx-link-dialog__content { padding: var(--onyx-density-md) var(--onyx-dialog-padding-inline); display: flex; flex-direction: column; gap: var(--onyx-density-md); } .onyx-link-dialog .onyx-dialog__headline-content { justify-content: flex-start; } }.onyx-link-editor { width: 100%; } .onyx-link-editor__display { width: 100%; align-items: center; display: flex; justify-content: space-between; gap: var(--onyx-density-sm); }@layer onyx.component { .onyx-data-grid-header-cell { display: flex; align-items: center; gap: var(--onyx-density-xs); min-height: 1.5rem; } .onyx-data-grid-header-cell__actions { display: inline-flex; gap: var(--onyx-density-2xs); } }@layer onyx.component { .onyx-data-grid .onyx-data-grid-number-cell { font-family: var(--onyx-font-family-mono); text-align: end; } .onyx-data-grid .onyx-data-grid-boolean-cell { color: var(--onyx-color-text-icons-neutral-medium); text-align: center; } .onyx-data-grid .onyx-data-grid-boolean-cell .onyx-icon { vertical-align: top; } }@layer onyx.component { .onyx-data-grid .onyx-filter-search { min-width: 12rem; } .onyx-data-grid .onyx-system-button--multiple-actions + .onyx-flyout-menu__list .onyx-filter-search { border-bottom: var(--onyx-1px-in-rem) solid var(--onyx-color-component-border-neutral); } }/** * Function for getting a approximated CSS "ch" length value that can be used to e.g. set the width of an element based on the text length. * Adds 1px of additional space to ensure no overflow for low character counts. */ @layer onyx.component { .onyx-items-per-page { --onyx-form-element-v2-input-width: calc(var(--onyx-items-per-page-character-count) * 1ch + var(--onyx-1px-in-rem)); width: max-content; } .onyx-items-per-page .onyx-form-element-v2__content-skeleton { width: 5rem; } .onyx-items-per-page .onyx-form-element-v2__body { width: max-content; } .onyx-items-per-page .onyx-form-element-v2__label { overflow: hidden; } }@layer onyx.component { .onyx-pagination-skeleton.onyx-pagination-skeleton--compact { width: calc(2 * (1.5rem + 2 * var(--onyx-pagination-padding-vertical)) + 5.5rem + 2 * var(--onyx-pagination-padding-vertical)); } } @layer onyx.component { .onyx-pagination--compact .onyx-pagination__button:first-of-type { border-radius: var(--onyx-pagination-border-radius) 0 0 var(--onyx-pagination-border-radius); } .onyx-pagination--compact .onyx-pagination__button:last-of-type { border-left: unset; } .onyx-pagination--compact .onyx-pagination__button:last-of-type:focus-visible { margin-left: var(--onyx-outline-width); border-left: var(--onyx-pagination-border-size) solid var(--onyx-color-component-border-neutral); } .onyx-pagination--compact .onyx-pagination__select { --onyx-form-element-v2-border-radius: 0; --onyx-form-element-v2-padding-inline-icons: var(--onyx-form-element-v2-padding-inline); } .onyx-pagination--compact .onyx-pagination__select .onyx-form-element-v2__icons--trailing { display: none; } .onyx-pagination--compact .onyx-pagination__select .onyx-form-element-v2__input { text-align: center; } .onyx-pagination--compact:has(.onyx-pagination__button:first-of-type:focus-visible) .onyx-form-element-v2__input-container { max-width: unset; border-left: none; margin-left: calc(-1 * var(--onyx-outline-width)); } .onyx-pagination--compact:has(.onyx-pagination__button:last-of-type:focus-visible) .onyx-form-element-v2__input-container { max-width: unset; border-right: none; margin-right: calc(-1 * var(--onyx-outline-width)); } }@layer onyx.component { .onyx-pagination-skeleton.onyx-pagination-skeleton--inline { width: calc(7 * (1.5rem + 2 * var(--onyx-pagination-padding-vertical))); } } @layer onyx.component { .onyx-pagination--inline { background-color: var(--onyx-color-base-background-blank); } .onyx-pagination--inline > .onyx-pagination__navigate-button, .onyx-pagination--inline > .onyx-pagination__page-button, .onyx-pagination--inline > .onyx-pagination__more-pages { display: flex; justify-content: center; align-items: center; padding: var(--onyx-pagination-padding-vertical); height: var(--onyx-pagination-height); border: var(--onyx-pagination-border-size) solid var(--onyx-color-component-border-neutral); border-left: none; background-color: inherit; color: inherit; aspect-ratio: 1; } .onyx-pagination--inline > .onyx-pagination__more-pages { cursor: default; } .onyx-pagination--inline:has(.onyx-pagination__page-button:disabled) .onyx-pagination__more-pages { background-color: var(--onyx-color-base-background-tinted); color: var(--onyx-color-text-icons-neutral-soft); } .onyx-pagination--inline > .onyx-pagination__page-button, .onyx-pagination--inline > .onyx-pagination__navigate-button { cursor: pointer; color: var(--onyx-color-text-icons-neutral-medium); } .onyx-pagination--inline > .onyx-pagination__page-button:hover, .onyx-pagination--inline > .onyx-pagination__page-button:focus-visible, .onyx-pagination--inline > .onyx-pagination__navigate-button:hover, .onyx-pagination--inline > .onyx-pagination__navigate-button:focus-visible { color: var(--onyx-color-text-icons-neutral-intense); } .onyx-pagination--inline > .onyx-pagination__page-button:hover, .onyx-pagination--inline > .onyx-pagination__navigate-button:hover { background-color: var(--onyx-color-base-neutral-200); } .onyx-pagination--inline > .onyx-pagination__page-button:focus-visible, .onyx-pagination--inline > .onyx-pagination__navigate-button:focus-visible { z-index: 1; background-color: var(--onyx-color-base-neutral-200); outline: var(--onyx-outline-width) solid var(--onyx-color-component-focus-primary); } .onyx-pagination--inline > .onyx-pagination__page-button:active, .onyx-pagination--inline > .onyx-pagination__navigate-button:active { background-color: var(--onyx-color-base-background-blank); } .onyx-pagination--inline > .onyx-pagination__page-button:disabled, .onyx-pagination--inline > .onyx-pagination__navigate-button:disabled { background-color: var(--onyx-color-base-background-tinted); color: var(--onyx-color-text-icons-neutral-soft); } .onyx-pagination--inline > .onyx-pagination__navigate-button:first-of-type { border-radius: var(--onyx-pagination-border-radius) 0 0 var(--onyx-pagination-border-radius); border-left: var(--onyx-pagination-border-size) solid var(--onyx-color-component-border-neutral); } .onyx-pagination--inline > .onyx-pagination__navigate-button:last-of-type { border-radius: 0 var(--onyx-pagination-border-radius) var(--onyx-pagination-border-radius) 0; } .onyx-pagination--inline > .onyx-pagination__page-button.onyx-pagination__page-button--active:not(:disabled) { background-color: var(--onyx-color-base-primary-100); color: var(--onyx-color-text-icons-primary-intense); } .onyx-pagination--inline > .onyx-pagination__page-button.onyx-pagination__page-button--active:not(:disabled):hover { background-color: var(--onyx-color-base-primary-200); color: var(--onyx-color-text-icons-primary-intense); } .onyx-pagination--inline > .onyx-pagination__page-button.onyx-pagination__page-button--active:not(:disabled):focus-visible { background-color: var(--onyx-color-base-primary-300); color: var(--onyx-color-text-icons-neutral-inverted); } .onyx-pagination--inline > .onyx-pagination__page-button.onyx-pagination__page-button--active:not(:disabled):active { background-color: var(--onyx-color-base-primary-100); } }/** * Function for getting a approximated CSS "ch" length value that can be used to e.g. set the width of an element based on the text length. * Adds 1px of additional space to ensure no overflow for low character counts. */ @layer onyx.component { .onyx-pagination, .onyx-pagination-skeleton { --onyx-pagination-padding-vertical: var(--onyx-density-xs); --onyx-pagination-height: calc(1lh + 2 * var(--onyx-pagination-padding-vertical)); } } @layer onyx.component { .onyx-pagination-skeleton { height: var(--onyx-pagination-height); width: calc(2 * (4.25rem + 2 * var(--onyx-density-sm)) + 2 * (1.5rem + 2 * var(--onyx-pagination-padding-vertical))); } } @layer onyx.component { .onyx-pagination { --onyx-pagination-border-size: var(--onyx-1px-in-rem); --onyx-pagination-character-count: 1; --onyx-pagination-border-radius: var(--onyx-radius-sm); display: flex; align-items: flex-start; color: var(--onyx-color-text-icons-neutral-intense); font-family: var(--onyx-font-family-paragraph); height: var(--onyx-pagination-height); width: max-content; max-width: 100%; } .onyx-pagination__select { --onyx-form-element-v2-border-radius: var(--onyx-pagination-border-radius) 0 0 var(--onyx-pagination-border-radius); --onyx-form-element-v2-input-width: calc(var(--onyx-pagination-character-count) * 1ch + var(--onyx-1px-in-rem)); --onyx-form-element-v2-background-hover: var(--onyx-color-base-neutral-200); } .onyx-pagination__select .onyx-form-element-action { --onyx-form-element-action-color-highlight: var(--onyx-color-text-icons-neutral-intense); } .onyx-pagination__count { display: flex; justify-content: center; align-items: center; padding: var(--onyx-pagination-padding-vertical) var(--onyx-density-sm); height: var(--onyx-pagination-height); border: 0 solid var(--onyx-color-component-border-neutral); border-width: var(--onyx-pagination-border-size) 0; text-align: center; color: var(--onyx-color-text-icons-neutral-soft); background-color: var(--onyx-color-base-background-tinted); width: max-content; max-width: 100%; } .onyx-pagination__button { display: flex; justify-content: center; align-items: center; padding: var(--onyx-pagination-padding-vertical); height: var(--onyx-pagination-height); background-color: var(--onyx-color-base-background-blank); border: var(--onyx-pagination-border-size) solid var(--onyx-color-component-border-neutral); color: inherit; } .onyx-pagination__button:first-of-type:not(:focus-visible) { border-right: none; } .onyx-pagination__button:first-of-type:focus-visible + .onyx-pagination__button { border-left: none; } .onyx-pagination__button:last-of-type { border-radius: 0 var(--onyx-pagination-border-radius) var(--onyx-pagination-border-radius) 0; } .onyx-pagination__button:enabled { cursor: pointer; color: var(--onyx-color-text-icons-neutral-medium); } .onyx-pagination__button:enabled:hover, .onyx-pagination__button:enabled:focus-visible { color: var(--onyx-color-text-icons-neutral-intense); } .onyx-pagination__button:enabled:hover { background-color: var(--onyx-color-base-neutral-200); } .onyx-pagination__button:enabled:focus-visible { background-color: var(--onyx-color-base-neutral-200); outline: var(--onyx-outline-width) solid var(--onyx-color-component-focus-primary); } .onyx-pagination__button:enabled:focus-visible:first-of-type { margin-right: var(--onyx-outline-width); } .onyx-pagination__button:enabled:focus-visible:first-of-type + .onyx-pagination__button { padding-left: calc(var(--onyx-pagination-padding-vertical) - var(--onyx-outline-width)); } .onyx-pagination__button:enabled:active { background-color: var(--onyx-color-base-background-blank); } .onyx-pagination__button:disabled { background-color: var(--onyx-color-base-background-tinted); color: var(--onyx-color-text-icons-neutral-soft); } }@layer onyx.component { .onyx-data-grid tr:has(.onyx-data-grid-selection-cell__checkbox--checked) { --onyx-table-row-background-color: var(--onyx-color-base-primary-100); } .onyx-data-grid .onyx-data-grid-selection-cell { --onyx-table-padding-block: 0; --onyx-table-padding-inline: 0; box-sizing: content-box; } .onyx-data-grid .onyx-data-grid-selection-cell__checkbox--hover { opacity: 0; } .onyx-data-grid tr .onyx-data-grid-selection-cell__checkbox:has(input:focus-visible), .onyx-data-grid tr:hover .onyx-data-grid-selection-cell__checkbox, .onyx-data-grid .onyx-data-grid-selection-cell__checkbox--checked { opacity: 1; } }/*#region breakpoints*/ /*#endregion breakpoints*/ /** * Applies CSS only if the screen width satisfies the given onyx breakpoint. * @param {string} $min-max - Whether the breakpoint should be considered as min or max width. * @param {string} $name - name of the onyx breakpoint. One of: 2xs, xs, sm, md, lg or xl * * @example screen(min, sm) * @example screen(max, sm) */ /** * Applies CSS only if the container width satisfies the given onyx breakpoint. * @param {string} $min-max - Whether the breakpoint should be considered as min or max width. * @param {string} $name - name of the onyx breakpoint. One of: 2xs, xs, sm, md, lg or xl * @param {number} $offset - optional offset to add to the min/max width. Useful if both min and max are used for the same breakpoint * * @example container(min, sm) * @example container(max, sm) */ @layer onyx.component { .onyx-data-grid__lazy-pagination, .onyx-data-grid__button-pagination { border-right: none; text-align: center; } .onyx-data-grid__lazy-pagination > .onyx-loading-dots, .onyx-data-grid__button-pagination > .onyx-loading-dots { margin-inline: auto; } @container (max-width: 577px) { .onyx-data-grid__items-per-page .onyx-form-element-v2__label { display: none; } } }@layer onyx.component { .onyx-data-grid--skeleton { pointer-events: none; } .onyx-data-grid__headline-count { color: var(--onyx-color-text-icons-neutral-soft); } }@layer onyx.component { .onyx-data-grid .onyx-data-grid-expand-cell { --onyx-table-padding-inline: var(--onyx-table-padding-block); } .onyx-data-grid .onyx-data-grid-expand-button { display: flex; } .onyx-data-grid:has(> .onyx-table-wrapper__container > .onyx-table--vertical-borders) .onyx-data-grid-expand-details { --expand-details-border-size: var(--onyx-1px-in-rem); } .onyx-data-grid .onyx-data-grid-expand-details { padding: var(--onyx-density-md); padding-left: calc(1.5rem + 2 * var(--onyx-table-padding-block) + var(--onyx-table-padding-inline) + var(--expand-details-border-size, 0rem)); } }@layer onyx.component { .onyx-data-grid .onyx-data-grid-hide-columns-cell { text-align: center; padding: var(--onyx-density-xs); } }@layer onyx.component { .onyx-resize-handle { --onyx-resize-handle-width: 1rem; --onyx-resize-handle-border-width: var(--onyx-1px-in-rem); --onyx-resize-handle--active-indicator-height: 0; all: unset; position: absolute; top: 0; right: calc(-0.5 * var(--onyx-resize-handle-width)); width: var(--onyx-resize-handle-width); height: 100%; z-index: 1; cursor: col-resize; } .onyx-resize-handle--left { left: calc(-0.5 * var(--onyx-resize-handle-width)); right: unset; } .onyx-resize-handle::after { content: ""; height: 100%; width: var(--onyx-resize-handle-border-width); position: absolute; top: 0; left: calc(50% - 0.5 * var(--onyx-resize-handle-border-width)); opacity: 0; background-color: var(--onyx-color-base-neutral-600); } .onyx-resize-handle--active::before { content: ""; height: calc(var(--onyx-resize-handle--active-indicator-height) - 100%); width: var(--onyx-resize-handle-border-width); position: absolute; top: 100%; left: calc(50% - 0.5 * var(--onyx-resize-handle-border-width)); background-color: var(--onyx-color-base-neutral-600); } .onyx-resize-handle:hover::after, .onyx-resize-handle--active::after { opacity: 0.5; background-color: var(--onyx-color-base-primary-500); } }@layer onyx.component { .onyx-data-grid-filler-column-cell:is(td, th) { padding: 0; } .onyx-data-grid-resize-cell .onyx-resize-handle { --onyx-resize-handle--active-indicator-height: var(--onyx-table-observed-height); --onyx-resize-handle-border-width: 0.125rem; } .onyx-data-grid-resize-cell .onyx-resize-handle:hover .onyx-resize-handle::after { opacity: 0.3; } .onyx-data-grid:has(.onyx-data-grid-resize-cell--active) tbody, .onyx-data-grid:has(.onyx-data-grid-resize-cell--active) th:not(.onyx-data-grid-resize-cell--active) { pointer-events: none; } }@layer onyx.component { .onyx-data-grid .onyx-data-grid-sticky-columns--sticky.isScrolled { box-shadow: var(--onyx-spacing-4xs) 0rem var(--onyx-spacing-4xs) calc(-1 * var(--onyx-1px-in-rem)) rgba(0, 0, 0, 0.1); } .onyx-data-grid .onyx-data-grid-sticky-columns--sticky.isScrolled.right { box-shadow: calc(-1 * var(--onyx-spacing-4xs)) 0rem var(--onyx-spacing-4xs) calc(-1 * var(--onyx-1px-in-rem)) rgba(0, 0, 0, 0.1); } .onyx-data-grid .onyx-data-grid-sticky-columns--sticky.isScrolled.right ~ .right { box-shadow: none; } .onyx-data-grid .onyx-data-grid-sticky-columns--sticky { position: sticky; } .onyx-data-grid .onyx-data-grid-sticky-columns--sticky.right:after { position: absolute; left: calc(-1 * var(--onyx-1px-in-rem)); top: 0px; content: ""; height: 100%; width: var(--onyx-1px-in-rem); background-color: var(--onyx-color-component-border-neutral); } .onyx-data-grid th.onyx-data-grid-sticky-columns--sticky.isScrolled::before { display: none; } .onyx-data-grid th.onyx-data-grid-sticky-columns--sticky.isScrolled:hover { background-color: var(--onyx-color-base-neutral-200); } .onyx-data-grid th.onyx-data-grid-sticky-columns--sticky.isScrolled { z-index: calc(var(--onyx-z-index-sticky-content) + 1); } .onyx-data-grid td.onyx-data-grid-sticky-columns--sticky.isScrolled { z-index: var(--onyx-z-index-sticky-content); } .onyx-data-grid .onyx-data-grid .onyx-data-grid-sticky-columns--sticky.isScrolled.right ~ .right { box-shadow: none; } .dark .onyx-data-grid .onyx-data-grid-sticky-columns--sticky.isScrolled ~ .left { border-right: var(--onyx-1px-in-rem) solid var(--onyx-color-component-focus-neutral); } .dark .onyx-data-grid .onyx-data-grid-sticky-columns--sticky.isScrolled.right:after { background-color: var(--onyx-color-component-focus-neutral); } .dark .onyx-data-grid .onyx-data-grid-sticky-columns--sticky.isScrolled ~ .right:after { background-color: initial; } }@layer onyx.component { .onyx-date-picker-v2 { --onyx-date-picker-v2-calendar-border-radius: var(--onyx-radius-md); } .onyx-date-picker-v2__calendar-wrapper { display: flex; width: 100%; } .onyx-date-picker-v2__calendar { --onyx-calendar-border-radius: 0 0 var(--onyx-date-picker-v2-calendar-border-radius) var(--onyx-date-picker-v2-calendar-border-radius); width: 100%; gap: 0; } .onyx-date-picker-v2__calendar .onyx-calendar__header { padding: var(--onyx-density-xs); } .onyx-date-picker-v2__calendar--multi-view { width: 18rem; } .onyx-date-picker-v2__calendar--multi-view:first-child { --onyx-calendar-border-radius: 0 0 0 var(--onyx-date-picker-v2-calendar-border-radius); } .onyx-date-picker-v2__calendar--multi-view:last-child { --onyx-calendar-border-radius: 0 0 var(--onyx-date-picker-v2-calendar-border-radius) 0; } }@layer onyx.component { .onyx-key-skeleton, .onyx-key { --onyx-key-border-radius: var(--onyx-radius-sm); --onyx-key-size: 1.5rem; --onyx-key-width: calc(var(--onyx-key-size) + 2 * var(--onyx-1px-in-rem)); display: inline-flex; } } @layer onyx.component { .onyx-key { align-items: center; justify-content: center; min-width: var(--onyx-key-width); padding-inline: var(--onyx-density-2xs); background-color: var(--onyx-color-base-background-tinted); border: var(--onyx-1px-in-rem) solid var(--onyx-color-component-border-neutral); border-radius: var(--onyx-key-border-radius); color: var(--onyx-color-text-icons-neutral-medium); } .onyx-key--highlighted { background-color: var(--onyx-color-base-neutral-200); border-color: var(--onyx-color-base-neutral-400); } } @layer onyx.component { .onyx-key-skeleton { display: inline-block; min-width: var(--onyx-key-width); width: var(--onyx-key-size); min-height: var(--onyx-key-width); height: var(--onyx-key-size); border-radius: var(--onyx-key-border-radius); } }/*#region breakpoints*/ /*#endregion breakpoints*/ /** * Applies CSS only if the screen width satisfies the given onyx breakpoint. * @param {string} $min-max - Whether the breakpoint should be considered as min or max width. * @param {string} $name - name of the onyx breakpoint. One of: 2xs, xs, sm, md, lg or xl * * @example screen(min, sm) * @example screen(max, sm) */ /** * Applies CSS only if the container width satisfies the given onyx breakpoint. * @param {string} $min-max - Whether the breakpoint should be considered as min or max width. * @param {string} $name - name of the onyx breakpoint. One of: 2xs, xs, sm, md, lg or xl * @param {number} $offset - optional offset to add to the min/max width. Useful if both min and max are used for the same breakpoint * * @example container(min, sm) * @example container(max, sm) */ @layer onyx.component { .onyx-global-search { --onyx-global-search-padding: var(--onyx-density-md); --onyx-basic-dialog-padding: 0; display: flex; width: 48rem; container-type: inline-size; } .onyx-global-search__body { overflow: auto; flex-grow: 1; background-color: var(--onyx-color-base-background-blank); border-radius: var(--onyx-basic-dialog-border-radius) var(--onyx-basic-dialog-border-radius) 0 0; margin-top: var(--onyx-density-xs); border: var(--onyx-1px-in-rem) solid var(--onyx-color-component-border-neutral); } .onyx-global-search__end-of-list { padding: 0 var(--onyx-density-md) var(--onyx-density-xs) var(--onyx-density-md); display: flex; gap: var(--onyx-density-md); flex-wrap: wrap; } .onyx-global-search__end-of-list > .onyx-button { flex-grow: 1; } .onyx-global-search__end-of-list > .onyx-button[aria-selected=true] { outline: var(--onyx-outline-width) solid var(--onyx-button-outline-color); } .onyx-global-search__footer { padding: var(--onyx-density-xs) var(--onyx-global-search-padding); background-color: var(--onyx-color-base-background-tinted); color: var(--onyx-color-text-icons-neutral-soft); border: var(--onyx-1px-in-rem) solid var(--onyx-color-component-border-neutral); border-top: none; border-radius: 0 0 var(--onyx-basic-dialog-border-radius) var(--onyx-basic-dialog-border-radius); display: flex; align-items: center; justify-content: flex-end; gap: var(--onyx-density-sm) var(--onyx-density-xl); } .onyx-global-search__shortcut { display: flex; align-items: center; gap: var(--onyx-density-xs); } @container (max-width: 577px) { .onyx-global-search__shortcut-label { display: none; } } } @layer onyx.override { .onyx-global-search { --onyx-global-search-top: calc( var(--onyx-nav-bar-height) + var(--onyx-grid-margin-vertical) + var(--onyx-density-md) ); background-color: transparent; outline: none; overflow: visible; margin-top: var(--onyx-global-search-top); max-height: calc(100% - var(--onyx-global-search-top) - var(--onyx-basic-dialog-screen-gap)); } .onyx-global-search .onyx-basic-dialog__content { display: flex; flex-direction: column; max-width: 100%; } .onyx-global-search__input { --onyx-form-element-v2-padding-block: var(--onyx-global-search-padding); --onyx-form-element-v2-border-radius: var(--onyx-basic-dialog-border-radius); } }@layer onyx.component { .onyx-global-search-option, .onyx-global-search-option-skeleton { --onyx-global-search-option-padding: var(--onyx-density-2xs); } } @layer onyx.component { .onyx-global-search-option-skeleton { padding: var(--onyx-global-search-option-padding); list-style: none; } .onyx-global-search-option-skeleton__icon { width: 1lh; height: 1lh; flex-shrink: 0; border-radius: var(--onyx-radius-full); } .onyx-global-search-option-skeleton__label { height: 1lh; flex-grow: 1; } } @layer onyx.component { .onyx-global-search-option { list-style: none; font-family: var(--onyx-font-family-paragraph); color: var(--onyx-color-text-icons-neutral-intense); border-radius: var(--onyx-radius-sm); padding: var(--onyx-global-search-option-padding); cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--onyx-density-sm); } .onyx-global-search-option:hover, .onyx-global-search-option:has(.onyx-global-search-option__content[aria-selected=true]) { background-color: var(--onyx-color-base-neutral-200); } .onyx-global-search-option__content { display: flex; align-items: center; gap: var(--onyx-density-xs); background-color: transparent; border: none; border-radius: inherit; font: inherit; color: inherit; flex-grow: 1; cursor: inherit; outline: none; padding: 0; } .onyx-global-search-option__icon { color: var(--onyx-color-text-icons-neutral-medium); } .onyx-global-search-option__trailing { display: flex; align-items: center; gap: var(--onyx-density-2xs); } }@layer onyx.component { .onyx-global-search-group { padding: var(--onyx-density-md); display: flex; flex-direction: column; gap: var(--onyx-density-3xs); list-style: none; } .onyx-global-search-group:not(:first-of-type) { border-top: var(--onyx-1px-in-rem) solid var(--onyx-color-component-border-neutral); } .onyx-global-search-group__headline { color: var(--onyx-color-text-icons-neutral-soft); } }@layer onyx.component { .onyx-image { --onyx-image-clip-size: var(--onyx-spacing-2xl); display: contents; background-color: var(--onyx-color-base-neutral-200); } .onyx-image--rounded { border-radius: var(--onyx-radius-md); } .onyx-image--circle { border-radius: var(--onyx-radius-full); aspect-ratio: 1; } .onyx-image--clip { clip-path: polygon(var(--onyx-image-clip-size) 0, 100% 0, 100% calc(100% - var(--onyx-image-clip-size)), calc(100% - var(--onyx-image-clip-size)) 100%, 0 100%, 0 var(--onyx-image-clip-size)); } .onyx-image--clip-inverted { clip-path: polygon(0 0, calc(100% - var(--onyx-image-clip-size)) 0, 100% var(--onyx-image-clip-size), 100% 100%, var(--onyx-image-clip-size) 100%, 0 calc(100% - var(--onyx-image-clip-size))); } .onyx-image--error .onyx-image__source { display: none; } .onyx-image__source { display: inline-block; object-fit: cover; border-radius: inherit; background-color: inherit; clip-path: inherit; max-width: 100%; max-height: 100%; width: inherit; aspect-ratio: inherit; } .onyx-image__source--dark { display: none; } .dark .onyx-image__source--dark { display: inline-block; } .dark .onyx-image__source--light { display: none; } .onyx-image__error { color: var(--onyx-color-text-icons-neutral-intense); padding: var(--onyx-density-xs); font-family: var(--onyx-font-family-paragraph); background-color: inherit; border-radius: inherit; clip-path: inherit; display: inline-flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: var(--onyx-density-2xs); width: max-content; aspect-ratio: inherit; } .onyx-image__alt { overflow: auto; color: var(--onyx-color-text-icons-neutral-soft); } }@layer onyx.component { .onyx-mobile-nav-button { --top-position: 3.5rem; } .onyx-mobile-nav-button__trigger { display: flex; background-color: var(--onyx-color-base-background-blank); color: var(--onyx-color-text-icons-neutral-medium); padding: var(--onyx-spacing-md); cursor: pointer; } :where(.onyx-mobile-nav-button__trigger) { border: none; } .onyx-mobile-nav-button__trigger:hover:not(.onyx-mobile-nav-button__trigger--active):not(.onyx-mobile-nav-button__trigger:disabled) { background-color: var(--onyx-color-base-background-tinted); } .onyx-mobile-nav-button__trigger:focus-visible { background-color: var(--onyx-color-base-primary-100); outline: none; } .onyx-mobile-nav-button__trigger:active, .onyx-mobile-nav-button__trigger--active { background-color: var(--onyx-color-base-primary-100); color: var(--onyx-color-text-icons-primary-intense); } .onyx-mobile-nav-button__trigger:disabled { cursor: default; background-color: var(--onyx-color-base-background-blank); color: var(--onyx-color-text-icons-neutral-soft); } .onyx-mobile-nav-button__headline { position: sticky; top: 0; z-index: 1; background-color: var(--onyx-color-base-background-tinted); padding: var(--onyx-spacing-xl) 0 var(--onyx-spacing-2xs); margin-inline: auto; } .onyx-mobile-nav-button__flyout { max-height: calc(100vh - var(--top-position) - var(--onyx-spacing-3xl)); width: 100%; background-color: var(--onyx-color-base-background-tinted); box-shadow: var(--onyx-shadow-medium-bottom); position: relative; font-family: var(--onyx-font-family-paragraph); color: var(--onyx-color-text-icons-neutral-intense); overflow-y: auto; position: absolute; top: var(--top-position); left: 0; z-index: var(--onyx-z-index-navigation); } .onyx-mobile-nav-button__backdrop { content: ""; background-color: var(--onyx-color-component-opacity-backdrop); width: 100%; height: 100vh; display: block; cursor: pointer; position: fixed; top: var(--top-position); left: 0; z-index: var(--onyx-z-index-page-overlay); } .onyx-mobile-nav-button__menu { max-width: 36rem; padding: 0 var(--onyx-spacing-md) var(--onyx-spacing-xl); margin-inline: auto; } .onyx-mobile-nav-button__menu:has(.onyx-nav-bar__mobile-context-content) { padding-top: var(--onyx-spacing-xl); } .onyx-mobile-nav-button:has(.onyx-nav-item-wrapper.onyx-nav-item-wrapper--open) .onyx-mobile-nav-button__headline { display: none; } .onyx-mobile-nav-button:has(.onyx-nav-item-wrapper.onyx-nav-item-wrapper--open) .onyx-mobile-nav-button__menu, .onyx-mobile-nav-button__menu:not(:has(.onyx-mobile-nav-button__headline)) { padding-top: var(--onyx-spacing-xl); } }@layer onyx.component { .onyx-nav-app-area { display: flex; align-items: center; gap: var(--onyx-spacing-md); padding: var(--onyx-spacing-md); font-weight: var(--onyx-font-weight-semibold); white-space: pre-line; max-width: 100%; max-height: 100cqh; cursor: pointer; text-align: left; font-family: var(--onyx-font-family-paragraph); color: var(--onyx-color-text-icons-neutral-intense); background-color: var(--onyx-color-base-background-blank); overflow-x: hidden; } .onyx-nav-app-area:hover { background-color: var(--onyx-color-base-background-tinted); } .onyx-nav-app-area:focus-visible { background-color: var(--onyx-color-base-primary-100); outline: none; } .onyx-nav-app-area:active { background-color: var(--onyx-color-base-primary-200); } .onyx-nav-app-area__logo { width: auto; height: 1.5rem; } }@layer onyx.component { .onyx-nav-button { --onyx-nav-button-background: transparent; --onyx-nav-button-background-hover: var(--onyx-color-base-neutral-200); --onyx-nav-button-color: var(--onyx-color-text-icons-neutral-intense); --onyx-nav-button-outline-color: var(--onyx-color-component-focus-primary); --onyx-nav-button-padding-block: var(--onyx-spacing-2xs); --onyx-nav-button-padding-inline: var(--onyx-spacing-md); border-radius: var(--onyx-radius-sm); background-color: var(--onyx-nav-button-background); color: var(--onyx-nav-button-color); display: inline-flex; align-items: center; padding: var(--onyx-nav-button-padding-block) var(--onyx-nav-button-padding-inline); gap: var(--onyx-spacing-2xs); border: none; font-family: var(--onyx-font-family-h3); font-size: var(--onyx-font-size-md); font-weight: var(--onyx-font-weight-semibold); line-height: var(--onyx-font-line-height-md); } .onyx-nav-button--primary { --onyx-nav-button-background: var(--onyx-color-base-primary-100); --onyx-nav-button-background-hover: var(--onyx-color-base-primary-200); --onyx-nav-button-color: var(--onyx-color-text-icons-primary-bold); --onyx-nav-button-outline-color: var(--onyx-color-base-primary-300); } .onyx-nav-button:not(:has(.onyx-nav-button__label)) { padding: var(--onyx-nav-button-padding-block); } .onyx-nav-button:enabled, .onyx-nav-button:is(a) { cursor: pointer; } .onyx-nav-button:enabled:hover, .onyx-nav-button:enabled:focus-visible, .onyx-nav-button:is(a):hover, .onyx-nav-button:is(a):focus-visible { background-color: var(--onyx-nav-button-background-hover); } .onyx-nav-button:enabled:focus-visible, .onyx-nav-button:is(a):focus-visible { outline: var(--onyx-outline-width) solid var(--onyx-nav-button-outline-color); } .onyx-nav-button:disabled { color: var(--onyx-color-text-icons-neutral-soft); } }@layer onyx.component { .onyx-nav-bar .onyx-flyout-menu { --onyx-flyout-menu-gap: var(--onyx-spacing-md); } .onyx-nav-bar { background-color: var(--onyx-color-base-background-blank); font-family: var(--onyx-font-family); color: var(--onyx-color-text-icons-neutral-intense); height: var(--onyx-nav-bar-height); z-index: var(--onyx-z-index-navigation); position: relative; container-type: inline-size; } .onyx-nav-bar::after { content: " "; background-color: var(--onyx-color-component-border-neutral); height: var(--onyx-1px-in-rem); width: 100%; position: absolute; bottom: 0; } .onyx-nav-bar__content { display: grid; grid-template-columns: max-content 1fr auto; grid-template-areas: "app nav context"; align-items: center; gap: var(--onyx-spacing-md); height: 100%; padding-inline: var(--onyx-grid-margin); } .onyx-nav-bar__content:has(.onyx-nav-bar__back) { grid-template-columns: max-content max-content 1fr auto; grid-template-areas: "app back nav context"; } .onyx-nav-bar__back { grid-area: back; } .onyx-nav-bar__nav { grid-area: nav; } .onyx-nav-bar__nav > ul { display: flex; align-items: center; gap: var(--onyx-spacing-4xs); padding: 0; } .onyx-nav-bar__nav--mobile { display: flex; flex-direction: column; gap: var(--onyx-spacing-2xs); } .onyx-nav-bar__nav--mobile > ul { display: contents; } .onyx-nav-bar .onyx-more-list__elements { padding-inline: 0.25rem; } .onyx-nav-bar__context { display: flex; align-items: center; justify-content: flex-end; gap: var(--onyx-spacing-4xs); grid-area: context; } .onyx-nav-bar__app { border-right: var(--onyx-1px-in-rem) solid var(--onyx-color-component-border-neutral); grid-area: app; } .onyx-nav-bar--mobile .onyx-nav-bar__content { grid-template-columns: max-content max-content auto auto; grid-template-areas: "burger back nav mobile-context"; gap: 0; padding-inline: 0; } .onyx-nav-bar--mobile .onyx-nav-bar__content .onyx-nav-bar__back { margin-left: var(--onyx-spacing-md); } .onyx-nav-bar--mobile .onyx-nav-bar__app { border-right: none; grid-area: nav; } .onyx-nav-bar__burger { border-right: var(--onyx-1px-in-rem) solid var(--onyx-color-component-border-neutral); grid-area: burger; } .onyx-nav-bar__mobile-context { grid-area: mobile-context; display: flex; align-items: center; margin-left: auto; gap: var(--onyx-spacing-4xs); } .onyx-nav-bar__mobile-global-context { display: flex; flex-direction: row-reverse; gap: inherit; } .onyx-nav-bar__mobile-context-content { display: flex; flex-direction: row-reverse; flex-wrap: wrap-reverse; align-items: center; justify-content: flex-end; gap: var(--onyx-spacing-2xs); } .onyx-nav-bar__mobile-context-content:not(:has(.onyx-separator + .onyx-user-menu)) .onyx-user-menu { margin-bottom: var(--onyx-spacing-md); } .onyx-nav-bar__mobile-page { grid-area: nav; color: var(--onyx-color-text-icons-primary-intense); padding-inline: var(--onyx-spacing-md); font-weight: var(--onyx-font-weight-semibold); } .onyx-nav-bar .onyx-mobile-nav-button { --top-position: var(--onyx-nav-bar-height); } .onyx-nav-bar .onyx-separator { margin: var(--onyx-spacing-2xs) 0; width: 100%; } .onyx-nav-bar .onyx-separator--vertical { margin: 0 var(--onyx-spacing-2xs); width: var(--onyx-separator-size); } }.onyx-nav-bar--vertical .onyx-tooltip { --offset: var(--onyx-spacing-2xs); } .onyx-nav-bar--vertical .onyx-basic-popover { --onyx-basic-popover-gap: calc(2 * var(--onyx-spacing-2xs)); } .onyx-nav-bar--vertical .onyx-basic-popover__dialog { max-height: fit-content; } .onyx-nav-bar--vertical { width: calc(4 * var(--onyx-spacing-2xs) + 24px); min-width: 0; } .onyx-nav-bar--vertical:not(.onyx-nav-bar--vertical.onyx-nav-bar--expanded) .onyx-user-menu .onyx-user-menu__trigger .onyx-truncation-ellipsis { display: none; } .onyx-nav-bar--vertical:not(.onyx-nav-bar--vertical.onyx-nav-bar--expanded) .onyx-nav-bar__separator { min-width: 0; width: 0; } .onyx-nav-bar--vertical .onyx-menu-item__trigger { padding: var(--onyx-spacing-2xs); } .onyx-nav-bar--vertical.onyx-nav-bar--expanded { width: var(--onyx-sidebar-width); } .onyx-nav-bar--vertical.onyx-nav-bar--alignment-center .onyx-nav-bar__nav > ul { justify-content: center; } .onyx-nav-bar--vertical .onyx-nav-bar__app { border-bottom: var(--onyx-1px-in-rem) solid var(--onyx-color-component-border-neutral); border-right: none; width: 100%; overflow: hidden; } .onyx-nav-bar--vertical .onyx-nav-bar__content { display: flex; flex-direction: column; padding-inline: initial; gap: initial; } .onyx-nav-bar--vertical .onyx-nav-bar__nav { display: flex; flex-direction: column; flex-grow: 1; flex-basis: 0; overflow: hidden; width: 100%; } .onyx-nav-bar--vertical .onyx-nav-bar__nav > ul { flex-direction: column; align-items: start; } .onyx-nav-bar--vertical .onyx-nav-bar__global-context { width: 100%; padding: var(--onyx-spacing-md) var(--onyx-spacing-2xs); } .onyx-nav-bar--vertical .onyx-nav-bar__context, .onyx-nav-bar--vertical .onyx-nav-bar__footer { flex-direction: column; width: 100%; padding: var(--onyx-spacing-2xs); align-items: start; } .onyx-nav-bar--vertical .onyx-nav-bar__footer { border-top: var(--onyx-1px-in-rem) solid var(--onyx-color-component-border-neutral); } .onyx-nav-bar--vertical .onyx-nav-bar__collapse-button { color: var(--onyx-color-text-icons-neutral-medium); } .onyx-nav-bar--vertical .onyx-nav-bar__separator { width: calc(100% - 2 * var(--onyx-density-md)); } .onyx-nav-bar--vertical .onyx-more-list { padding: var(--onyx-spacing-md) var(--onyx-spacing-2xs); width: 100%; } .onyx-nav-bar--vertical .onyx-more-list__elements, .onyx-nav-bar--vertical .onyx-more-list .onyx-flyout-menu, .onyx-nav-bar--vertical .onyx-more-list .onyx-menu-item { width: 100%; } .onyx-nav-bar--vertical .onyx-user-menu { width: 100%; } .onyx-nav-bar--vertical .onyx-user-menu .onyx-user-menu__trigger { padding: var(--onyx-spacing-2xs); } .onyx-nav-bar--vertical .onyx-user-menu .onyx-user-menu__trigger, .onyx-nav-bar--vertical .onyx-user-menu .onyx-flyout-menu { width: 100%; }@layer onyx.component { .onyx-notification-card { --onyx-notification-card-padding: var(--onyx-density-md); font-family: var(--onyx-font-family-paragraph); padding: var(--onyx-notification-card-padding); background-color: var(--onyx-color-base-background-blank); max-width: 100%; } .onyx-notification-card:hover, .onyx-notification-card:focus-within { background-color: var(--onyx-color-base-background-tinted); } .onyx-notification-card__content { display: flex; flex-direction: column; gap: var(--onyx-density-md); } .onyx-notification-card:not(:first-of-type):not(:has(.onyx-notification-card-skeleton)) { padding-top: 0; } .onyx-notification-card:not(:first-of-type):not(:has(.onyx-notification-card-skeleton)) .onyx-notification-card__content { border-top: var(--onyx-1px-in-rem) solid var(--onyx-color-component-border-neutral); padding-top: var(--onyx-notification-card-padding); } .onyx-notification-card__header { display: flex; align-items: center; justify-content: space-between; gap: var(--onyx-density-md); margin-bottom: var(--onyx-density-2xs); } .onyx-notification-card__header-container { display: flex; gap: var(--onyx-density-xs); align-items: center; flex-wrap: wrap; } .onyx-notification-card__icon { color: var(--onyx-color-text-icons-neutral-medium); } .onyx-notification-card__more-actions .onyx-flyout-menu__list { right: 0; } @media (hover: hover) { .onyx-notification-card:not(.onyx-notification-card:hover, .onyx-notification-card:focus-within) .onyx-notification-card__more-actions { border: 0; clip: rect(0, 0, 0, 0); height: 0; margin: 0; overflow: hidden; padding: 0; position: absolute; width: 1px; white-space: nowrap; } } .onyx-notification-card__description { color: var(--onyx-color-text-icons-neutral-medium); white-space: pre-line; } .onyx-notification-card__actions { display: flex; align-items: center; gap: var(--onyx-density-xs); flex-wrap: wrap; } .onyx-notification-card__created-at { display: flex; align-items: center; justify-content: space-between; gap: var(--onyx-density-md); flex-wrap: wrap; color: var(--onyx-color-text-icons-neutral-soft); } .onyx-notification-card:has(.onyx-notification-card-skeleton) { border: var(--onyx-1px-in-rem) solid var(--onyx-color-component-border-neutral); border-radius: var(--onyx-radius-md); } .onyx-notification-card:has(.onyx-notification-card-skeleton):hover, .onyx-notification-card:has(.onyx-notification-card-skeleton):focus-within { background-color: var(--onyx-color-base-background-blank); } .onyx-notification-card-skeleton { display: flex; flex-direction: column; gap: var(--onyx-density-2xs); } .onyx-notification-card-skeleton__header { height: 1.5rem; width: 33%; } .onyx-notification-card-skeleton__content { height: 1rem; } }@layer onyx.component { .onyx-notification-dot { --onyx-notification-dot-position: calc( var(--onyx-notification-dot-offset, 0rem) - var(--onyx-density-3xs) ); position: relative; width: max-content; max-width: 100%; } .onyx-notification-dot__badge { position: absolute; top: var(--onyx-notification-dot-position); right: var(--onyx-notification-dot-position); pointer-events: none; } .onyx-notification-dot:has(> .onyx-icon-button, > .onyx-nav-button) { --onyx-notification-dot-offset: var(--onyx-density-xs); } }@layer onyx.component { .onyx-page { height: 100%; width: 100%; display: grid; grid-template-rows: 1fr max-content; grid-template-columns: max-content 1fr max-content; grid-template-areas: "side main side-right" "footer footer footer"; container-type: inline-size; } .onyx-page--footer-page { grid-template-areas: "side main side-right" "side footer side-right"; } .onyx-page__sidebar { grid-area: side; overflow: hidden auto; } .onyx-page__sidebar--right { grid-area: side-right; } .onyx-page__main { container-type: inline-size; grid-area: main; overflow: hidden auto; position: relative; scroll-behavior: smooth; } .onyx-page__footer { grid-area: footer; } .onyx-page:has(.onyx-page__sidebar > .onyx-sidebar:not(.onyx-sidebar--temporary)) .onyx-page__main .onyx-grid-layout, .onyx-page:has(.onyx-page__sidebar > .onyx-sidebar:not(.onyx-sidebar--temporary)).onyx-page--footer-page { --onyx-grid-margin-inline: 0; } }@layer onyx.component { .onyx-progress-item, .onyx-progress-item-skeleton { --onyx-progress-item-padding: var(--onyx-density-2xs); --onyx-progress-item-gap: var(--onyx-density-sm); } } @layer onyx.component { .onyx-progress-item-skeleton { height: calc(1lh + 2 * var(--onyx-progress-item-padding)); width: calc(2lh + 2 * var(--onyx-progress-item-padding) + var(--onyx-progress-item-gap)); } } @layer onyx.component { .onyx-progress-item { --onyx-progress-outline-color: var(--onyx-color-component-focus-neutral); font-family: var(--onyx-font-family-paragraph); color: var(--onyx-color-text-icons-neutral-intense); display: inline-flex; text-align: left; align-items: center; gap: var(--onyx-progress-item-gap); font-weight: var(--onyx-font-weight-semibold); line-height: var(--onyx-font-line-height-md); border: none; background: none; padding: 0; min-width: max-content; max-width: 100%; } .onyx-progress-item:enabled { cursor: pointer; } .onyx-progress-item__indicator { display: flex; justify-content: center; align-items: center; padding: var(--onyx-progress-item-padding); border-radius: var(--onyx-radius-full); border: 0.125rem solid var(--onyx-progress-item-border-color); background-color: var(--onyx-progress-item-background-color); color: var(--onyx-progress-item-color); min-width: 1.5rem; box-sizing: content-box; } .onyx-progress-item__label { white-space: pre-line; } .onyx-progress-item:focus-visible { outline: none; } .onyx-progress-item:focus-visible .onyx-progress-item__indicator { outline: var(--onyx-outline-width) solid var(--onyx-progress-outline-color); } .onyx-progress-item--default, .onyx-progress-item--visited { --onyx-progress-item-background-color: transparent; --onyx-progress-item-border-color: var(--onyx-color-component-border-neutral); --onyx-progress-item-color: var(--onyx-color-text-icons-neutral-intense); } .onyx-progress-item--default:enabled:hover, .onyx-progress-item--visited:enabled:hover { --onyx-progress-item-background-color: var(--onyx-color-base-neutral-200); --onyx-progress-item-border-color: var(--onyx-color-component-border-neutral-hover); } .onyx-progress-item--default:enabled:focus-visible, .onyx-progress-item--visited:enabled:focus-visible { --onyx-progress-item-background-color: transparent; --onyx-progress-item-border-color: var(--onyx-color-component-border-neutral-hover); } .onyx-progress-item--active { --onyx-progress-item-background-color: var(--onyx-color-base-neutral-800); --onyx-progress-item-border-color: var(--onyx-progress-item-background-color); --onyx-progress-item-color: var(--onyx-color-text-icons-neutral-inverted); } .onyx-progress-item--active:enabled:hover { --onyx-progress-item-background-color: var(--onyx-color-base-neutral-600); } .onyx-progress-item--active:enabled:focus-visible { --onyx-progress-item-background-color: var(--onyx-color-base-neutral-800); } .onyx-progress-item--completed { --onyx-progress-item-background-color: var(--onyx-color-base-primary-600); --onyx-progress-item-border-color: var(--onyx-progress-item-background-color); --onyx-progress-item-color: var(--onyx-color-text-icons-neutral-inverted); --onyx-progress-outline-color: var(--onyx-color-component-focus-primary); } .onyx-progress-item--completed:enabled:hover { --onyx-progress-item-background-color: var(--onyx-color-base-primary-800); } .onyx-progress-item--completed:enabled:focus-visible { --onyx-progress-item-background-color: var(--onyx-color-base-primary-300); } .onyx-progress-item--invalid { --onyx-progress-item-background-color: var(--onyx-color-base-danger-200); --onyx-progress-item-border-color: var(--onyx-progress-item-background-color); --onyx-progress-item-color: var(--onyx-color-text-icons-danger-intense); --onyx-progress-outline-color: var(--onyx-color-component-focus-danger); } .onyx-progress-item--invalid:enabled:hover { --onyx-progress-item-background-color: var(--onyx-color-base-danger-100); } .onyx-progress-item--invalid:enabled:focus-visible { --onyx-progress-item-background-color: var(--onyx-color-base-danger-200); --onyx-progress-item-color: var(--onyx-color-text-icons-danger-bold); } }@layer onyx.component { .onyx-progress-steps { display: inline-flex; align-items: center; gap: var(--onyx-density-sm); max-width: 100%; max-height: 100%; overflow: auto; padding: var(--onyx-outline-width); margin: calc(-1 * var(--onyx-outline-width)); } .onyx-progress-steps--vertical { flex-direction: column; align-items: flex-start; gap: var(--onyx-density-2xs); } .onyx-progress-steps--vertical .onyx-progress-steps__separator { --onyx-separator-min-size: 0.5rem; margin-left: calc(var(--onyx-separator-size) + var(--onyx-density-2xs) + 0.75rem); } }@layer onyx.component { .onyx-radio-button, .onyx-radio-button-skeleton { --onyx-radio-button-selector-size: var(--onyx-spacing-md); --onyx-radio-button-dot-size: var(--onyx-spacing-3xs); --onyx-radio-button-selector-margin: var(--onyx-density-sm); } } @layer onyx.component { .onyx-radio-button { --onyx-radio-button-cursor: pointer; --onyx-radio-button-selector-border-color: var(--onyx-color-component-border-neutral); --onyx-radio-button-selector-background-color: var(--onyx-color-base-background-blank); --onyx-radio-button-selector-outline-color: var(--onyx-color-base-primary-200); --onyx-radio-button-selector-outline-width: 0; --onyx-radio-button-label-color: var(--onyx-color-text-icons-neutral-intense); display: inline-flex; align-items: flex-start; max-width: 100%; cursor: var(--onyx-radio-button-cursor); } .onyx-tooltip-wrapper:has(.onyx-radio-button) { max-width: 100%; } .onyx-radio-button:has(.onyx-radio-button__selector:hover) { --onyx-radio-button-selector-border-color: var(--onyx-color-component-border-primary-hover); } .onyx-radio-button:has(.onyx-radio-button__selector:checked) { --onyx-radio-button-selector-background-color: var(--onyx-color-component-cta-default); --onyx-radio-button-selector-border-color: var(--onyx-radio-button-selector-background-color); } .onyx-radio-button:has(.onyx-radio-button__selector:checked:hover) { --onyx-radio-button-selector-background-color: var(--onyx-color-component-cta-default-hover); --onyx-radio-button-selector-border-color: var(--onyx-radio-button-selector-background-color); } .onyx-radio-button:has(.onyx-radio-button__selector:focus-visible) { --onyx-radio-button-selector-border-color: var(--onyx-color-component-border-primary); --onyx-radio-button-selector-outline-width: var(--onyx-radio-button-selector-margin); } .onyx-radio-button:has(.onyx-radio-button__selector:invalid) { --onyx-radio-button-selector-border-color: var(--onyx-color-component-border-danger); --onyx-radio-button-selector-outline-color: var(--onyx-color-base-danger-200); } .onyx-radio-button:has(.onyx-radio-button__selector:invalid:checked) { --onyx-radio-button-selector-background-color: var(--onyx-color-component-cta-danger); } .onyx-radio-button:has(.onyx-radio-button__selector:invalid:checked:hover) { --onyx-radio-button-selector-background-color: var(--onyx-color-component-cta-danger-hover); --onyx-radio-button-selector-border-color: var(--onyx-radio-button-selector-background-color); } .onyx-radio-button:has(.onyx-radio-button__selector:invalid:focus-visible) { --onyx-radio-button-selector-border-color: var(--onyx-color-component-border-danger); } .onyx-radio-button:has(.onyx-radio-button__selector:disabled) { --onyx-radio-button-selector-outline-width: 0; --onyx-radio-button-selector-border-color: var(--onyx-color-component-border-disabled); --onyx-radio-button-label-color: var(--onyx-color-text-icons-neutral-soft); --onyx-radio-button-cursor: default; } .onyx-radio-button:has(.onyx-radio-button__loading) { --onyx-radio-button-cursor: default; } .onyx-radio-button:has(.onyx-radio-button__selector:disabled:checked) { --onyx-radio-button-selector-background-color: var(--onyx-color-base-neutral-300); --onyx-radio-button-selector-border-color: var(--onyx-color-base-neutral-300); } .onyx-radio-button__label { font-family: var(--onyx-font-family-paragraph); color: var(--onyx-radio-button-label-color); line-height: var(--onyx-spacing-lg); padding: var(--onyx-density-xs); padding-left: 0; } .onyx-radio-button__selector { appearance: none; margin: var(--onyx-radio-button-selector-margin); cursor: inherit; transition: outline var(--onyx-duration-sm); border: var(--onyx-1px-in-rem) solid var(--onyx-radio-button-selector-border-color); border-radius: var(--onyx-radius-full); background-color: var(--onyx-radio-button-selector-background-color); outline: var(--onyx-radio-button-selector-outline-width) solid var(--onyx-radio-button-selector-outline-color); outline-offset: 0; display: inline-grid; place-items: center; width: var(--onyx-radio-button-selector-size); min-width: var(--onyx-radio-button-selector-size); max-width: var(--onyx-radio-button-selector-size); aspect-ratio: 1; } .onyx-radio-button__selector::before { content: " "; height: var(--onyx-radio-button-dot-size); width: var(--onyx-radio-button-dot-size); background-color: var(--onyx-color-base-background-blank); border-radius: var(--onyx-radius-full); } .onyx-radio-button__loading { color: var(--onyx-color-text-icons-primary-intense); --indicator-size: var(--onyx-radio-button-selector-size); margin: var(--onyx-radio-button-selector-margin); } } @layer onyx.component { .onyx-radio-button-skeleton { padding: var(--onyx-radio-button-selector-margin); display: inline-flex; align-items: center; gap: var(--onyx-radio-button-selector-margin); } .onyx-radio-button-skeleton__input { height: var(--onyx-radio-button-selector-size); width: var(--onyx-radio-button-selector-size); border-radius: var(--onyx-radius-full); } .onyx-radio-button-skeleton__label { height: var(--onyx-spacing-md); width: var(--onyx-spacing-3xl); } }@layer onyx.component { .onyx-radio-group { padding: 0; border: none; width: max-content; max-width: 100%; min-width: unset; } .onyx-radio-group__label { display: flex; gap: var(--onyx-spacing-2xs); align-items: center; margin-bottom: var(--onyx-density-xs); } .onyx-radio-group__content { display: flex; flex-direction: column; } .onyx-radio-group__content--horizontal { flex-direction: row; flex-wrap: wrap; column-gap: var(--onyx-density-xl); } }@layer onyx.component { .onyx-segmented-control-element { box-sizing: border-box; background-color: var(--onyx-color-base-neutral-200); border-radius: var(--onyx-radius-component-segmented-control-inside); color: var(--onyx-color-text-icons-neutral-intense); font-weight: var(--onyx-font-weight-regular); font-family: var(--onyx-font-family-paragraph); line-height: var(--onyx-font-line-height-md); width: 100%; } .onyx-segmented-control-element__label { padding: var(--onyx-density-2xs); cursor: pointer; height: 100%; width: 100%; min-width: max-content; display: flex; justify-content: center; gap: var(--onyx-density-xs); } .onyx-segmented-control-element:hover { color: var(--onyx-color-text-icons-primary-bold); } .onyx-segmented-control-element:has(.onyx-segmented-control-element__input:checked) { background-color: var(--onyx-color-base-background-blank); font-weight: var(--onyx-font-weight-semibold); } .onyx-segmented-control-element:has(.onyx-segmented-control-element__input:focus-visible) { outline: var(--onyx-outline-width) solid var(--outline-color); } .onyx-segmented-control-element:has(.onyx-segmented-control-element__input:disabled) { color: var(--onyx-color-text-icons-neutral-soft); } .onyx-segmented-control-element:has(.onyx-segmented-control-element__input:disabled) .onyx-segmented-control-element__label { cursor: default; } }@layer onyx.component { .onyx-segmented-control { --outline-color: var(--onyx-color-component-focus-primary); display: flex; gap: var(--onyx-density-xs); padding: var(--onyx-density-2xs); background-color: var(--onyx-color-base-neutral-200); border-radius: var(--onyx-radius-component-segmented-control-outside); overflow: auto; max-width: 100%; border: var(--onyx-1px-in-rem) solid var(--onyx-color-base-neutral-500); } .onyx-segmented-control:has(.onyx-segmented-control-element__icon):not(:has(.onyx-segmented-control-element__text)) { width: fit-content; } .onyx-segmented-control-skeleton { height: calc(var(--onyx-font-line-height-md) + 4 * var(--onyx-density-2xs)); border-radius: var(--onyx-radius-sm); } }/** Defines styles when the form element input container is hovered */ /** Defines styles when the form element input container is focused or the popover is opened */ @layer onyx.component { .onyx-search { --onyx-search-input-width: 100%; --onyx-search-modal-width: 24rem; display: flex; flex-direction: column; gap: var(--onyx-density-sm); } .onyx-search--inline { --onyx-search-input-width: 20rem; flex-direction: row; flex-wrap: wrap; } .onyx-search__input { width: var(--onyx-search-input-width); max-width: 100%; } .onyx-search__input .onyx-form-element-v2__input-container { position: relative; } .onyx-search__input--tinted .onyx-input { --onyx-form-element-v2-background: var(--onyx-color-base-background-tinted); } .onyx-search__input--strong .onyx-input { --onyx-form-element-v2-border-radius: var(--onyx-radius-md); } .onyx-search__input .onyx-form-element-v2__input-container:focus-within .onyx-search__placeholder, .onyx-search__input .onyx-form-element-v2__popover:has(> .onyx-basic-popover__dialog:popover-open) > .onyx-form-element-v2__input-container .onyx-search__placeholder { display: none; } .onyx-search__placeholder { position: absolute; left: calc(var(--onyx-form-element-v2-padding-inline) + 1.5rem); padding: var(--onyx-form-element-v2-padding-block) var(--onyx-form-element-v2-padding-inline-icons); pointer-events: none; color: var(--onyx-color-text-icons-neutral-soft); overflow: hidden; width: calc(100% - 1.5rem - var(--onyx-form-element-v2-padding-inline)); } .onyx-search__placeholder-text { display: flex; gap: var(--onyx-spacing-2xs); } .onyx-search__placeholder .onyx-key { min-width: 1.25rem; height: 1.25rem; color: var(--onyx-color-text-icons-neutral-soft); font-size: var(--onyx-font-size-sm); } .onyx-search__filters { display: flex; gap: var(--onyx-density-sm); flex-direction: row; flex-wrap: wrap; } .onyx-search__modal { width: var(--onyx-search-modal-width); container-type: inline-size; } .onyx-search__modal .onyx-modal__body { padding: var(--onyx-modal-padding-inline); display: flex; flex-direction: column; gap: var(--onyx-density-sm); } }/** * Gets a comma separated CSS selector for the input autofill. * Includes default browser selectors as well as some specific selectors e.g. for certain password managers. */ @layer onyx.component { .onyx-select-input, .onyx-select-input-skeleton { --onyx-select-input-padding-vertical: var(--onyx-density-xs); } } @layer onyx.component { .onyx-select-input { --border-color: var(--onyx-color-component-border-neutral); --border-radius: var(--onyx-radius-component-input); --hover-border-color: var(--onyx-color-component-border-primary-hover); --selection-color: var(--onyx-color-base-primary-200); --caret-color: var(--onyx-color-component-cta-default); --background-color: var(--onyx-color-base-background-blank); --outline-color: var(--onyx-color-component-focus-primary); --outline-style: none; --button-color: var(--onyx-color-text-icons-neutral-soft); --border-style: solid; --padding-horizontal: var(--onyx-density-sm); } .onyx-select-input__wrapper { border-radius: var(--border-radius); border: var(--onyx-1px-in-rem) var(--border-style) var(--border-color); background-color: var(--background-color); color: var(--onyx-color-text-icons-neutral-medium); outline: var(--onyx-outline-width) var(--outline-style) var(--outline-color); display: flex; align-items: center; gap: var(--onyx-density-xs); font-size: var(--onyx-font-size-md); line-height: var(--onyx-font-line-height-md); padding: var(--onyx-select-input-padding-vertical) var(--padding-horizontal); height: calc(1lh + 2 * var(--onyx-select-input-padding-vertical)); } .onyx-select-input__wrapper .onyx-select-input__native { color: var(--onyx-color-text-icons-neutral-intense); } .onyx-select-input__wrapper:has(.onyx-select-input__native:read-write):hover { --border-color: var(--hover-border-color, var(--onyx-color-component-border-primary-hover)); --button-color: var(--button-hover-color, var(--onyx-color-text-icons-primary-medium)); } .onyx-select-input__wrapper:has(.onyx-select-input__native:enabled:focus, .onyx-select-input__native--show-focus) { --border-color: var(--focus-border-color, var(--onyx-color-component-border-primary-hover)); --outline-style: solid; } .onyx-select-input__wrapper:has(.onyx-select-input__native:enabled:focus, .onyx-select-input__native--show-focus):has(.onyx-select-input__native:read-write) { --button-color: var(--button-focus-color, var(--onyx-color-text-icons-primary-intense)); } .onyx-select-input__wrapper:has(.onyx-select-input__native:read-only) { --selection-color: var(--onyx-color-base-neutral-200); --caret-color: var(--onyx-color-base-neutral-700); --background-color: var(--onyx-color-base-background-tinted); } .onyx-select-input__wrapper:has(.onyx-select-input__native:enabled:read-only):hover { --border-color: var(--onyx-color-component-border-neutral-hover); } .onyx-select-input__wrapper:has(.onyx-select-input__native:enabled:read-only):has(.onyx-select-input__native:focus, .onyx-select-input__native--show-focus) { --border-color: var(--onyx-color-component-border-neutral); --outline-color: var(--onyx-color-component-focus-neutral); } .onyx-select-input__wrapper:has(.onyx-select-input__native:read-write):has(.onyx-select-input__native:autofill, .onyx-select-input__native[data-test-autofill], .onyx-select-input__native[data-com-onepassword-filled]) { background-color: var(--onyx-color-base-warning-100); } .onyx-select-input__wrapper:focus-within .onyx-select-input__check-icon, .onyx-select-input__wrapper:has(.onyx-select-input__native--show-focus) .onyx-select-input__check-icon { display: none; } .onyx-select-input__separator { --onyx-separator-min-size: calc( 1lh + 2 * var(--onyx-input-padding-vertical) - 2 * var(--onyx-1px-in-rem) ); } .onyx-select-input__separator--leading { margin-left: calc(var(--onyx-density-sm) - var(--onyx-density-xs)); } .onyx-select-input__separator--trailing { margin-right: calc(var(--onyx-density-sm) - var(--onyx-density-xs)); } .onyx-select-input__loading { color: var(--onyx-color-text-icons-primary-intense); } .onyx-select-input__button { all: initial; display: flex; color: var(--button-color); } .onyx-select-input__button:enabled { cursor: pointer; } .onyx-select-input__button:focus-visible { outline: var(--onyx-outline-width) solid var(--outline-color); border-radius: var(--onyx-radius-sm); --button-color: var(--button-focus-color, var(--onyx-color-text-icons-primary-intense)); } .onyx-select-input:has(.onyx-form-element__success-message) { --message-display: none; --border-color: var(--onyx-color-component-border-success); --outline-color: var(--onyx-color-component-focus-success); --selection-color: var(--onyx-color-base-success-200); --caret-color: var(--onyx-color-base-neutral-900); --focus-border-color: var(--onyx-color-component-border-success); --hover-border-color: var(--onyx-color-component-border-success-hover); --button-hover-color: var(--onyx-color-text-icons-success-medium); --button-focus-color: var(--onyx-color-text-icons-success-intense); } .onyx-select-input:not(.onyx-form-element-suppress-invalid).onyx-form-element--touched-invalid:has(.onyx-select-input__native:user-invalid, .onyx-select-input__native--touched:invalid), .onyx-select-input:not(.onyx-form-element-suppress-invalid).onyx-form-element--immediate-invalid:has(.onyx-select-input__native:invalid) { --error-message-display: inline-flex; --message-display: none; --success-message-display: none; --border-color: var(--onyx-color-component-border-danger); --outline-color: var(--onyx-color-component-focus-danger); --selection-color: var(--onyx-color-base-danger-200); --caret-color: var(--onyx-color-base-neutral-900); --focus-border-color: var(--onyx-color-component-border-danger); --hover-border-color: var(--onyx-color-component-border-danger-hover); --button-hover-color: var(--onyx-color-text-icons-danger-medium); --button-focus-color: var(--onyx-color-text-icons-danger-intense); } .onyx-select-input__native { border: none; border-radius: inherit; background-color: transparent; color: inherit; width: 100%; outline: none; font-family: inherit; font-size: inherit; line-height: inherit; padding: 0; height: 100%; caret-color: var(--caret-color); } .onyx-select-input__native::placeholder { color: var(--onyx-color-text-icons-neutral-soft); font-weight: var(--onyx-font-weight-regular); opacity: 1; } .onyx-select-input__native::selection { background: var(--selection-color); } .onyx-select-input__native:autofill, .onyx-select-input__native[data-test-autofill], .onyx-select-input__native[data-com-onepassword-filled] { background-color: transparent; -webkit-text-fill-color: var(--onyx-color-text-icons-neutral-intense); transition: background-color calc(infinity * 1s); } .onyx-select-input:has(.onyx-select-input__native:disabled) .onyx-form-element__label { color: var(--onyx-color-text-icons-neutral-soft); } .onyx-select-input:has(.onyx-select-input__native:disabled) .onyx-select-input__wrapper { color: var(--onyx-color-text-icons-neutral-soft); } .onyx-select-input__native { caret-color: transparent; } .onyx-select-input .onyx-select-input__wrapper:has(.onyx-select-input__native:enabled) { cursor: pointer; } .onyx-select-input .onyx-select-input__wrapper:has(.onyx-select-input__native:enabled) .onyx-select-input__native { cursor: pointer; } .onyx-select-input__badge { display: block; cursor: pointer; } .onyx-select-input-skeleton { display: flex; flex-direction: column; gap: calc(var(--onyx-density-3xs) + var(--skeleton-label-density-adjustment, 0rem)); line-height: var(--onyx-font-line-height-md); } .onyx-select-input-skeleton__label { width: var(--onyx-density-3xl); height: calc(1.25rem - var(--skeleton-label-density-adjustment, 0rem)); } .onyx-select-input-skeleton__input { width: 17rem; max-width: 100%; height: calc(1lh + 2 * var(--onyx-select-input-padding-vertical)); } @layer onyx.density { .onyx-density-compact .onyx-select-input-skeleton, :is(.onyx-select-input-skeleton).onyx-density-compact { --skeleton-label-density-adjustment: var(--onyx-spacing-5xs); } } }@layer onyx.component { .onyx-sidebar-item { font-family: var(--onyx-font-family-paragraph); color: var(--onyx-color-text-icons-neutral-intense); background-color: var(--onyx-color-base-background-blank); border-radius: var(--onyx-radius-md); padding: var(--onyx-density-xs); display: flex; align-items: center; gap: var(--onyx-density-xs); max-width: 100%; cursor: pointer; } .onyx-sidebar-item:is(button) { border: none; } .onyx-sidebar-item:hover { background-color: var(--onyx-color-base-neutral-200); } .onyx-sidebar-item:focus-visible { outline: var(--onyx-outline-width) solid var(--onyx-color-component-focus-primary); } .onyx-sidebar-item--active { color: var(--onyx-color-text-icons-primary-bold); background-color: var(--onyx-color-base-primary-100); } .onyx-sidebar-item--active:hover { background-color: var(--onyx-color-base-primary-200); } }@layer onyx.component { .onyx-sidebar { --onyx-sidebar-border: var(--onyx-1px-in-rem) solid var(--onyx-color-component-border-neutral); --onyx-sidebar-padding: var(--onyx-density-md); --onyx-sidebar-width: 20rem; --onyx-sidebar-min-width: 4rem; --onyx-sidebar-header-gap: var(--onyx-density-md); --onyx-sidebar-footer-gap: var(--onyx-density-xs); width: var(--onyx-sidebar-width); min-width: var(--onyx-sidebar-min-width); max-width: calc(100vw - var(--onyx-grid-margin)); } .onyx-sidebar:not(.onyx-sidebar--temporary) { font-family: var(--onyx-font-family-paragraph); color: var(--onyx-color-text-icons-neutral-intense); background-color: var(--onyx-color-base-background-blank); border-right: var(--onyx-sidebar-border); height: 100%; max-height: 100%; display: flex; flex-direction: column; } .onyx-sidebar:not(.onyx-sidebar--temporary).onyx-sidebar--right { border-left: var(--onyx-sidebar-border); border-right: none; } .onyx-sidebar:has(.onyx-resize-handle) { position: relative; overflow: hidden; } .onyx-sidebar--temporary { --onyx-modal-padding-inline: var(--onyx-density-md); } .onyx-sidebar--temporary:not(.onyx-sidebar--floating) { --onyx-basic-dialog-screen-gap: 0; --onyx-basic-dialog-border-radius: 0; border-top: none; border-left: none; border-bottom: none; } .onyx-sidebar__header { display: flex; flex-direction: column; gap: var(--onyx-sidebar-header-gap); padding: var(--onyx-sidebar-padding); border-bottom: var(--onyx-sidebar-border); } .onyx-sidebar__footer { display: flex; align-items: center; flex-wrap: wrap; gap: var(--onyx-sidebar-footer-gap); padding: var(--onyx-sidebar-padding); border-top: var(--onyx-sidebar-border); } .onyx-sidebar__footer > .onyx-button { flex-grow: 1; } .onyx-sidebar__body { overflow: auto; flex-grow: 1; } }/** * Gets a comma separated CSS selector for the input autofill. * Includes default browser selectors as well as some specific selectors e.g. for certain password managers. */ @layer onyx.component { .onyx-slider, .onyx-slider-skeleton { --onyx-slider-rail-background: var(--onyx-color-base-neutral-200); --onyx-slider-track-background: var(--onyx-color-base-neutral-600); --onyx-slider-thumb-background: var(--onyx-color-base-neutral-600); --onyx-slider-thumb-border-color: var(--onyx-color-base-neutral-800); --onyx-slider-mark-background: var(--onyx-color-base-neutral-400); --onyx-slider-mark-color: var(--onyx-color-text-icons-neutral-medium); --onyx-slider-padding-vertical: var(--onyx-density-xs); --onyx-slider-root-padding: var(--onyx-density-sm); --onyx-slider-mark-label-offset: var(--onyx-density-xl); --onyx-slider-thumb-size: 1.25rem; --onyx-slider-rail-background-interactive: var(--onyx-color-base-neutral-200); --onyx-slider-track-background-interactive: var(--onyx-color-base-primary-500); --onyx-slider-thumb-background-interactive: var(--onyx-color-base-primary-500); --onyx-slider-thumb-border-color-interactive: var(--onyx-color-base-primary-500); --onyx-slider-background-disabled: var(--onyx-color-base-neutral-300); --onyx-slider-mark-color-disabled: var(--onyx-color-text-icons-neutral-soft); --onyx-slider-offset: calc(0.375rem + 2 * var(--onyx-1px-in-rem)); } } @layer onyx.component { .onyx-slider { --border-color: var(--onyx-color-component-border-neutral); --border-radius: var(--onyx-radius-component-input); --hover-border-color: var(--onyx-color-component-border-primary-hover); --selection-color: var(--onyx-color-base-primary-200); --caret-color: var(--onyx-color-component-cta-default); --background-color: var(--onyx-color-base-background-blank); --outline-color: var(--onyx-color-component-focus-primary); --outline-style: none; --button-color: var(--onyx-color-text-icons-neutral-soft); --border-style: solid; --padding-horizontal: var(--onyx-density-sm); } .onyx-slider__wrapper { border-radius: var(--border-radius); border: var(--onyx-1px-in-rem) var(--border-style) var(--border-color); background-color: var(--background-color); color: var(--onyx-color-text-icons-neutral-medium); outline: var(--onyx-outline-width) var(--outline-style) var(--outline-color); display: flex; align-items: center; gap: var(--onyx-density-xs); font-size: var(--onyx-font-size-md); line-height: var(--onyx-font-line-height-md); padding: var(--onyx-slider-padding-vertical) var(--padding-horizontal); height: calc(1lh + 2 * var(--onyx-slider-padding-vertical)); } .onyx-slider__wrapper .onyx-slider__native { color: var(--onyx-color-text-icons-neutral-intense); } .onyx-slider__wrapper:has(.onyx-slider__native:read-write):hover { --border-color: var(--hover-border-color, var(--onyx-color-component-border-primary-hover)); --button-color: var(--button-hover-color, var(--onyx-color-text-icons-primary-medium)); } .onyx-slider__wrapper:has(.onyx-slider__native:enabled:focus, .onyx-slider__native--show-focus) { --border-color: var(--focus-border-color, var(--onyx-color-component-border-primary-hover)); --outline-style: solid; } .onyx-slider__wrapper:has(.onyx-slider__native:enabled:focus, .onyx-slider__native--show-focus):has(.onyx-slider__native:read-write) { --button-color: var(--button-focus-color, var(--onyx-color-text-icons-primary-intense)); } .onyx-slider__wrapper:has(.onyx-slider__native:read-only) { --selection-color: var(--onyx-color-base-neutral-200); --caret-color: var(--onyx-color-base-neutral-700); --background-color: var(--onyx-color-base-background-tinted); } .onyx-slider__wrapper:has(.onyx-slider__native:enabled:read-only):hover { --border-color: var(--onyx-color-component-border-neutral-hover); } .onyx-slider__wrapper:has(.onyx-slider__native:enabled:read-only):has(.onyx-slider__native:focus, .onyx-slider__native--show-focus) { --border-color: var(--onyx-color-component-border-neutral); --outline-color: var(--onyx-color-component-focus-neutral); } .onyx-slider__wrapper:has(.onyx-slider__native:read-write):has(.onyx-slider__native:autofill, .onyx-slider__native[data-test-autofill], .onyx-slider__native[data-com-onepassword-filled]) { background-color: var(--onyx-color-base-warning-100); } .onyx-slider__wrapper:focus-within .onyx-slider__check-icon, .onyx-slider__wrapper:has(.onyx-slider__native--show-focus) .onyx-slider__check-icon { display: none; } .onyx-slider__separator { --onyx-separator-min-size: calc( 1lh + 2 * var(--onyx-input-padding-vertical) - 2 * var(--onyx-1px-in-rem) ); } .onyx-slider__separator--leading { margin-left: calc(var(--onyx-density-sm) - var(--onyx-density-xs)); } .onyx-slider__separator--trailing { margin-right: calc(var(--onyx-density-sm) - var(--onyx-density-xs)); } .onyx-slider__loading { color: var(--onyx-color-text-icons-primary-intense); } .onyx-slider__button { all: initial; display: flex; color: var(--button-color); } .onyx-slider__button:enabled { cursor: pointer; } .onyx-slider__button:focus-visible { outline: var(--onyx-outline-width) solid var(--outline-color); border-radius: var(--onyx-radius-sm); --button-color: var(--button-focus-color, var(--onyx-color-text-icons-primary-intense)); } .onyx-slider:has(.onyx-form-element__success-message) { --message-display: none; --border-color: var(--onyx-color-component-border-success); --outline-color: var(--onyx-color-component-focus-success); --selection-color: var(--onyx-color-base-success-200); --caret-color: var(--onyx-color-base-neutral-900); --focus-border-color: var(--onyx-color-component-border-success); --hover-border-color: var(--onyx-color-component-border-success-hover); --button-hover-color: var(--onyx-color-text-icons-success-medium); --button-focus-color: var(--onyx-color-text-icons-success-intense); } .onyx-slider:not(.onyx-form-element-suppress-invalid).onyx-form-element--touched-invalid:has(.onyx-slider__native:user-invalid, .onyx-slider__native--touched:invalid), .onyx-slider:not(.onyx-form-element-suppress-invalid).onyx-form-element--immediate-invalid:has(.onyx-slider__native:invalid) { --error-message-display: inline-flex; --message-display: none; --success-message-display: none; --border-color: var(--onyx-color-component-border-danger); --outline-color: var(--onyx-color-component-focus-danger); --selection-color: var(--onyx-color-base-danger-200); --caret-color: var(--onyx-color-base-neutral-900); --focus-border-color: var(--onyx-color-component-border-danger); --hover-border-color: var(--onyx-color-component-border-danger-hover); --button-hover-color: var(--onyx-color-text-icons-danger-medium); --button-focus-color: var(--onyx-color-text-icons-danger-intense); } .onyx-slider__native { border: none; border-radius: inherit; background-color: transparent; color: inherit; width: 100%; outline: none; font-family: inherit; font-size: inherit; line-height: inherit; padding: 0; height: 100%; caret-color: var(--caret-color); } .onyx-slider__native::placeholder { color: var(--onyx-color-text-icons-neutral-soft); font-weight: var(--onyx-font-weight-regular); opacity: 1; } .onyx-slider__native::selection { background: var(--selection-color); } .onyx-slider__native:autofill, .onyx-slider__native[data-test-autofill], .onyx-slider__native[data-com-onepassword-filled] { background-color: transparent; -webkit-text-fill-color: var(--onyx-color-text-icons-neutral-intense); transition: background-color calc(infinity * 1s); } .onyx-slider:has(.onyx-slider__native:disabled) .onyx-form-element__label { color: var(--onyx-color-text-icons-neutral-soft); } .onyx-slider:has(.onyx-slider__native:disabled) .onyx-slider__wrapper { color: var(--onyx-color-text-icons-neutral-soft); } .onyx-slider__container { display: flex; align-items: center; gap: var(--onyx-density-sm); color: var(--onyx-color-text-icons-neutral-intense); } .onyx-slider__container:has(.onyx-slider__mark-label) { padding-bottom: var(--onyx-slider-mark-label-offset); } .onyx-slider__root { position: relative; display: inline-flex; align-items: center; width: 100%; height: 0.5rem; padding: var(--onyx-slider-root-padding) 0; user-select: none; margin-inline: calc(0.5 * var(--onyx-slider-offset)); border-radius: var(--onyx-radius-sm); } .onyx-slider__control { display: flex; align-items: center; justify-content: center; width: 2.5rem; min-width: 2.5rem; height: 2.5rem; font-size: var(--onyx-font-size-md); font-family: var(--onyx-font-family-paragraph); line-height: var(--onyx-font-line-height-sm); user-select: none; } .onyx-slider__rail { width: 100%; height: inherit; } .onyx-slider__rail::before, .onyx-slider__rail::after { position: absolute; display: block; height: inherit; content: ""; border-radius: var(--onyx-radius-sm); margin-left: calc(-0.5 * var(--onyx-slider-offset)); } .onyx-slider__rail::before { width: calc(100% + var(--onyx-slider-offset)); background-color: var(--onyx-slider-rail-background); } .onyx-slider__rail::after { left: var(--track-start-percentage); right: var(--track-end-percentage); background-color: var(--onyx-slider-track-background); z-index: 1; } .onyx-slider__native { width: inherit; height: inherit; border: inherit; } .onyx-slider__thumb { position: absolute; width: var(--onyx-slider-thumb-size); height: var(--onyx-slider-thumb-size); margin-left: calc(-1 * var(--onyx-slider-thumb-size) / 2); border-radius: var(--onyx-radius-full); background-color: var(--onyx-slider-thumb-background); border: 0.25rem solid var(--onyx-slider-thumb-border-color); display: grid; place-items: center; z-index: 2; } .onyx-slider__thumb .onyx-tooltip { --offset: 0.25rem; pointer-events: none; } .onyx-slider__thumb:has(.onyx-slider__native:enabled):focus-within { outline: var(--onyx-outline-width) solid var(--onyx-color-component-focus-primary); } .onyx-slider__mark { position: absolute; width: 0.375rem; height: 0.375rem; border-radius: var(--onyx-radius-full); background-color: var(--onyx-slider-mark-background); transform: translateX(-50%); } .onyx-slider__mark-label { color: var(--onyx-slider-mark-color); font-size: var(--onyx-font-size-sm); font-family: var(--onyx-font-family-paragraph); line-height: var(--onyx-font-line-height-sm); position: absolute; white-space: nowrap; top: var(--onyx-slider-mark-label-offset); display: flex; transform: translateX(-50%); } .onyx-slider:has(.onyx-slider__native:enabled) .onyx-slider__root { cursor: pointer; } .onyx-slider:has(.onyx-slider__native:enabled):has(.onyx-slider__root:hover), .onyx-slider:has(.onyx-slider__native:enabled):has(.onyx-slider__root:focus-within) { --onyx-slider-rail-background: var(--onyx-slider-rail-background-interactive); --onyx-slider-track-background: var(--onyx-slider-track-background-interactive); --onyx-slider-thumb-background: var(--onyx-slider-thumb-background-interactive); --onyx-slider-thumb-border-color: var(--onyx-slider-thumb-border-color-interactive); } .onyx-slider:has(.onyx-slider__native:disabled) { --onyx-slider-track-background: var(--onyx-slider-background-disabled); --onyx-slider-thumb-background: var(--onyx-slider-background-disabled); --onyx-slider-thumb-border-color: var(--onyx-slider-background-disabled); --onyx-slider-mark-color: var(--onyx-slider-mark-color-disabled); } } @layer onyx.component { .onyx-slider-skeleton { display: flex; flex-direction: column; gap: calc(var(--onyx-density-3xs) + var(--skeleton-label-density-adjustment, 0rem)); line-height: var(--onyx-font-line-height-md); } .onyx-slider-skeleton__label { width: var(--onyx-density-3xl); height: calc(1.25rem - var(--skeleton-label-density-adjustment, 0rem)); } .onyx-slider-skeleton__block { width: 17rem; max-width: 100%; height: calc(1lh + 2 * var(--onyx-slider-padding-vertical)); } @layer onyx.density { .onyx-density-compact .onyx-slider-skeleton, :is(.onyx-slider-skeleton).onyx-density-compact { --skeleton-label-density-adjustment: var(--onyx-spacing-5xs); } } }@layer onyx.override { .onyx-split-button__main-button { --onyx-button-border-radius: var(--onyx-radius-sm) 0 0 var(--onyx-radius-sm); } .onyx-split-button__flyout-button { --onyx-button-border-radius: 0 var(--onyx-radius-sm) var(--onyx-radius-sm) 0; --onyx-button-padding-inline: var(--onyx-density-xs); border-left: none; } .onyx-split-button__flyout-button .onyx-button__label { display: none; } .onyx-split-button--plain .onyx-split-button__main-button { --onyx-button-padding-inline: var(--onyx-density-sm) var(--onyx-density-2xs); } .onyx-split-button--plain .onyx-split-button__flyout-button { --onyx-button-padding-inline: var(--onyx-density-3xs); } .onyx-split-button--plain .onyx-split-button__flyout-button:disabled { border-left: var(--onyx-1px-in-rem) solid var(--disabled-border-color); } } @layer onyx.component { .onyx-split-button { display: flex; gap: 0rem; } .onyx-split-button--primary { gap: var(--onyx-1px-in-rem); } .onyx-split-button :focus-visible { z-index: 1; border-color: transparent; } .onyx-split-button--plain .flyout-button:enabled:hover { border-left: var(--onyx-1px-in-rem) solid var(--onyx-button-text-color); } } @layer onyx.component { .onyx-split-button-skeleton { display: flex; align-items: center; gap: var(--onyx-1px-in-rem); } .onyx-split-button-skeleton__left { width: var(--onyx-density-4xl); height: calc(1.5rem + 2 * var(--onyx-density-xs)); border-radius: var(--onyx-radius-sm) 0 0 var(--onyx-radius-sm); } .onyx-split-button-skeleton__right { width: calc(1.5rem + 2 * var(--onyx-density-xs)); height: calc(1.5rem + 2 * var(--onyx-density-xs)); border-radius: 0 var(--onyx-radius-sm) var(--onyx-radius-sm) 0; } }@layer onyx.component { .onyx-toc-item, .onyx-toc-item-skeleton { --onyx-toc-item-padding-block: var(--onyx-density-2xs); --onyx-toc-item-padding-inline: var(--onyx-density-xs); } } @layer onyx.component { .onyx-toc-item-skeleton { list-style: none; } .onyx-toc-item-skeleton__content { height: calc(1lh + 2 * var(--onyx-toc-item-padding-block)); width: 100%; } } @layer onyx.component { .onyx-toc-item { --onyx-toc-item-background-hover: var(--onyx-color-base-neutral-200); --onyx-toc-item-background-focus: transparent; --onyx-toc-item-color: var(--onyx-color-text-icons-neutral-medium); --onyx-toc-item-color-hover: var(--onyx-color-text-icons-neutral-intense); --onyx-toc-item-color-outline: var(--onyx-color-component-focus-neutral); --onyx-toc-item-indicator-color: var(--onyx-color-component-border-neutral); --onyx-toc-item-indicator-width: var(--onyx-1px-in-rem); --onyx-toc-item-indentation: var(--onyx-density-xs); list-style: none; position: relative; } .onyx-toc-item__link { display: block; padding: var(--onyx-toc-item-padding-block) var(--onyx-toc-item-padding-inline); border-radius: var(--onyx-radius-sm); font-family: var(--onyx-font-family-paragraph); color: var(--onyx-toc-item-color); } .onyx-toc-item__link:hover { background-color: var(--onyx-toc-item-background-hover); color: var(--onyx-toc-item-color-hover); } .onyx-toc-item__link:focus-visible { background-color: var(--onyx-toc-item-background-focus); color: var(--onyx-toc-item-color-hover); outline: var(--onyx-outline-width) solid var(--onyx-toc-item-color-outline); } .onyx-toc-item__link.onyx-router-link--active { --onyx-toc-item-background-hover: var(--onyx-color-base-primary-100); --onyx-toc-item-background-focus: var(--onyx-toc-item-background-hover); --onyx-toc-item-color: var(--onyx-color-text-icons-primary-intense); --onyx-toc-item-color-hover: var(--onyx-color-text-icons-primary-bold); --onyx-toc-item-color-outline: var(--onyx-color-component-focus-primary); --onyx-toc-item-indicator-color: var(--onyx-color-component-border-primary); font-family: var(--onyx-font-family-h3); font-weight: var(--onyx-font-weight-semibold); } .onyx-toc-item__children { margin-top: var(--onyx-toc-list-gap, 0rem); padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--onyx-toc-list-gap, 0rem); } .onyx-toc-item__children .onyx-toc-item__link { padding-left: calc(var(--onyx-spacing-2xs) + var(--onyx-toc-item-indentation)); } .onyx-toc-item__children .onyx-toc-item__link::before { content: ""; width: var(--onyx-toc-item-indicator-width); height: calc(100% + var(--onyx-toc-list-gap, 0rem)); background-color: var(--onyx-toc-item-indicator-color); display: block; position: absolute; left: calc(var(--onyx-toc-item-indicator-width) + var(--onyx-1px-in-rem) + var(--onyx-toc-item-indentation)); top: calc(-0.5 * var(--onyx-toc-list-gap, 0rem)); } }@layer onyx.component { .onyx-toc { --onyx-toc-list-gap: var(--onyx-density-2xs); display: flex; flex-direction: column; gap: var(--onyx-density-md); } .onyx-toc__headline { overflow: clip; } .onyx-toc__list { padding: 0; list-style: none; display: flex; flex-direction: column; flex-grow: 1; gap: var(--onyx-toc-list-gap); overflow-y: auto; } .onyx-toc__list:focus-within { padding: var(--onyx-outline-width); margin: calc(-1 * var(--onyx-outline-width)); } }@layer onyx.component { .onyx-file-card, .onyx-file-card-skeleton { --onyx-card-padding: var(--onyx-density-xs); --onyx-file-card-icon-padding: var(--onyx-density-xs); } } @layer onyx.component { .onyx-file-card-skeleton { width: 16rem; height: calc(max(1.5rem + 2 * var(--onyx-file-card-icon-padding) + 2 * var(--onyx-1px-in-rem), 2 * var(--onyx-font-line-height-sm)) + 2 * var(--onyx-card-padding) + 2 * var(--onyx-1px-in-rem)); } } @layer onyx.component { .onyx-file-card { position: relative; } .onyx-file-card__show-error { bottom: var(--onyx-file-card-icon-padding); left: 50%; pointer-events: none; position: absolute; border: 0; height: 0; width: 0; outline: none; } .onyx-file-card__content { display: flex; flex-direction: row; gap: var(--onyx-card-gap) var(--onyx-density-xl); justify-content: space-between; } .onyx-file-card__icon { display: flex; align-items: center; justify-content: center; border-radius: var(--onyx-radius-sm); border: var(--onyx-1px-in-rem) solid var(--onyx-color-component-border-neutral); background-color: var(--onyx-color-base-neutral-200); padding: var(--onyx-file-card-icon-padding); } .onyx-file-card:has(.onyx-file-card__status--danger) .onyx-file-card__icon { background-color: var(--onyx-color-base-danger-100); border-color: var(--onyx-color-base-danger-300); color: var(--onyx-color-text-icons-danger-intense); } .onyx-file-card__name { font-weight: var(--onyx-font-weight-semibold); } .onyx-file-card__name .onyx-link { display: block; } .onyx-file-card__name .onyx-link:not(:hover, :focus-visible) { text-decoration: none; color: inherit; } .onyx-file-card__wrapper { display: flex; align-items: center; gap: var(--onyx-card-gap); } .onyx-file-card:has(.onyx-file-card__name .onyx-link:focus-within) { outline: var(--onyx-outline-width) solid var(--onyx-color-component-focus-primary); } .onyx-file-card:has(.onyx-file-card__name .onyx-link:focus-within) .onyx-file-card__name .onyx-link { outline: none; } .onyx-file-card__size { color: var(--onyx-color-text-icons-neutral-medium); } .onyx-file-card__details { display: flex; align-items: center; gap: var(--onyx-density-md); } .onyx-file-card__actions { display: flex; align-items: center; gap: var(--onyx-spacing-2xs); } .onyx-file-card:hover { background-color: var(--onyx-color-base-background-tinted); } .onyx-file-card__status--primary { color: var(--onyx-color-text-icons-primary-intense); } .onyx-file-card__status--neutral { color: var(--onyx-color-text-icons-neutral-medium); } .onyx-file-card__status--danger { color: var(--onyx-color-text-icons-danger-intense); } .onyx-file-card__status--warning { color: var(--onyx-color-text-icons-warning-intense); } .onyx-file-card__status--success { color: var(--onyx-color-text-icons-success-intense); } .onyx-file-card__status--info { color: var(--onyx-color-text-icons-info-intense); } .onyx-file-card:has(.onyx-file-card__progress) { padding-bottom: var(--onyx-density-md); } .onyx-file-card__progress { height: calc(2 * var(--onyx-1px-in-rem)); width: calc(100% + 2 * var(--onyx-file-card-icon-padding)); transform: translateX(calc(-1 * var(--onyx-file-card-icon-padding))); background: var(--onyx-color-base-neutral-200); } .onyx-file-card__progress-bar { height: 100%; transition: width 0.1s ease; } .onyx-file-card__progress-bar--primary { background-color: var(--onyx-color-text-icons-primary-intense); } .onyx-file-card__progress-bar--neutral { background-color: var(--onyx-color-base-neutral-400); } .onyx-file-card__progress-bar--danger { background-color: var(--onyx-color-text-icons-danger-intense); } .onyx-file-card__progress-bar--warning { background-color: var(--onyx-color-text-icons-warning-intense); } .onyx-file-card__progress-bar--success { background-color: var(--onyx-color-text-icons-success-intense); } .onyx-file-card__progress-bar--info { background-color: var(--onyx-color-text-icons-info-intense); } }@layer onyx.component { .onyx-error-svg { --onyx-error-svg-background-color: var(--onyx-color-neutral-steel-900); --onyx-error-svg-background-color-accent: var(--onyx-color-neutral-steel-800); --onyx-error-svg-background-color-device-controls: var(--onyx-color-neutral-steel-200); --onyx-error-svg-background-color-cable: var(--onyx-color-neutral-steel-700); --onyx-error-svg-background-color-circle: var(--onyx-color-base-neutral-200); --onyx-error-svg-background-color-primary: var(--onyx-color-base-primary-500); --onyx-error-svg-background-color-face: #fff; } }@layer onyx.component { .onyx-file-upload-svg { --onyx-file-upload-svg-background-color-bubble: var(--onyx-color-base-neutral-800); --onyx-file-upload-svg-color-bubble: var(--onyx-color-text-icons-neutral-inverted); --onyx-file-upload-svg-background-color: var(--onyx-color-base-neutral-200); --onyx-file-upload-svg-border-color: var(--onyx-color-base-neutral-500); } .onyx-file-upload-svg--active { --onyx-file-upload-svg-background-color: var(--onyx-color-base-primary-200); --onyx-file-upload-svg-border-color: var(--onyx-color-base-primary-600); --onyx-file-upload-svg-background-color-bubble: var(--onyx-color-base-primary-800); } .onyx-file-upload-svg--error { --onyx-file-upload-svg-background-color-bubble: var(--onyx-color-component-border-danger); } @media (prefers-color-scheme: dark) { .onyx-file-upload-svg--error { --onyx-file-upload-svg-color-bubble: var(--onyx-color-text-icons-neutral-intense); } } .onyx-file-upload-svg--error.onyx-file-upload-svg--active { --onyx-file-upload-svg-background-color: var(--onyx-color-base-danger-200); --onyx-file-upload-svg-border-color: var(--onyx-color-base-danger-600); } .onyx-file-upload-svg--disabled { --onyx-file-upload-svg-background-color-bubble: var(--onyx-color-base-neutral-400); --onyx-file-upload-svg-color-bubble: var(--onyx-color-text-icons-neutral-inverted); --onyx-file-upload-svg-background-color: var(--onyx-color-base-neutral-200); --onyx-file-upload-svg-border-color: var(--onyx-color-base-neutral-400); } }/** * Gets a comma separated CSS selector for the input autofill. * Includes default browser selectors as well as some specific selectors e.g. for certain password managers. */ @layer onyx.component { .onyx-file-upload-wrapper { --onyx-file-upload-max-files: 3; display: flex; flex-direction: column; gap: var(--onyx-density-xs); position: relative; --onyx-file-upload-border-color: var(--onyx-color-component-border-neutral); --onyx-file-upload-active-border-color: var(--onyx-color-component-border-primary-hover); --onyx-file-upload-error-illustration-display: none; --onyx-file-upload-default-illustration-display: block; --onyx-file-upload-outline-color: var(--onyx-color-component-focus-primary); --onyx-file-upload-active-background-color: var(--onyx-color-base-primary-100); --onyx-file-upload-active-label-color: var(--onyx-color-text-icons-primary-intense); --onyx-file-upload-hover-svg-background-color-bubble: var(--onyx-color-base-primary-800); --onyx-file-upload-small-border-color: var(--onyx-color-base-neutral-200); --onyx-file-upload-small-active-border-color: var(--onyx-color-base-neutral-400); --onyx-file-upload-small-hover-background-color: var(--onyx-background-color-hover); --onyx-file-upload-small-outline-color: var(--onyx-color-component-focus-neutral); --onyx-file-upload-small-dragging-border-color: var( --onyx-color-component-border-primary-hover ); --onyx-file-upload-small-dragging-icon-color: var(--onyx-color-text-icons-primary-bold); } .onyx-file-upload-wrapper:not(.onyx-form-element-suppress-invalid).onyx-form-element--touched-invalid:has(.onyx-file-upload__input:user-invalid, .onyx-file-upload__input--touched:invalid), .onyx-file-upload-wrapper:not(.onyx-form-element-suppress-invalid).onyx-form-element--immediate-invalid:has(.onyx-file-upload__input:invalid) { --onyx-file-upload-error-message-display: inline-flex; --onyx-file-upload-border-color: var(--onyx-color-component-border-danger); --onyx-file-upload-active-border-color: var(--onyx-color-component-border-danger-hover); --onyx-file-upload-error-illustration-display: block; --onyx-file-upload-default-illustration-display: none; --onyx-file-upload-outline-color: var(--onyx-color-component-focus-danger); --onyx-file-upload-active-background-color: var(--onyx-color-base-danger-100); --onyx-file-upload-active-label-color: var(--onyx-color-text-icons-danger-intense); --onyx-file-upload-hover-svg-background-color-bubble: var( --onyx-color-component-border-danger ); --onyx-file-upload-small-border-color: var(--onyx-color-component-border-danger); --onyx-file-upload-small-active-border-color: var(--onyx-color-component-border-danger); --onyx-file-upload-small-hover-background-color: var(--onyx-color-base-background-blank); --onyx-file-upload-small-outline-color: var(--onyx-color-component-focus-danger); --onyx-file-upload-small-dragging-border-color: var( --onyx-color-component-border-danger-hover ); --onyx-file-upload-small-dragging-icon-color: var(--onyx-color-text-icons-danger-bold); } .onyx-file-upload-wrapper .onyx-tooltip-wrapper { width: 100%; max-width: 100%; } .onyx-file-upload-wrapper .onyx-tooltip-wrapper .onyx-tooltip { width: 100%; } .onyx-file-upload { all: unset; font-family: var(--onyx-font-family-paragraph); color: var(--onyx-color-text-icons-neutral-intense); border-radius: var(--onyx-radius-md); border: var(--onyx-1px-in-rem) dashed var(--onyx-file-upload-border-color); background-color: var(--onyx-color-base-background-blank); padding: var(--onyx-density-xl); display: flex; flex-direction: column; justify-content: center; align-items: center; box-sizing: border-box; max-width: 100%; width: 100%; text-align: center; } .onyx-file-upload--medium { padding: var(--onyx-density-xs); gap: var(--onyx-density-xs); } .onyx-file-upload--small { padding: var(--onyx-density-sm); border: var(--onyx-1px-in-rem) solid var(--onyx-color-base-neutral-200); } .onyx-file-upload__icon { display: flex; gap: var(--onyx-density-2xs); color: var(--onyx-color-text-icons-neutral-intense); font-family: var(--onyx-font-family-h3); font-size: var(--onyx-font-size-md); font-weight: var(--onyx-font-weight-semibold); line-height: var(--onyx-font-line-height-md); } .onyx-file-upload--dragging { border-color: var(--onyx-file-upload-active-border-color); background-color: var(--onyx-file-upload-active-background-color); } .onyx-file-upload--dragging * { pointer-events: none; } .onyx-file-upload--dragging .onyx-file-upload__label { color: var(--onyx-file-upload-active-label-color); } .onyx-file-upload .onyx-file-upload-svg { margin-bottom: var(--onyx-density-md); } .onyx-file-upload__content { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: var(--onyx-density-2xs); } .onyx-file-upload__visually-hidden-input { position: absolute; width: 100%; height: 100%; overflow: hidden; } .onyx-file-upload__input { position: absolute; width: 100%; height: 100%; } .onyx-file-upload:enabled { cursor: pointer; } .onyx-file-upload:enabled:hover, .onyx-file-upload:enabled:focus-within { border-color: var(--onyx-file-upload-active-border-color); } .onyx-file-upload:enabled:hover .onyx-file-upload__label, .onyx-file-upload:enabled:focus-within .onyx-file-upload__label { color: var(--onyx-file-upload-active-label-color); } .onyx-file-upload:enabled:hover > .onyx-file-upload-svg { --onyx-file-upload-svg-background-color-bubble: var( --onyx-file-upload-hover-svg-background-color-bubble ); } .onyx-file-upload:enabled:focus-within { outline: var(--onyx-outline-width) solid var(--onyx-file-upload-outline-color); } .onyx-file-upload:enabled .onyx-file-upload__text { color: var(--onyx-color-text-icons-neutral-medium); } .onyx-file-upload:enabled.onyx-file-upload--small { padding: var(--onyx-density-sm); border: var(--onyx-1px-in-rem) solid var(--onyx-file-upload-small-border-color); } .onyx-file-upload:enabled.onyx-file-upload--small:hover { background-color: var(--onyx-file-upload-small-hover-background-color); border: var(--onyx-1px-in-rem) solid var(--onyx-file-upload-small-active-border-color); } .onyx-file-upload:enabled.onyx-file-upload--small:focus-within { border: var(--onyx-1px-in-rem) solid var(--onyx-file-upload-small-active-border-color); outline: var(--onyx-outline-width) solid var(--onyx-file-upload-small-outline-color); } .onyx-file-upload:enabled.onyx-file-upload--small.onyx-file-upload--dragging { border: var(--onyx-1px-in-rem) dashed var(--onyx-file-upload-small-dragging-border-color); } .onyx-file-upload:enabled.onyx-file-upload--small.onyx-file-upload--dragging .onyx-file-upload__icon { color: var(--onyx-file-upload-small-dragging-icon-color); } .onyx-file-upload:disabled { background-color: var(--onyx-color-base-background-tinted) !important; color: var(--onyx-color-text-icons-neutral-soft); } .onyx-file-upload:disabled .onyx-file-upload__icon { color: var(--onyx-color-text-icons-neutral-soft); } .onyx-file-upload__list { --onyx-file-upload-list-gap: var(--onyx-density-2xs); display: flex; flex-direction: column; gap: var(--onyx-file-upload-list-gap); } .onyx-file-upload__list--max-height { overflow-y: scroll; max-height: calc((var(--onyx-file-upload-max-files) + 0.5) * (max(1.5rem + 2 * var(--onyx-density-xs) + 2 * var(--onyx-1px-in-rem), 2 * var(--onyx-font-line-height-sm)) + 2 * var(--onyx-density-xs) + 2 * var(--onyx-1px-in-rem)) + (var(--onyx-file-upload-max-files)) * var(--onyx-file-upload-list-gap)); } .onyx-file-upload__list-button { margin-inline: auto; } .onyx-file-upload__required_error { color: var(--onyx-color-text-icons-danger-intense); display: var(--onyx-file-upload-error-message-display, none); align-items: center; } .onyx-file-upload__required_error .onyx-icon { margin-left: var(--onyx-density-2xs); } .onyx-file-upload__error-illustration { display: var(--onyx-file-upload-error-illustration-display); } .onyx-file-upload__default-illustration { display: var(--onyx-file-upload-default-illustration-display); } .onyx-file-upload-skeleton { height: 7.5rem; width: 20rem; box-sizing: initial; padding: var(--onyx-density-xl); } .onyx-file-upload-skeleton--medium { padding: var(--onyx-density-xs); height: 3.125rem; width: 16rem; } .onyx-file-upload-skeleton--small { padding: var(--onyx-density-sm); height: 1.5rem; width: 6rem; } }@layer onyx.component { .onyx-filter-tag .onyx-tag { --onyx-tag-background-color: var(--onyx-color-base-neutral-600); --onyx-tag-color: var(--onyx-color-text-icons-neutral-inverted); --onyx-tag-hover-background-color: var(--onyx-color-base-neutral-900); --onyx-tag-focus-color: var(--onyx-color-component-focus-neutral); --onyx-tag-focus-background-color: var(--onyx-color-base-neutral-600); border: none; } }/** * Gets a comma separated CSS selector for the input autofill. * Includes default browser selectors as well as some specific selectors e.g. for certain password managers. */ @layer onyx.component { .onyx-textarea { --onyx-textarea-autosize-min-rows: 3; --onyx-textarea-autosize-max-rows: 10; --onyx-textarea-min-height: calc( var(--onyx-textarea-autosize-min-rows) * 1lh + 2 * var(--onyx-form-element-v2-padding-block) ); --onyx-textarea-max-height: calc( var(--onyx-textarea-autosize-max-rows) * 1lh + 2 * var(--onyx-form-element-v2-padding-block) ); --onyx-form-element-v2-content-height: calc(1lh * var(--onyx-textarea-autosize-min-rows)); } .onyx-textarea:has(.onyx-textarea__input[style*=height]) { --onyx-textarea-max-height: unset; } .onyx-textarea:has(.onyx-textarea__input[style*=height]) .onyx-textarea__wrapper::after { height: 0; } } @layer onyx.component { .onyx-textarea__wrapper { padding: 0; display: grid; width: 100%; height: 100%; } .onyx-textarea__wrapper::after { /* Note the weird space! Needed to prevent jumpy behavior */ content: attr(data-autosize-value) " "; white-space: pre-wrap; visibility: hidden; overflow-wrap: anywhere; overflow-y: hidden; } .onyx-textarea .onyx-form-element-v2__content { height: unset; } .onyx-textarea { /** * Styles that are shared between the