@zanichelli/albe-web-components 12.4.0-RC → 12.4.0

package/www/build/p-4a7a94e2.css

@@ -1,1576 +0,0 @@
-/* stylelint-disable-next-line import-notation */
-@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Serif:ital,wght@0,700;1,700&display=swap");
-@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap");
-:root {
-  --gray950: #121212;
-  --gray900: #292929;
-  --gray800: #3D3D3D;
-  --gray700: #525252;
-  --gray600: #666666;
-  --gray500: #9B9B9B;
-  --gray400: #ADADAD;
-  --gray300: #C2C2C2;
-  --gray200: #D6D6D6;
-  --gray100: #EBEBEB;
-  --gray50: #F6F6F6;
-}
-
-:root {
-  --blue950: #001229;
-  --blue900: #001f46;
-  --blue800: #002c63;
-  --blue700: #003981;
-  --blue600: #0047a0;
-  --blue500: #0056c1;
-  --blue400: #2e76ce;
-  --blue300: #5893db;
-  --blue200: #82b0e7;
-  --blue100: #accdf3;
-  --blue50: #d6eaff;
-  --blue25: #ebf5ff;
-}
-
-:root {
-  --green950: #19200A;
-  --green900: #22330A;
-  --green800: #2B4808;
-  --green700: #355D06;
-  --green600: #407305;
-  --green500: #568818;
-  --green400: #6F9D2F;
-  --green300: #8AB14A;
-  --green200: #A6C66B;
-  --green100: #C3DA92;
-  --green50: #EFFCE0;
-}
-
-:root {
-  --yellow950: #33280F;
-  --yellow900: #5C4615;
-  --yellow800: #85641A;
-  --yellow700: #AB8125;
-  --yellow600: #D09E30;
-  --yellow500: #F6BB3B;
-  --yellow400: #F9C852;
-  --yellow300: #FBD468;
-  --yellow200: #FEE17F;
-  --yellow150: #ffde72;
-  --yellow100: #FFEA91;
-  --yellow50: #FBF4E6;
-}
-
-:root {
-  --red950: #2A0005;
-  --red900: #4C0009;
-  --red800: #6F000D;
-  --red700: #940111;
-  --red600: #BA0115;
-  --red500: #E2011A;
-  --red400: #EB4F60;
-  --red300: #EB4F60;
-  --red200: #F49DA7;
-  --red100: #F49DA7;
-  --red50: #FDEFEE;
-}
-
-:root {
-  --avatar-C01: #99005B;
-  --avatar-C02: #B01300;
-  --avatar-C03: #E62200;
-  --avatar-C04: #7C4000;
-  --avatar-C05: #C25600;
-  --avatar-C06: #6E6D6D;
-  --avatar-C07: #667D00;
-  --avatar-C08: #008741;
-  --avatar-C09: #00612F;
-  --avatar-C10: #007D8A;
-  --avatar-C11: #007DB3;
-  --avatar-C12: #00548C;
-  --avatar-C13: #0028B1;
-  --avatar-C14: #00019C;
-  --avatar-C15: #6400EE;
-  --avatar-C16: #5F3FFF;
-  --avatar-C17: #8B00A5;
-  --avatar-C18: #B200FF;
-  --avatar-C19: #C700D6;
-}
-
-:root {
-  --subject-art: #C4C410;
-  --subject-art_image: #C4C410;
-  --subject-biology: #67C47F;
-  --subject-chemistry: #C35598;
-  --subject-computer_science: #1AB956;
-  --subject-earth_science: #8D3EB2;
-  --subject-english: #F76C6C;
-  --subject-food_science: #3F9176;
-  --subject-french: #F76C6C;
-  --subject-geography: #57C1DB;
-  --subject-german: #F76C6C;
-  --subject-grammar: #F87635;
-  --subject-greek: #5BCBD9;
-  --subject-history: #8B572A;
-  --subject-law: #B90000;
-  --subject-math: #266997;
-  --subject-physics: #5A94C5;
-  --subject-science_middle_school: #3A7922;
-  --subject-spanish: #F76C6C;
-  --subject-technology: #138473;
-}
-
-:root {
-  --color-error-default: #DC3122;
-  --color-success-default: #417505;
-  --color-warning-default: #F6BB3B;
-  --color-black: #000000;
-  --color-white: #FFFFFF;
-}
-
-:root {
-  /* font-family */
-  --font-family-sans: "IBM Plex Sans", sans-serif;
-  /* font-weight */
-  --font-lt: 300;
-  --font-rg: 400;
-  --font-sb: 600;
-  --font-bd: 700;
-  /* font-size type scale */
-  --font-size-1: 0.75rem; /* 12px */
-  --font-size-2: 0.875rem; /* 14px */
-  --font-size-3: 1rem; /* assuming 16px */
-  --font-size-4: 1.125rem; /* 18px */
-  --font-size-5: 1.25rem; /* 20px */
-  --font-size-6: 1.5rem; /* 24px */
-  --font-size-7: 1.75rem; /* 28px */
-  --font-size-8: 2rem; /* 32px */
-  --font-size-9: 2.25rem; /* 36px */
-  --font-size-10: 2.625rem; /* 42px */
-  --font-size-11: 3rem; /* 48px */
-  --font-size-12: 3.375rem; /* 54px */
-  --font-size-13: 3.75rem; /* 60px */
-  --font-size-14: 4.25rem; /* 68px */
-  --font-size-15: 4.75rem; /* 76px */
-  --font-size-16: 5.25rem; /* 84px */
-  --font-size-17: 5.75rem; /* 92px */
-}
-
-/* Typography classes */
-.heading-1,
-.heading-1-sb,
-.heading-1-lt {
-  font-size: var(--font-size-8);
-  font-weight: var(--font-rg);
-  line-height: 1.25;
-  letter-spacing: 0;
-}
-
-.heading-2,
-.heading-2-sb,
-.heading-2-lt {
-  font-size: var(--font-size-7);
-  font-weight: var(--font-rg);
-  line-height: 1.28;
-  letter-spacing: 0;
-}
-
-@media (max-width: 1151px) {
-  .heading-1,
-  .heading-1-sb,
-  .heading-1-lt {
-    font-size: var(--font-size-7);
-    line-height: 1.28;
-  }
-  .heading-2,
-  .heading-2-sb,
-  .heading-2-lt {
-    font-size: var(--font-size-6);
-    line-height: 1.333;
-  }
-}
-.heading-3,
-.heading-3-sb,
-.heading-3-lt {
-  font-size: var(--font-size-6);
-  font-weight: var(--font-rg);
-  line-height: 1.333;
-  letter-spacing: 0;
-}
-
-.heading-4,
-.heading-4-sb,
-.heading-4-lt {
-  font-size: var(--font-size-5);
-  font-weight: var(--font-rg);
-  line-height: 1.4;
-  letter-spacing: 0;
-}
-
-.body-1,
-.body-1-sb {
-  font-size: var(--font-size-5);
-  font-weight: var(--font-rg);
-  line-height: 1.4;
-  letter-spacing: 0;
-}
-
-.body-2,
-.body-2-sb {
-  font-size: var(--font-size-4);
-  font-weight: var(--font-rg);
-  line-height: 1.5;
-  letter-spacing: 0;
-}
-
-.body-3,
-.body-3-sb {
-  font-size: var(--font-size-3);
-  font-weight: var(--font-rg);
-  line-height: 1.5;
-  letter-spacing: 0;
-}
-
-.body-4,
-.body-4-sb {
-  font-size: var(--font-size-2);
-  font-weight: var(--font-rg);
-  line-height: 1.4;
-  letter-spacing: 0.16px;
-}
-
-.body-5,
-.body-5-sb {
-  font-size: var(--font-size-1);
-  font-weight: var(--font-rg);
-  line-height: 1.333;
-  letter-spacing: 0.32px;
-}
-
-.interactive-1,
-.interactive-1-sb {
-  font-size: var(--font-size-3);
-  font-weight: var(--font-rg);
-  line-height: 1.5;
-  letter-spacing: 0;
-}
-
-.interactive-2,
-.interactive-2-sb {
-  font-size: var(--font-size-2);
-  font-weight: var(--font-rg);
-  line-height: 1.4;
-  letter-spacing: 0.16px;
-}
-
-.interactive-3,
-.interactive-3-sb {
-  font-size: var(--font-size-1);
-  font-weight: var(--font-rg);
-  line-height: 1.333;
-  letter-spacing: 0.32px;
-}
-
-.helper,
-.helper-sb {
-  font-size: var(--font-size-1);
-  font-weight: var(--font-rg);
-  font-style: italic;
-  line-height: 1.333;
-  letter-spacing: 0.32px;
-}
-
-/* font-weight variants */
-.heading-1-lt,
-.heading-2-lt,
-.heading-3-lt,
-.heading-4-lt {
-  font-weight: var(--font-lt);
-}
-
-.heading-1-sb,
-.heading-2-sb,
-.heading-3-sb,
-.heading-4-sb,
-.body-1-sb,
-.body-2-sb,
-.body-3-sb,
-.body-4-sb,
-.body-5-sb,
-.interactive-1-sb,
-.interactive-2-sb,
-.interactive-3-sb,
-.helper-sb {
-  font-weight: var(--font-sb);
-}
-
-:root {
-  --space-unit: 8px;
-}
-
-:root {
-  --shadow-color-base: rgba(66, 69, 72, 0.35);
-  --shadow-inset-2: inset 0 2px 4px 0 var(--shadow-color-base);
-  --shadow-inset-4: inset 0 4px 8px 0 var(--shadow-color-base);
-  --shadow-0: 0 0 0 0 var(--shadow-color-base);
-  --shadow-1: 0 1px 2px 0 var(--shadow-color-base);
-  --shadow-2: 0 2px 4px 0 var(--shadow-color-base);
-  --shadow-3: 0 3px 6px 0 var(--shadow-color-base);
-  --shadow-4: 0 4px 8px 0 var(--shadow-color-base);
-  --shadow-6: 0 6px 12px 0 var(--shadow-color-base);
-  --shadow-8: 0 8px 16px 0 var(--shadow-color-base);
-  --shadow-12: 0 12px 24px 0 var(--shadow-color-base);
-  --shadow-16: 0 16px 32px 0 var(--shadow-color-base);
-  --shadow-24: 0 24px 48px 0 var(--shadow-color-base);
-}
-
-:root {
-  --border-no-radius: 0;
-  --border-size-small: 1px;
-  --border-size-medium: 2px;
-  --border-size-large: 4px;
-  --border-radius-small: 2px;
-  --border-radius: 4px;
-}
-
-:root {
-  --grid-mobile-viewport: 768px;
-  --grid-mobile-column: 4;
-  --grid-mobile-margin: 16px;
-  --grid-mobile-gutter: 16px;
-  --grid-tablet-viewport: 768px;
-  --grid-tablet-column: 8;
-  --grid-tablet-margin: 24px;
-  --grid-tablet-gutter: 24px;
-  --grid-desktop-viewport: 1152px;
-  --grid-desktop-column: 12;
-  --grid-desktop-margin: 24px;
-  --grid-desktop-gutter: 24px;
-  --grid-wide-viewport: 1366px;
-  --grid-wide-column: 12;
-  --grid-wide-margin: 32px;
-  --grid-wide-gutter: 32px;
-  --page-max-width: 1366px;
-  /* These variables automatically adapt to the viewport size,
-    that apps don't have to worry about updating the value manually. */
-  --grid-margin: var(--grid-mobile-margin);
-  --grid-gutter: var(--grid-mobile-gutter);
-  --grid-columns: var(--grid-mobile-column);
-}
-
-@media (min-width: 768px) and (max-width: 1151px) {
-  :root {
-    --grid-margin: var(--grid-tablet-margin);
-    --grid-gutter: var(--grid-tablet-gutter);
-    --grid-columns: var(--grid-tablet-column);
-  }
-}
-@media (min-width: 1152px) and (max-width: 1365px) {
-  :root {
-    --grid-margin: var(--grid-desktop-margin);
-    --grid-gutter: var(--grid-desktop-gutter);
-    --grid-columns: var(--grid-desktop-column);
-  }
-}
-@media (min-width: 1366px) {
-  :root {
-    --grid-margin: var(--grid-wide-margin);
-    --grid-gutter: var(--grid-wide-gutter);
-    --grid-columns: var(--grid-wide-column);
-  }
-}
-.z-grid {
-  display: grid;
-  grid-template-columns: repeat(var(--grid-columns), 1fr);
-  width: 100%;
-  column-gap: var(--grid-gutter);
-  /*
-    .-col-start-1 is intentionally left out
-  */
-  /*
-    .col-end-1 is intentionally left out
-  */
-  /*
-    This means "end this column where column 5 start",
-    which is the same as saying "end this column where column 4 end"
-  */
-}
-.z-grid .col-full {
-  grid-column: 1/-1;
-}
-.z-grid .col-1 {
-  grid-column: span 1;
-}
-.z-grid .col-2 {
-  grid-column: span 2;
-}
-.z-grid .col-3 {
-  grid-column: span 3;
-}
-.z-grid .col-4,
-.z-grid .col-5,
-.z-grid .col-6,
-.z-grid .col-7,
-.z-grid .col-8,
-.z-grid .col-9,
-.z-grid .col-10,
-.z-grid .col-11,
-.z-grid .col-12 {
-  grid-column: span 4;
-}
-.z-grid .col-start-1 {
-  grid-column-start: 1;
-}
-.z-grid .col-start-2 {
-  grid-column-start: 2;
-}
-.z-grid .col-start-3 {
-  grid-column-start: 3;
-}
-.z-grid .col-start-4,
-.z-grid .col-start-5,
-.z-grid .col-start-6,
-.z-grid .col-start-7,
-.z-grid .col-start-8,
-.z-grid .col-start-9,
-.z-grid .col-start-10,
-.z-grid .col-start-11,
-.z-grid .col-start-12 {
-  grid-column-start: 4;
-}
-.z-grid .-col-start-2 {
-  grid-column-start: -2;
-}
-.z-grid .-col-start-3 {
-  grid-column-start: -3;
-}
-.z-grid .-col-start-4 {
-  grid-column-start: -4;
-}
-.z-grid .-col-start-5,
-.z-grid .-col-start-6,
-.z-grid .-col-start-7,
-.z-grid .-col-start-8,
-.z-grid .-col-start-9,
-.z-grid .-col-start-10,
-.z-grid .-col-start-11,
-.z-grid .-col-start-12,
-.z-grid .-col-start-13 {
-  grid-column-start: -5;
-}
-.z-grid .col-end-last {
-  grid-column-end: -1;
-}
-.z-grid .col-end-2 {
-  grid-column-end: 2;
-}
-.z-grid .col-end-3 {
-  grid-column-end: 3;
-}
-.z-grid .col-end-4 {
-  grid-column-end: 4;
-}
-.z-grid .col-end-5,
-.z-grid .col-end-6,
-.z-grid .col-end-7,
-.z-grid .col-end-8,
-.z-grid .col-end-9,
-.z-grid .col-end-10,
-.z-grid .col-end-11,
-.z-grid .col-end-12,
-.z-grid .col-end-13 {
-  grid-column-end: 5;
-}
-.z-grid .-col-end-1 {
-  grid-column-end: -1;
-}
-.z-grid .-col-end-2 {
-  grid-column-end: -2;
-}
-.z-grid .-col-end-3 {
-  grid-column-end: -3;
-}
-.z-grid .-col-end-4,
-.z-grid .-col-end-5,
-.z-grid .-col-end-6,
-.z-grid .-col-end-7,
-.z-grid .-col-end-8,
-.z-grid .-col-end-9,
-.z-grid .-col-end-10,
-.z-grid .-col-end-11,
-.z-grid .-col-end-12 {
-  grid-column-end: -4;
-}
-@media (max-width: 767px) {
-  .z-grid .mobile-col-full {
-    grid-column: 1/-1;
-  }
-  .z-grid .mobile-col-1 {
-    grid-column: span 1;
-  }
-  .z-grid .mobile-col-2 {
-    grid-column: span 2;
-  }
-  .z-grid .mobile-col-3 {
-    grid-column: span 3;
-  }
-  .z-grid .mobile-col-4 {
-    grid-column: span 4;
-  }
-}
-@media (min-width: 768px) {
-  .z-grid .col-5 {
-    grid-column: span 5;
-  }
-  .z-grid .col-6 {
-    grid-column: span 6;
-  }
-  .z-grid .col-7 {
-    grid-column: span 7;
-  }
-  .z-grid .col-8,
-  .z-grid .col-9,
-  .z-grid .col-10,
-  .z-grid .col-11,
-  .z-grid .col-12 {
-    grid-column: span 8;
-  }
-  .z-grid .col-start-5 {
-    grid-column-start: 5;
-  }
-  .z-grid .col-start-6 {
-    grid-column-start: 6;
-  }
-  .z-grid .col-start-7 {
-    grid-column-start: 7;
-  }
-  .z-grid .col-start-8,
-  .z-grid .col-start-9,
-  .z-grid .col-start-10,
-  .z-grid .col-start-11,
-  .z-grid .col-start-12 {
-    grid-column-start: 8;
-  }
-  .z-grid .-col-start-6 {
-    grid-column-start: -6;
-  }
-  .z-grid .-col-start-7 {
-    grid-column-start: -7;
-  }
-  .z-grid .-col-start-8 {
-    grid-column-start: -8;
-  }
-  .z-grid .-col-start-9,
-  .z-grid .-col-start-10,
-  .z-grid .-col-start-11,
-  .z-grid .-col-start-12,
-  .z-grid .-col-start-13 {
-    grid-column-start: -9;
-  }
-  .z-grid .col-end-6 {
-    grid-column-end: 6;
-  }
-  .z-grid .col-end-7 {
-    grid-column-end: 7;
-  }
-  .z-grid .col-end-8 {
-    grid-column-end: 8;
-  }
-  .z-grid .col-end-9,
-  .z-grid .col-end-10,
-  .z-grid .col-end-11,
-  .z-grid .col-end-12,
-  .z-grid .col-end-13 {
-    grid-column-end: 9;
-  }
-  .z-grid .-col-end-5 {
-    grid-column-end: -5;
-  }
-  .z-grid .-col-end-6 {
-    grid-column-end: -6;
-  }
-  .z-grid .-col-end-7 {
-    grid-column-end: -7;
-  }
-  .z-grid .-col-end-8,
-  .z-grid .-col-end-9,
-  .z-grid .-col-end-10,
-  .z-grid .-col-end-11,
-  .z-grid .-col-end-12 {
-    grid-column-end: -8;
-  }
-}
-@media (min-width: 768px) and (max-width: 1151px) {
-  .z-grid .tablet-col-full {
-    grid-column: 1/-1;
-  }
-  .z-grid .tablet-col-1 {
-    grid-column: span 1;
-  }
-  .z-grid .tablet-col-2 {
-    grid-column: span 2;
-  }
-  .z-grid .tablet-col-3 {
-    grid-column: span 3;
-  }
-  .z-grid .tablet-col-4 {
-    grid-column: span 4;
-  }
-  .z-grid .tablet-col-5 {
-    grid-column: span 5;
-  }
-  .z-grid .tablet-col-6 {
-    grid-column: span 6;
-  }
-  .z-grid .tablet-col-7 {
-    grid-column: span 7;
-  }
-  .z-grid .tablet-col-8 {
-    grid-column: span 8;
-  }
-  .z-grid .tablet-col-start-1 {
-    grid-column-start: 1;
-  }
-  .z-grid .tablet-col-start-2 {
-    grid-column-start: 2;
-  }
-  .z-grid .tablet-col-start-3 {
-    grid-column-start: 3;
-  }
-  .z-grid .tablet-col-start-4 {
-    grid-column-start: 4;
-  }
-  .z-grid .tablet-col-start-5 {
-    grid-column-start: 5;
-  }
-  .z-grid .tablet-col-start-6 {
-    grid-column-start: 6;
-  }
-  .z-grid .tablet-col-start-7 {
-    grid-column-start: 7;
-  }
-  .z-grid .tablet-col-start-8 {
-    grid-column-start: 8;
-  }
-  .z-grid .-tablet-col-start-2 {
-    grid-column-start: -2;
-  }
-  .z-grid .-tablet-col-start-3 {
-    grid-column-start: -3;
-  }
-  .z-grid .-tablet-col-start-4 {
-    grid-column-start: -4;
-  }
-  .z-grid .-tablet-col-start-5 {
-    grid-column-start: -5;
-  }
-  .z-grid .-tablet-col-start-6 {
-    grid-column-start: -6;
-  }
-  .z-grid .-tablet-col-start-7 {
-    grid-column-start: -7;
-  }
-  .z-grid .-tablet-col-start-8 {
-    grid-column-start: -8;
-  }
-  .z-grid .tablet-col-end-2 {
-    grid-column-end: 2;
-  }
-  .z-grid .tablet-col-end-3 {
-    grid-column-end: 3;
-  }
-  .z-grid .tablet-col-end-4 {
-    grid-column-end: 4;
-  }
-  .z-grid .tablet-col-end-6 {
-    grid-column-end: 6;
-  }
-  .z-grid .tablet-col-end-7 {
-    grid-column-end: 7;
-  }
-  .z-grid .tablet-col-end-8 {
-    grid-column-end: 8;
-  }
-  .z-grid .tablet-col-end-last {
-    grid-column-end: -1;
-  }
-  .z-grid .-tablet-col-end-1 {
-    grid-column-end: -1;
-  }
-  .z-grid .-tablet-col-end-2 {
-    grid-column-end: -2;
-  }
-  .z-grid .-tablet-col-end-3 {
-    grid-column-end: -3;
-  }
-  .z-grid .-tablet-col-end-4 {
-    grid-column-end: -4;
-  }
-  .z-grid .-tablet-col-end-5 {
-    grid-column-end: -5;
-  }
-  .z-grid .-tablet-col-end-6 {
-    grid-column-end: -6;
-  }
-  .z-grid .-tablet-col-end-7 {
-    grid-column-end: -7;
-  }
-  .z-grid .-tablet-col-end-8 {
-    grid-column-end: -8;
-  }
-}
-@media (min-width: 1152px) {
-  .z-grid .col-9 {
-    grid-column: span 9;
-  }
-  .z-grid .col-10 {
-    grid-column: span 10;
-  }
-  .z-grid .col-11 {
-    grid-column: span 11;
-  }
-  .z-grid .col-12 {
-    grid-column: span 12;
-  }
-  .z-grid .col-start-9 {
-    grid-column-start: 9;
-  }
-  .z-grid .col-start-10 {
-    grid-column-start: 10;
-  }
-  .z-grid .col-start-11 {
-    grid-column-start: 11;
-  }
-  .z-grid .col-start-12 {
-    grid-column-start: 12;
-  }
-  .z-grid .-col-start-10 {
-    grid-column-start: -10;
-  }
-  .z-grid .-col-start-11 {
-    grid-column-start: -11;
-  }
-  .z-grid .-col-start-12 {
-    grid-column-start: -12;
-  }
-  .z-grid .-col-start-13 {
-    grid-column-start: -13;
-  }
-  .z-grid .col-end-10 {
-    grid-column-end: 10;
-  }
-  .z-grid .col-end-11 {
-    grid-column-end: 11;
-  }
-  .z-grid .col-end-12 {
-    grid-column-end: 12;
-  }
-  .z-grid .col-end-13 {
-    grid-column-end: 13;
-  }
-  .z-grid .-col-end-9 {
-    grid-column-end: -9;
-  }
-  .z-grid .-col-end-10 {
-    grid-column-end: -10;
-  }
-  .z-grid .-col-end-11 {
-    grid-column-end: -11;
-  }
-  .z-grid .-col-end-12 {
-    grid-column-end: -12;
-  }
-}
-@media (min-width: 1152px) and (max-width: 1365px) {
-  .z-grid .desktop-col-full {
-    grid-column: 1/-1;
-  }
-  .z-grid .desktop-col-1 {
-    grid-column: span 1;
-  }
-  .z-grid .desktop-col-2 {
-    grid-column: span 2;
-  }
-  .z-grid .desktop-col-3 {
-    grid-column: span 3;
-  }
-  .z-grid .desktop-col-4 {
-    grid-column: span 4;
-  }
-  .z-grid .desktop-col-5 {
-    grid-column: span 5;
-  }
-  .z-grid .desktop-col-6 {
-    grid-column: span 6;
-  }
-  .z-grid .desktop-col-7 {
-    grid-column: span 7;
-  }
-  .z-grid .desktop-col-8 {
-    grid-column: span 8;
-  }
-  .z-grid .desktop-col-9 {
-    grid-column: span 9;
-  }
-  .z-grid .desktop-col-10 {
-    grid-column: span 10;
-  }
-  .z-grid .desktop-col-11 {
-    grid-column: span 11;
-  }
-  .z-grid .desktop-col-12 {
-    grid-column: span 12;
-  }
-  .z-grid .desktop-col-start-1 {
-    grid-column-start: 1;
-  }
-  .z-grid .desktop-col-start-2 {
-    grid-column-start: 2;
-  }
-  .z-grid .desktop-col-start-3 {
-    grid-column-start: 3;
-  }
-  .z-grid .desktop-col-start-4 {
-    grid-column-start: 4;
-  }
-  .z-grid .desktop-col-start-5 {
-    grid-column-start: 5;
-  }
-  .z-grid .desktop-col-start-6 {
-    grid-column-start: 6;
-  }
-  .z-grid .desktop-col-start-7 {
-    grid-column-start: 7;
-  }
-  .z-grid .desktop-col-start-8 {
-    grid-column-start: 8;
-  }
-  .z-grid .desktop-col-start-9 {
-    grid-column-start: 9;
-  }
-  .z-grid .desktop-col-start-10 {
-    grid-column-start: 10;
-  }
-  .z-grid .desktop-col-start-11 {
-    grid-column-start: 11;
-  }
-  .z-grid .desktop-col-start-12 {
-    grid-column-start: 12;
-  }
-  .z-grid .-desktop-col-start-2 {
-    grid-column-start: -2;
-  }
-  .z-grid .-desktop-col-start-3 {
-    grid-column-start: -3;
-  }
-  .z-grid .-desktop-col-start-4 {
-    grid-column-start: -4;
-  }
-  .z-grid .-desktop-col-start-5 {
-    grid-column-start: -5;
-  }
-  .z-grid .-desktop-col-start-6 {
-    grid-column-start: -6;
-  }
-  .z-grid .-desktop-col-start-7 {
-    grid-column-start: -7;
-  }
-  .z-grid .-desktop-col-start-8 {
-    grid-column-start: -8;
-  }
-  .z-grid .-desktop-col-start-9 {
-    grid-column-start: -9;
-  }
-  .z-grid .-desktop-col-start-10 {
-    grid-column-start: -10;
-  }
-  .z-grid .-desktop-col-start-11 {
-    grid-column-start: -11;
-  }
-  .z-grid .-desktop-col-start-12 {
-    grid-column-start: -12;
-  }
-  .z-grid .desktop-col-end-2 {
-    grid-column-end: 2;
-  }
-  .z-grid .desktop-col-end-3 {
-    grid-column-end: 3;
-  }
-  .z-grid .desktop-col-end-4 {
-    grid-column-end: 4;
-  }
-  .z-grid .desktop-col-end-6 {
-    grid-column-end: 6;
-  }
-  .z-grid .desktop-col-end-7 {
-    grid-column-end: 7;
-  }
-  .z-grid .desktop-col-end-8 {
-    grid-column-end: 8;
-  }
-  .z-grid .desktop-col-end-9 {
-    grid-column-end: 9;
-  }
-  .z-grid .desktop-col-end-10 {
-    grid-column-end: 10;
-  }
-  .z-grid .desktop-col-end-11 {
-    grid-column-end: 11;
-  }
-  .z-grid .desktop-col-end-12 {
-    grid-column-end: 12;
-  }
-  .z-grid .desktop-col-end-last {
-    grid-column-end: -1;
-  }
-  .z-grid .-desktop-col-end-1 {
-    grid-column-end: -1;
-  }
-  .z-grid .-desktop-col-end-2 {
-    grid-column-end: -2;
-  }
-  .z-grid .-desktop-col-end-3 {
-    grid-column-end: -3;
-  }
-  .z-grid .-desktop-col-end-4 {
-    grid-column-end: -4;
-  }
-  .z-grid .-desktop-col-end-5 {
-    grid-column-end: -5;
-  }
-  .z-grid .-desktop-col-end-6 {
-    grid-column-end: -6;
-  }
-  .z-grid .-desktop-col-end-7 {
-    grid-column-end: -7;
-  }
-  .z-grid .-desktop-col-end-8 {
-    grid-column-end: -8;
-  }
-  .z-grid .-desktop-col-end-9 {
-    grid-column-end: -9;
-  }
-  .z-grid .-desktop-col-end-10 {
-    grid-column-end: -10;
-  }
-  .z-grid .-desktop-col-end-11 {
-    grid-column-end: -11;
-  }
-  .z-grid .-desktop-col-end-12 {
-    grid-column-end: -12;
-  }
-}
-@media (min-width: 1366px) {
-  .z-grid .wide-col-full {
-    grid-column: 1/-1;
-  }
-  .z-grid .wide-col-1 {
-    grid-column: span 1;
-  }
-  .z-grid .wide-col-2 {
-    grid-column: span 2;
-  }
-  .z-grid .wide-col-3 {
-    grid-column: span 3;
-  }
-  .z-grid .wide-col-4 {
-    grid-column: span 4;
-  }
-  .z-grid .wide-col-5 {
-    grid-column: span 5;
-  }
-  .z-grid .wide-col-6 {
-    grid-column: span 6;
-  }
-  .z-grid .wide-col-7 {
-    grid-column: span 7;
-  }
-  .z-grid .wide-col-8 {
-    grid-column: span 8;
-  }
-  .z-grid .wide-col-9 {
-    grid-column: span 9;
-  }
-  .z-grid .wide-col-10 {
-    grid-column: span 10;
-  }
-  .z-grid .wide-col-11 {
-    grid-column: span 11;
-  }
-  .z-grid .wide-col-12 {
-    grid-column: span 12;
-  }
-  .z-grid .wide-col-start-1 {
-    grid-column-start: 1;
-  }
-  .z-grid .wide-col-start-2 {
-    grid-column-start: 2;
-  }
-  .z-grid .wide-col-start-3 {
-    grid-column-start: 3;
-  }
-  .z-grid .wide-col-start-4 {
-    grid-column-start: 4;
-  }
-  .z-grid .wide-col-start-5 {
-    grid-column-start: 5;
-  }
-  .z-grid .wide-col-start-6 {
-    grid-column-start: 6;
-  }
-  .z-grid .wide-col-start-7 {
-    grid-column-start: 7;
-  }
-  .z-grid .wide-col-start-8 {
-    grid-column-start: 8;
-  }
-  .z-grid .wide-col-start-9 {
-    grid-column-start: 9;
-  }
-  .z-grid .wide-col-start-10 {
-    grid-column-start: 10;
-  }
-  .z-grid .wide-col-start-11 {
-    grid-column-start: 11;
-  }
-  .z-grid .wide-col-start-12 {
-    grid-column-start: 12;
-  }
-  .z-grid .-wide-col-start-2 {
-    grid-column-start: -2;
-  }
-  .z-grid .-wide-col-start-3 {
-    grid-column-start: -3;
-  }
-  .z-grid .-wide-col-start-4 {
-    grid-column-start: -4;
-  }
-  .z-grid .-wide-col-start-5 {
-    grid-column-start: -5;
-  }
-  .z-grid .-wide-col-start-6 {
-    grid-column-start: -6;
-  }
-  .z-grid .-wide-col-start-7 {
-    grid-column-start: -7;
-  }
-  .z-grid .-wide-col-start-8 {
-    grid-column-start: -8;
-  }
-  .z-grid .-wide-col-start-9 {
-    grid-column-start: -9;
-  }
-  .z-grid .-wide-col-start-10 {
-    grid-column-start: -10;
-  }
-  .z-grid .-wide-col-start-11 {
-    grid-column-start: -11;
-  }
-  .z-grid .-wide-col-start-12 {
-    grid-column-start: -12;
-  }
-  .z-grid .wide-col-end-2 {
-    grid-column-end: 2;
-  }
-  .z-grid .wide-col-end-3 {
-    grid-column-end: 3;
-  }
-  .z-grid .wide-col-end-4 {
-    grid-column-end: 4;
-  }
-  .z-grid .wide-col-end-6 {
-    grid-column-end: 6;
-  }
-  .z-grid .wide-col-end-7 {
-    grid-column-end: 7;
-  }
-  .z-grid .wide-col-end-8 {
-    grid-column-end: 8;
-  }
-  .z-grid .wide-col-end-9 {
-    grid-column-end: 9;
-  }
-  .z-grid .wide-col-end-10 {
-    grid-column-end: 10;
-  }
-  .z-grid .wide-col-end-11 {
-    grid-column-end: 11;
-  }
-  .z-grid .wide-col-end-12 {
-    grid-column-end: 12;
-  }
-  .z-grid .wide-col-end-last {
-    grid-column-end: -1;
-  }
-  .z-grid .-wide-col-end-1 {
-    grid-column-end: -1;
-  }
-  .z-grid .-wide-col-end-2 {
-    grid-column-end: -2;
-  }
-  .z-grid .-wide-col-end-3 {
-    grid-column-end: -3;
-  }
-  .z-grid .-wide-col-end-4 {
-    grid-column-end: -4;
-  }
-  .z-grid .-wide-col-end-5 {
-    grid-column-end: -5;
-  }
-  .z-grid .-wide-col-end-6 {
-    grid-column-end: -6;
-  }
-  .z-grid .-wide-col-end-7 {
-    grid-column-end: -7;
-  }
-  .z-grid .-wide-col-end-8 {
-    grid-column-end: -8;
-  }
-  .z-grid .-wide-col-end-9 {
-    grid-column-end: -9;
-  }
-  .z-grid .-wide-col-end-10 {
-    grid-column-end: -10;
-  }
-  .z-grid .-wide-col-end-11 {
-    grid-column-end: -11;
-  }
-  .z-grid .-wide-col-end-12 {
-    grid-column-end: -12;
-  }
-}
-
-/* Default size: big. Default color variant: primary01) */
-.z-fab {
-  --z-fab-right-offset: var(--grid-margin);
-  --z-fab-bottom-offset: var(--grid-margin);
-  --z-fab-icon-size: 20px;
-  --z-fab-icon-fill: var(--color-icon03);
-  position: fixed;
-  z-index: 1;
-  right: var(--z-fab-right-offset);
-  bottom: var(--z-fab-bottom-offset);
-  display: flex;
-  max-width: 48px;
-  align-items: center;
-  column-gap: 0;
-  padding: 14px;
-  background-color: var(--color-primary01);
-  border-radius: 24px;
-  box-shadow: var(--shadow-4);
-  box-sizing: border-box;
-  color: var(--color-text04);
-  cursor: pointer;
-  font-family: var(--font-family-sans);
-  font-size: var(--font-size-3);
-  font-weight: var(--font-rg);
-  line-height: 1.25;
-  transition: all 0.2s ease-in-out;
-}
-
-button.z-fab {
-  border: none;
-}
-
-a.z-fab {
-  text-decoration: none;
-}
-
-.z-fab.z-fab-small {
-  --z-fab-icon-size: 18px;
-  max-width: 42px;
-  padding: 12px;
-  border-radius: 21px;
-  font-size: var(--font-size-2);
-  line-height: 1.285;
-}
-
-.z-fab.z-fab-x-small {
-  --z-fab-icon-size: 16px;
-  max-width: 36px;
-  padding: 10px;
-  border-radius: 18px;
-  font-size: var(--font-size-1);
-  line-height: 1.333;
-}
-
-.z-fab.z-fab-extended {
-  max-width: 100%;
-  column-gap: var(--space-unit);
-}
-
-.z-fab.z-fab-extended.z-fab-x-small {
-  column-gap: calc(var(--space-unit) / 2);
-}
-
-.z-fab.z-fab-extended > *:not(z-icon) {
-  opacity: 1;
-}
-
-/* color variants */
-.z-fab.z-fab-primary03 {
-  --z-fab-icon-fill: var(--color-icon01);
-  background-color: var(--color-primary03);
-  color: var(--color-icon01);
-}
-
-.z-fab.z-fab-surface01 {
-  --z-fab-icon-fill: var(--color-icon01);
-  background-color: var(--color-surface01);
-  color: var(--color-icon01);
-}
-
-.z-fab.z-fab-surface02 {
-  --z-fab-icon-fill: var(--color-icon01);
-  background-color: var(--color-surface02);
-  color: var(--color-icon01);
-}
-
-.z-fab.z-fab-surface04 {
-  --z-fab-icon-fill: var(--color-icon03);
-  background-color: var(--color-surface04);
-  color: var(--color-text04);
-}
-
-.z-fab z-icon {
-  --z-icon-width: var(--z-fab-icon-size);
-  --z-icon-height: var(--z-fab-icon-size);
-  fill: var(--z-fab-icon-fill);
-}
-
-.z-fab > *:not(z-icon) {
-  overflow: hidden;
-  opacity: 0;
-  transition: opacity 0.2s ease-in-out;
-  white-space: nowrap;
-}
-
-.z-fab.z-fab-extended > *:not(z-icon:first-child) {
-  opacity: 1;
-}
-
-@media (hover: hover) {
-  .z-fab.z-fab-extendable:hover {
-    max-width: 100%;
-    column-gap: var(--space-unit);
-  }
-  .z-fab.z-fab-extendable:hover > *:not(z-icon:first-child) {
-    opacity: 1;
-  }
-  .z-fab.z-fab-x-small.z-fab-extendable:hover {
-    column-gap: calc(var(--space-unit) / 2);
-  }
-}
-button.z-link {
-  background-color: transparent;
-  margin: 0;
-  padding: 0;
-  border: 0;
-}
-
-a.z-link,
-button.z-link {
-  display: inline-flex;
-  color: var(--color-link-primary);
-  fill: var(--color-link-primary);
-  cursor: pointer;
-  font-family: var(--font-family-sans);
-  line-height: inherit;
-  text-decoration: none;
-}
-a.z-link:hover, a.z-link:focus, a.z-link:active,
-button.z-link:hover,
-button.z-link:focus,
-button.z-link:active {
-  text-decoration: underline;
-}
-a.z-link:hover, a.z-link:focus,
-button.z-link:hover,
-button.z-link:focus {
-  color: var(--color-hover-link);
-  fill: var(--color-hover-link);
-}
-a.z-link:active, a.z-link.z-link-active:active,
-button.z-link:active,
-button.z-link.z-link-active:active {
-  color: var(--color-pressed-link);
-  fill: var(--color-pressed-link);
-}
-a.z-link:visited,
-button.z-link:visited {
-  color: var(--color-visited-link);
-  fill: var(--color-visited-link);
-}
-a.z-link.z-link-active,
-button.z-link.z-link-active {
-  color: var(--color-active-link);
-  fill: var(--color-active-link);
-}
-a.z-link.z-link-active.z-link-inverse,
-button.z-link.z-link-active.z-link-inverse {
-  color: var(--color-inverse-active-link);
-  fill: var(--color-inverse-active-link);
-}
-a.z-link.z-link-active.z-link-black,
-button.z-link.z-link-active.z-link-black {
-  color: var(--color-black);
-  fill: var(--color-black);
-}
-a.z-link.z-link-disabled,
-button.z-link.z-link-disabled {
-  color: var(--color-disabled03);
-  fill: var(--color-disabled03);
-  cursor: default;
-  pointer-events: none;
-  text-decoration: none;
-  outline: none;
-}
-a.z-link.z-link-underline,
-button.z-link.z-link-underline {
-  text-decoration: underline;
-}
-a.z-link.z-link-inverse,
-button.z-link.z-link-inverse {
-  color: var(--color-inverse-link);
-  fill: var(--color-inverse-link);
-}
-a.z-link.z-link-inverse:hover,
-button.z-link.z-link-inverse:hover {
-  color: var(--color-inverse-hover-link);
-  fill: var(--color-inverse-hover-link);
-}
-a.z-link.z-link-inverse:active, a.z-link.z-link-inverse:focus,
-button.z-link.z-link-inverse:active,
-button.z-link.z-link-inverse:focus {
-  color: var(--color-inverse-pressed-link);
-  fill: var(--color-inverse-pressed-link);
-}
-a.z-link.z-link-inverse:visited,
-button.z-link.z-link-inverse:visited {
-  color: var(--color-inverse-visited-link);
-  fill: var(--color-inverse-visited-link);
-}
-a.z-link.z-link-black,
-button.z-link.z-link-black {
-  color: var(--gray800);
-  fill: var(--gray800);
-}
-a.z-link.z-link-black:hover:visited,
-button.z-link.z-link-black:hover:visited {
-  color: var(--gray800);
-  fill: var(--gray800);
-}
-a.z-link.z-link-black:hover, a.z-link.z-link-black.z-link-active:focus,
-button.z-link.z-link-black:hover,
-button.z-link.z-link-black.z-link-active:focus {
-  color: var(--color-black);
-  fill: var(--color-black);
-}
-a.z-link.z-link-black:active, a.z-link.z-link-black.z-link-active:active,
-button.z-link.z-link-black:active,
-button.z-link.z-link-black.z-link-active:active {
-  color: var(--gray700);
-  fill: var(--gray700);
-}
-a.z-link.z-link-black.z-link-disabled.z-link-active,
-button.z-link.z-link-black.z-link-disabled.z-link-active {
-  color: var(--color-disabled03);
-  fill: var(--color-disabled03);
-}
-a.z-link.z-link-white,
-button.z-link.z-link-white {
-  color: var(--color-white);
-  fill: var(--color-white);
-}
-a.z-link.z-link-white.z-link-disabled,
-button.z-link.z-link-white.z-link-disabled {
-  color: var(--color-disabled03);
-  fill: var(--color-disabled03);
-}
-a.z-link.z-link-icon,
-button.z-link.z-link-icon {
-  --z-icon-width: 1.125em;
-  --z-icon-height: 1.125em;
-  align-items: center;
-  column-gap: 0.5em;
-}
-a.z-link.z-link-sb,
-button.z-link.z-link-sb {
-  font-weight: var(--font-sb);
-}
-
-/*# sourceMappingURL=tokens.css.map */
-
-:root {
-  --color-background: var(--gray50);
-  --color-primary01: var(--blue500);
-  --color-primary02: var(--blue25);
-  --color-primary03: var(--blue50);
-  --color-secondary01: var(--blue500);
-  --color-secondary02: var(--red500);
-  --color-secondary03: var(--red500);
-  --color-danger01: var(--color-error-default);
-  --color-danger02: var(--color-error-default);
-  --color-error01: var(--color-error-default);
-  --color-error02: var(--red800);
-  --color-error-inverse: var(--red50);
-  --color-text-error: var(--color-error-default);
-  --color-success01: var(--color-success-default);
-  --color-success02: var(--green800);
-  --color-text-success: var(--color-success-default);
-  --color-success-inverse: var(--green50);
-  --color-warning01: var(--color-warning-default);
-  --color-warning02: var(--yellow800);
-  --color-text-warning: var(--color-warning-default);
-  --color-warning-inverse: var(--yellow50);
-  --color-surface01: var(--color-white);
-  --color-surface02: var(--gray50);
-  --color-surface03: var(--gray200);
-  --color-surface04: var(--gray700);
-  --color-surface05: var(--gray800);
-  --color-text01: var(--gray800);
-  --color-text02: var(--gray800);
-  --color-text03: var(--gray300);
-  --color-text04: var(--color-white);
-  --color-text05: var(--gray600);
-  --color-text-inverse: var(--color-white);
-  --color-icon01: var(--blue500);
-  --color-icon02: var(--gray800);
-  --color-icon03: var(--color-white);
-  --color-input-field01: var(--color-white);
-  --color-input-field02: var(--blue500);
-  --color-hover-primary: var(--blue800);
-  --color-hover-primary-text: var(--color-black);
-  --color-hover-secondary: var(--blue800);
-  --color-hover-tertiary: var(--blue800);
-  --color-hover-surface: var(--gray50);
-  --color-hover-light: var(--blue400);
-  --color-hover-danger: var(--red800);
-  --color-active-primary: var(--blue800);
-  --color-active-secondary: var(--blue800);
-  --color-active-tertiary: var(--blue800);
-  --color-active-surface: var(--gray300);
-  --color-active-light: var(--blue400);
-  --color-pressed-primary: var(--blue400);
-  --color-pressed-secondary: var(--red400);
-  --color-selected-surface: var(--gray300);
-  --color-selected-light: var(--gray300);
-  --color-highlight: var(--blue400);
-  --color-ghost01: var(--gray300);
-  --color-ghost02: var(--gray500);
-  --color-disabled01: var(--gray200);
-  --color-disabled02: var(--gray700);
-  --color-disabled03: var(--gray500);
-  --shadow-focus-primary: 0 0 0 1px var(--color-white),
-    0 0 4px 3px var(--color-highlight);
-  --color-link-primary: var(--blue500);
-  --color-hover-link: var(--blue800);
-  --color-active-link: var(--blue800);
-  --color-pressed-link: var(--blue400);
-  --color-visited-link: var(--blue800);
-  --color-inverse-link: var(--color-white);
-  --color-inverse-hover-link: var(--color-white);
-  --color-inverse-active-link: var(--color-white);
-  --color-inverse-pressed-link: var(--color-white);
-  --color-inverse-visited-link: var(--gray300);
-}
-
-/*# sourceMappingURL=default.css.map */
-
-.theme-black-yellow {
-  --color-background: var(--color-white);
-  --color-primary01: var(--gray950);
-  --color-primary02: var(--gray50);
-  --color-primary03: var(--gray100);
-  --color-secondary01: var(--yellow500);
-  --color-secondary02: var(--yellow500);
-  --color-secondary03: var(--yellow500);
-  --color-text01: var(--gray950);
-  --color-text02: var(--gray950);
-  --color-text-inverse: var(--color-white);
-  --color-input-field02: var(--gray950);
-  --color-icon01: var(--gray950);
-  --color-hover-primary: var(--gray800);
-  --color-hover-secondary: var(--gray950);
-  --color-hover-tertiary: var(--gray950);
-  --color-hover-surface: var(--gray50);
-  --color-hover-primary-text: var(--gray950);
-  --color-hover-light: var(--yellow500);
-  --color-active-primary: var(--gray800);
-  --color-active-secondary: var(--gray800);
-  --color-active-tertiary: var(--gray800);
-  --color-active-surface: var(--gray300);
-  --color-active-light: var(--gray400);
-  --color-pressed-primary: var(--gray800);
-  --color-highlight: var(--gray950);
-  --shadow-focus-primary: 0 0 0 1px var(--color-white),
-    0 0 4px 3px var(--color-highlight);
-  --color-link-primary: var(--gray950);
-  --color-hover-link: var(--gray800);
-  --color-active-link: var(--gray800);
-  --color-pressed-link: var(--gray400);
-  --color-visited-link: var(--gray800);
-}
-
-/*# sourceMappingURL=black-yellow.css.map */
-
-.theme-dark {
-  --color-surface01: var(--gray800);
-  --color-primary01: var(--color-white);
-  --color-primary02: #ffffff33;
-  --color-primary03: var(--gray100);
-  --color-hover-primary: var(--color-primary01);
-  --color-pressed-primary: var(--color-primary01);
-  --color-text02: var(--color-white);
-  --color-text-inverse: var(--gray800);
-  --color-input-field02: var(--gray800);
-  --color-link-primary: var(--color-white);
-  --color-hover-link: var(--color-link-primary);
-  --color-active-link: var(--color-link-primary);
-  --color-pressed-link: var(--color-link-primary);
-  --color-visited-link: var(--color-link-primary);
-  --color-error02: #ffc1bd;
-  --color-text-error: #ffc1bd;
-  --color-success02: #a8e168;
-  --color-text-success: #a8e168;
-  --color-warning02: #f7ca6a;
-  --color-text-warning: #f7ca6a;
-  background: var(--color-surface01);
-}
-
-/*# sourceMappingURL=dark-default.css.map */
-
-z-accordion + z-accordion {
-  border-top: none;
-}
-
-z-accordion[variant="background"]:first-of-type:not(:last-of-type),
-z-accordion[variant="background"]:first-of-type:not(:last-of-type)::part(summary),
-z-accordion[variant="background"]:first-of-type:not(:last-of-type)::part(summary)::before,
-z-accordion[variant="background"]:first-of-type:not(:last-of-type)::part(content)::before {
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-}
-
-z-accordion[variant="background"] + z-accordion[variant="background"],
-z-accordion[variant="background"] + z-accordion[variant="background"]::part(summary),
-z-accordion[variant="background"] + z-accordion[variant="background"]::part(summary)::before,
-z-accordion[variant="background"] + z-accordion[variant="background"]::part(content)::before {
-  border-radius: 0;
-}
-
-z-accordion[variant="background"] + z-accordion[variant="background"]:last-of-type {
-  border-bottom-left-radius: var(--border-radius);
-  border-bottom-right-radius: var(--border-radius);
-}
-
-z-accordion[variant="background"] + z-accordion[variant="background"]:last-of-type:not([open])::part(summary) {
-  /* border-radius of the accordion - width of the accordion's border */
-  border-bottom-right-radius: calc(var(--border-radius) - var(--border-size-small));
-}
-
-z-accordion[variant="background"] + z-accordion[variant="background"]:last-of-type:not([open])::part(summary),
-z-accordion[variant="background"] + z-accordion[variant="background"]:last-of-type:not([open])::part(summary)::before,
-z-accordion[variant="background"] + z-accordion[variant="background"]:last-of-type::part(content)::before {
-  /* border-radius of the accordion - width of the accordion's border */
-  border-bottom-left-radius: calc(var(--border-radius) - var(--border-size-small));
-}
-