@charset "UTF-8";
/* MIT License

Copyright (c) 2024 Tomáš Řezáč

https://github.com/Rezi/sugar-css

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

 */
/* VARIABLES
========================================================================
*/
:where(:root) {
  /* 0 - 4.5 */
  --s-multiplier-rounded: 1;
  /* 0.3 - 2 */
  --s-multiplier-sparsity: 1;
  /* 0 - 1 */
  --s-multiplier-fatness: 0;
  /* 0 - 2 */
  --s-multiplier-shadow: 1;
  --s-gap-default: calc(0.75rem + (0.25rem * var(--s-multiplier-sparsity)));
  --text-inline-padding-block: 0.125rem;
  --text-inline-padding-inline: 0.375rem;
  --s-line-height: 1.6;
  --s-focus-offset: 3px;
  --s-focus-offset-negative: -2px;
  --s-input-border-radius: calc(0.375rem * var(--s-multiplier-rounded));
  --s-checkbox-radius: calc(0.2rem + 0.05rem * var(--s-multiplier-rounded));
  --s-block-radius: calc(0.5rem * var(--s-multiplier-rounded));
  --s-input-padding-inline: calc(0.75rem + (1rem * var(--s-multiplier-rounded) / 10));
  --s-input-block-padding: 0.75rem;
  --s-tooltip-padding-inline: calc(0.75rem + (1rem * var(--s-multiplier-rounded) / 10));
  --s-tooltip-padding-block: calc(0.5rem + (1rem * var(--s-multiplier-rounded) / 10));
  --sugar-spacing-block: calc(2.5rem * var(--s-multiplier-sparsity));
  --sugar-base-spacing-inline: calc(0.25rem + (0.75rem * var(--s-multiplier-sparsity)));
  --sugar-spacing-inline: var(--sugar-base-spacing-inline);
  --sugar-spacing-list: 1rem;
  --container-width-number: 65;
  --container-width: calc(1rem * var(--container-width-number));
  --sugar-border-width: calc(1px + (1rem * var(--s-multiplier-fatness) / 5));
  --sugar-border-width-min: calc(1px + (1rem * var(--s-multiplier-fatness) / 10));
  --sugar-border-width-plus: calc(2px + (1rem * var(--s-multiplier-fatness) / 8));
  --s-border-width-max: calc(0.375rem + (1rem * var(--s-multiplier-fatness) / 2));
  --s-hr-height: calc(2px + (1rem * var(--s-multiplier-fatness)));
  --sugar-icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cpath fill='rgb(180, 40, 40)' d='M2.93 17.07A9.97 9.97 0 0 1-.123 9.877c0-5.523 4.477-10 10-10a9.968 9.968 0 0 1 7.19 3.05l.003.003a9.963 9.963 0 0 1 2.807 6.947c0 5.523-4.477 10-10 10-2.7 0-5.151-1.07-6.95-2.81l.003.003zm12.73-1.41A8.004 8.004 0 1 0 4.34 4.34a8.004 8.004 0 1 0 11.32 11.32zM9 5h2v6H9V5zm0 8h2v2H9v-2z'/%3E%3C/svg%3E");
  --sugar-icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cpath fill='rgb(30, 130, 0)' d='M2.93 17.07A9.97 9.97 0 0 1-.123 9.877c0-5.523 4.477-10 10-10a9.968 9.968 0 0 1 7.19 3.05l.003.003a9.963 9.963 0 0 1 2.807 6.947c0 5.523-4.477 10-10 10-2.7 0-5.151-1.07-6.95-2.81l.003.003zm12.73-1.41A8.004 8.004 0 1 0 4.34 4.34a8.004 8.004 0 1 0 11.32 11.32zM6.7 9.29 9 11.6l4.3-4.3 1.4 1.42L9 14.4l-3.7-3.7 1.4-1.42z'/%3E%3C/svg%3E");
  --sugar-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cpath fill='%23aaaaaa' d='M12.9 14.32a7.947 7.947 0 0 1-4.908 1.682 8 8 0 1 1 6.305-3.075l.013-.018 5.35 5.33-1.42 1.42-5.33-5.34zM8 14A6 6 0 1 0 8 2a6 6 0 1 0 0 12z'/%3E%3C/svg%3E");
  --sugar-icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cpath fill='%23ffffff' d='M1 4c0-1.1.9-2 2-2h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V4zm2 2v12h14V6H3zm2-6h2v2H5V0zm8 0h2v2h-2V0zM5 9h2v2H5V9zm0 4h2v2H5v-2zm4-4h2v2H9V9zm0 4h2v2H9v-2zm4-4h2v2h-2V9zm0 4h2v2h-2v-2z'/%3E%3C/svg%3E");
  --sugar-icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cpath fill='%23ffffff' d='M10 20C4.477 20 0 15.523 0 10S4.477 0 10 0s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 0 0 0-16 8 8 0 0 0 0 16zm-1-7.59V4h2v5.59l3.95 3.95-1.41 1.41L9 10.41z'/%3E%3C/svg%3E");
  --sugar-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='4'%3E%3Cpath fill='%23ffffff' d='M0 0h8L4 4'/%3E%3C/svg%3E");
  --sugar-icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cpath fill='%23ffffff' d='M10 8.586 2.929 1.515 1.515 2.929 8.586 10l-7.071 7.071 1.414 1.414L10 11.414l7.071 7.071 1.414-1.414L11.414 10l7.071-7.071-1.414-1.414L10 8.586z'/%3E%3C/svg%3E");
  --sugar-check-radio-size: 1.5rem;
  --sugar-check-radio-border-size: calc(var(--sugar-check-radio-size) / 3);
  --sugar-range-height: 0.375rem;
  --sugar-progress-height: 0.8rem;
  --sugar-nav-gap: 0.3rem 1rem;
}

@media screen and (min-width: 20rem) {
  :where(:root) {
    --sugar-spacing-inline: calc(
    	var(--sugar-base-spacing-inline) +
    		(1.5 * ((100vw - 20rem) / var(--container-width-number)) * var(--s-multiplier-sparsity))
    );
  }
}
/* COLORS 
========================================================================
*/
:where(:root) {
  --s-color-dark-theme-bg: #1a1a1a;
  --s-color-dark-theme-fg: #fff;
  --s-color-dark-theme-primary: #ff75b1;
  --s-color-dark-theme-primary-contrast: #000;
  --s-color-light-theme-bg: #fff;
  --s-color-light-theme-fg: #000;
  --s-color-light-theme-primary: #b1024e;
  --s-color-light-theme-primary-contrast: #fff;
}

:where(:root, .s-dark, .s-light) {
  --s-color-bg-95-fg: color-mix(in srgb, var(--s-color-bg) 95%, var(--s-color-fg));
  --s-color-bg-85-fg: color-mix(in srgb, var(--s-color-bg) 85%, var(--s-color-fg));
  --s-color-fg-65-bg: color-mix(in srgb, var(--s-color-fg) 65%, var(--s-color-bg));
  --s-color-text: var(--s-color-fg);
  --s-color-input-border: var(--s-color-fg-65-bg);
  --s-color-separator: var(--s-color-bg-85-fg);
  --s-color-primary-80-fg: color-mix(in srgb, var(--s-color-primary) 80%, var(--s-color-fg));
  --s-color-primary-40-bg: color-mix(in srgb, var(--s-color-primary) 40%, var(--s-color-bg));
  --s-color-shadow: color-mix(in srgb, var(--s-color-fg) 16%, transparent);
  --s-color-shadow-half: color-mix(in srgb, var(--s-color-fg) 8%, transparent);
  --s-box-shadow: 0 0 calc(2rem * var(--s-multiplier-shadow)) var(--s-color-shadow);
  --s-box-shadow-half: 0 0 calc(1rem * var(--s-multiplier-shadow)) var(--s-color-shadow-half);
  --s-color-bg-85-fg-primary: color-mix(
  	in srgb,
  	var(--s-color-bg-85-fg) 95%,
  	var(--s-color-primary)
  );
  --s-color-link: var(--s-color-primary);
  --s-color-mark: var(--s-color-primary-40-bg);
  --s-color-positive: rgb(28, 120, 0);
  --s-color-bg-positive: color-mix(in srgb, var(--s-color-positive) 10%, var(--s-color-bg));
  --s-color-negative: rgb(180, 40, 40);
  --s-color-bg-negative: color-mix(in srgb, var(--s-color-negative) 10%, var(--s-color-bg));
  /* Table */
  --s-color-bg-header-footer: var(--s-color-bg-95-fg);
  /* Article */
  --s-color-bg-article-footer: var(--s-color-bg-95-fg);
  --s-color-bg-article: var(--s-color-bg);
}

:where(.s-dark) {
  --s-color-bg: var(--s-color-dark-theme-bg);
  --s-color-fg: var(--s-color-dark-theme-fg);
  --s-color-primary: var(--s-color-dark-theme-primary);
  --s-color-primary-contrast: var(--s-color-dark-theme-primary-contrast);
  color: var(--s-color-text);
}

:where(:root, .s-light) {
  --s-color-bg: var(--s-color-light-theme-bg);
  --s-color-fg: var(--s-color-light-theme-fg);
  --s-color-primary: var(--s-color-light-theme-primary);
  --s-color-primary-contrast: var(--s-color-light-theme-primary-contrast);
  color: var(--s-color-text);
}

@media screen and (prefers-color-scheme: dark) {
  :where(:root) {
    --s-color-bg: var(--s-color-dark-theme-bg);
    --s-color-fg: var(--s-color-dark-theme-fg);
    --s-color-primary: var(--s-color-dark-theme-primary);
    --s-color-primary-contrast: var(--s-color-dark-theme-primary-contrast);
  }
}
/* FONT SIZING 
========================================================================
*/
@media screen and (min-width: 320px) {
  :where(html) {
    font-size: calc(100% + 2 * (100vw - 320px) / 960);
  }
}
@media screen and (min-width: 1280px) {
  :where(html) {
    font-size: calc(100% + 2px + 54 * (100vw - 1280px) / 10000);
  }
}
/* CORE 
========================================================================
*/
/**
 * 1. Add border box sizing in all browsers (opinionated).
 * 2. Backgrounds do not repeat by default (opinionated).
 */
*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  background-repeat: no-repeat; /* 2 */
}

/**
  * 1. Add text decoration inheritance in all browsers (opinionated).
  * 2. Add vertical alignment inheritance in all browsers (opinionated).
  */
::before,
::after {
  text-decoration: inherit; /* 1 */
  vertical-align: inherit; /* 2 */
}

/**
   * 1. Use the default cursor in all browsers (opinionated).
   * 2. Change the line height in all browsers (opinionated).
   * 3. Breaks words to prevent overflow in all browsers (opinionated).
   * 4. Use a 4-space tab width in all browsers (opinionated).
   * 5. Remove the grey highlight on links in iOS (opinionated).
   * 6. Prevent adjustments of font size after orientation changes in iOS.
   */
:where(:root) {
  cursor: default; /* 1 */
  line-height: var(--s-line-height); /* 2 */
  overflow-wrap: break-word; /* 3 */
  -moz-tab-size: 4; /* 4 */
  tab-size: 4; /* 4 */
  -webkit-tap-highlight-color: transparent; /* 5 */
  -webkit-text-size-adjust: 100%; /* 6 */
  text-size-adjust: 100%; /* 6 */
}

/**
  * Remove the margin in all browsers (opinionated).
  */
:where(body) {
  margin: 0;
  color: var(--s-color-text);
  background-color: var(--s-color-bg);
}

:where(p) {
  text-wrap: pretty;
}

/**
 * Restrict sizing to the page width in all browsers (opinionated).
 */
:where(iframe, img, input, video, select, textarea) {
  height: auto;
  max-width: 100%;
}

/*
  * Change the display on visually hidden accessible elements
  * in all browsers (opinionated).
  */
:where([aria-hidden=false i][hidden]) {
  display: initial;
}

:where([aria-hidden=false i][hidden]:not(:focus)) {
  clip: rect(0, 0, 0, 0);
  position: absolute;
}

/* Embedded content
  * ========================================================================== */
/*
  * Change the alignment on media elements in all browsers (opinionated).
  */
:where(audio, canvas, iframe, img, svg, video) {
  vertical-align: middle;
}

/**
  * Remove the border on iframes in all browsers (opinionated).
  */
:where(iframe) {
  border-style: none;
}

/**
  * Change the fill color to match the text color in all browsers (opinionated).
  */
:where(svg:not([fill])) {
  fill: currentColor;
}

/* FONT 
========================================================================
*/
/**
 * Add the correct system-ui font-family in Firefox.
 */
@font-face {
  font-family: system-ui;
  src: local(".AppleSystemUIFont"), local("Segoe UI"), local("Ubuntu"), local("Roboto-Regular"), local("HelveticaNeue");
}
@font-face {
  font-family: system-ui;
  font-style: italic;
  src: local(".AppleSystemUIFont"), local("Segoe UI Italic"), local("Ubuntu-Italic"), local("Roboto-Italic"), local("HelveticaNeue-Italic");
}
@font-face {
  font-family: system-ui;
  font-weight: bold;
  src: local(".AppleSystemUIFont"), local("Segoe UI Bold"), local("Ubuntu-Bold"), local("Roboto-Bold"), local("HelveticaNeue-Bold");
}
@font-face {
  font-family: system-ui;
  font-style: italic;
  font-weight: bold;
  src: local(".AppleSystemUIFont"), local("Segoe UI Bold Italic"), local("Ubuntu-BoldItalic"), local("Roboto-BoldItalic"), local("HelveticaNeue-BoldItalic");
}
/**
 * Use the default user interface font in all browsers (opinionated).
 */
:root {
  --font-family: system-ui;
}

:where(html) {
  font-family: var(--font-family), -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

/**
   * Use the default monospace user interface font in all browsers (opinionated).
   */
:where(code, kbd, samp, pre) {
  font-family: ui-monospace, "Menlo", "Consolas", "Roboto Mono", "Ubuntu Monospace", "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

/**
  * 1. Correct the inheritance and scaling of font size in all browsers.
  * 2. Correct the odd `em` font sizing in all browsers.
  * 3. Prevent overflow of the container in all browsers (opinionated).
  */
:where(pre) {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
  overflow: auto; /* 3 */
}

/* REDUCED MOTION
========================================================================
*/
/*
 * 1. Remove animations when motion is reduced (opinionated).
 * 2. Remove fixed background attachments when motion is reduced (opinionated).
 * 3. Remove timed scrolling behaviors when motion is reduced (opinionated).
 * 4. Remove transitions when motion is reduced (opinionated).
 */
@media (prefers-reduced-motion: reduce) {
  *,
  ::before,
  ::after {
    animation-delay: -1ms !important; /* 1 */
    animation-duration: 1ms !important; /* 1 */
    animation-iteration-count: 1 !important; /* 1 */
    background-attachment: initial !important; /* 2 */
    scroll-behavior: auto !important; /* 3 */
    transition-delay: 0s !important; /* 4 */
    transition-duration: 0s !important; /* 4 */
  }
}
@media (prefers-reduced-motion: no-preference) {
  :has(:target) {
    scroll-behavior: smooth;
    scroll-padding-top: var(--sugar-spacing-block);
  }
}
/* HEADLINES
========================================================================
*/
:where(h1, h2, h3, h4, h5, h6) {
  font-weight: 700;
  margin: 0 0 calc(1em * var(--s-multiplier-sparsity));
  text-wrap: balance;
}

:where(h1) {
  font-size: 2rem;
}

:where(h2) {
  font-size: 1.75rem;
}

:where(h3) {
  font-size: 1.375rem;
}

:where(h4) {
  font-size: 1.125rem;
}

:where(h5) {
  font-size: 1rem;
}

:where(h6) {
  font-size: 1rem;
}

:where(hgroup) {
  margin-bottom: calc(var(--sugar-spacing-block) * var(--s-multiplier-sparsity));
}

:where(hgroup > *) {
  margin-bottom: 0;
}

:where(hgroup > :not(:first-child)) {
  color: var(--s-color-fg-65-bg);
  font-weight: normal;
}

/* TABLES
========================================================================
*/
/**
  * 1. Collapse border spacing in all browsers (opinionated).
  * 2. Correct table border color in Chrome, Edge, and Safari.
  * 3. Remove text indentation from table contents in Chrome, Edge, and Safari.
  */
:where(table) {
  --table-padding: 0.75rem 1rem;
  border-collapse: collapse; /* 1 */
  border-color: currentColor; /* 2 */
  text-indent: 0; /* 3 */
  width: 100%;
  margin-bottom: var(--sugar-spacing-block);
}

:where(*:has(> table)) {
  overflow-x: auto;
}

:where(td, th) {
  padding: var(--table-padding);
  vertical-align: top;
  text-align: left;
}

:where(thead, tfoot) :where(th, td) {
  background-color: var(--s-color-bg-header-footer);
}

:where(thead, tr:not(:last-child)) :where(th, td) {
  border-bottom: var(--sugar-border-width) solid var(--s-color-separator);
}

:where(tfoot tr:first-child) :where(th, td) {
  border-top: var(--sugar-border-width) solid var(--s-color-separator);
}

:where(tbody) {
  background-color: var(--s-color-bg);
}

:where(caption) {
  text-transform: uppercase;
  color: var(--s-color-fg-65-bg);
  font-size: 0.75rem;
  padding-block: 0.5rem;
  background-color: inherit;
}

/* TEXT INLINE
========================================================================
*/
/**
  * Add the correct font size in all browsers.
  */
:where(small) {
  font-size: 80%;
}

:where(abbr[title]) {
  text-decoration: none;
  border-bottom: var(--sugar-border-width-min) dotted;
  cursor: help;
}

/**
   * Add the correct font weight in Chrome, Edge, and Safari.
   */
:where(b, strong, var) {
  font-weight: bolder;
}

:where(u, ins, a) {
  text-decoration: none;
  border-bottom: var(--sugar-border-width-min) solid;
}

:where(a) {
  color: var(--s-color-link);
  outline-offset: var(--s-focus-offset);
}

:where(mark, del, code, kbd, samp, ins) {
  padding: var(--text-inline-padding-block) var(--text-inline-padding-inline);
}

:where(kbd) {
  --shadow-offset: 0.075rem;
  padding-bottom: calc(var(--text-inline-padding-block) + var(--shadow-offset));
  box-shadow: inset calc(var(--shadow-offset) * -1) calc(var(--shadow-offset) * -1) 0 0.125rem var(--s-color-fg-65-bg);
}

:where(mark) {
  background-color: var(--s-color-mark);
  color: var(--s-color-fg);
}

:where(del) {
  background-color: var(--s-color-bg-negative);
  color: var(--s-color-negative);
}

:where(ins) {
  background-color: var(--s-color-bg-positive);
  color: var(--s-color-positive);
}

/**
  * 1. Correct the inheritance and scaling of font size in all browsers.
  * 2. Correct the odd `em` font sizing in all browsers.
  */
:where(code, kbd, samp) {
  font-family: monospace, monospace; /* 1 */
  font-size: 1rem; /* 2 */
  background-color: var(--s-color-bg-85-fg);
  color: var(--s-color-fg-65-bg);
  border-radius: 0.25rem;
}

/* GRID
========================================================================
*/
:where(*:has(> .s-grid > *)) {
  /* This is a fix for negative margin-block of the grid, 
  which could be visible when background is applied to grid's wrapper */
  padding-block-start: 0.02px;
}

:where(.s-grid) {
  --span: 1;
  --offset: 0;
  --gap: var(--s-gap-default);
  --padding: 0rem;
  --gap-half: calc(var(--gap) / 2);
  /* In case of nested grids, it is necessary to reset spans and offsets so they don't inherit them */
  --span-2: initial;
  --offset-2: initial;
  --span-3: initial;
  --offset-3: initial;
  --span-4: initial;
  --offset-4: initial;
  --span-5: initial;
  --offset-5: initial;
  --span-6: initial;
  --offset-6: initial;
  --span-7: initial;
  --offset-7: initial;
  --span-8: initial;
  --offset-8: initial;
  --span-9: initial;
  --offset-9: initial;
  --span-10: initial;
  --offset-10: initial;
  --span-11: initial;
  --offset-11: initial;
  --span-12: initial;
  --offset-12: initial;
  container-type: inline-size;
  container-name: s-grid;
  margin: calc(var(--gap-half) * -1);
}

:where(.s-grid > *) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(5rem, 1fr));
}

:where(.s-grid.s-fixed > *) {
  grid-template-columns: repeat(auto-fill, minmax(5rem, 1fr));
}

:where(.s-grid > * > *) {
  --max-span: 1;
  --span-1f: var(--span);
  --offset-1f: var(--offset);
  --span-result: 1;
  --span-plus-offset: calc(var(--span-result) + var(--offset-result));
  grid-column: span min(var(--max-span), var(--span-plus-offset));
  margin: var(--gap-half);
  margin-inline-start: calc(100% / var(--span-plus-offset) * var(--offset-result) + var(--gap-half));
  padding: var(--padding);
}

:where(.s-grid:has(+ .s-grid)) {
  margin-bottom: calc(var(--gap) / 2);
}

@container s-grid (min-width: 10rem) {
  :where(.s-grid > * > *) {
    --max-span: 2;
    --span-2f: var(--span-2, var(--span-1f));
    --offset-2f: var(--offset-2, var(--offset-1f));
    --span-result: var(--span-2f);
    --offset-result: var(--offset-2f);
  }
}
@container s-grid (min-width: 15rem) {
  :where(.s-grid > * > *) {
    --max-span: 3;
    --span-3f: var(--span-3, var(--span-2f));
    --offset-3f: var(--offset-3, var(--offset-2f));
    --span-result: var(--span-3f);
    --offset-result: var(--offset-3f);
  }
}
@container s-grid (min-width: 20rem) {
  :where(.s-grid > * > *) {
    --max-span: 4;
    --span-4f: var(--span-4, var(--span-3f));
    --offset-4f: var(--offset-4, var(--offset-3f));
    --span-result: var(--span-4f);
    --offset-result: var(--offset-4f);
  }
}
@container s-grid (min-width: 25rem) {
  :where(.s-grid > * > *) {
    --max-span: 5;
    --span-5f: var(--span-5, var(--span-4f));
    --offset-5f: var(--offset-5, var(--offset-4f));
    --span-result: var(--span-5f);
    --offset-result: var(--offset-5f);
  }
}
@container s-grid (min-width: 30rem) {
  :where(.s-grid > * > *) {
    --max-span: 6;
    --span-6f: var(--span-6, var(--span-5f));
    --offset-6f: var(--offset-6, var(--offset-5f));
    --span-result: var(--span-6f);
    --offset-result: var(--offset-6f);
  }
}
@container s-grid (min-width: 35rem) {
  :where(.s-grid > * > *) {
    --max-span: 7;
    --span-7f: var(--span-7, var(--span-6f));
    --offset-7f: var(--offset-7, var(--offset-6f));
    --span-result: var(--span-7f);
    --offset-result: var(--offset-7f);
  }
}
@container s-grid (min-width: 40rem) {
  :where(.s-grid > * > *) {
    --max-span: 8;
    --span-8f: var(--span-8, var(--span-7f));
    --offset-8f: var(--offset-8, var(--offset-7f));
    --span-result: var(--span-8f);
    --offset-result: var(--offset-8f);
  }
}
@container s-grid (min-width: 45rem) {
  :where(.s-grid > * > *) {
    --max-span: 9;
    --span-9f: var(--span-9, var(--span-8f));
    --offset-9f: var(--offset-9, var(--offset-8f));
    --span-result: var(--span-9f);
    --offset-result: var(--offset-9f);
  }
}
@container s-grid (min-width: 50rem) {
  :where(.s-grid > * > *) {
    --max-span: 10;
    --span-10f: var(--span-10, var(--span-9f));
    --offset-10f: var(--offset-10, var(--offset-9f));
    --span-result: var(--span-10f);
    --offset-result: var(--offset-10f);
  }
}
@container s-grid (min-width: 55rem) {
  :where(.s-grid > * > *) {
    --max-span: 11;
    --span-11f: var(--span-11, var(--span-10f));
    --offset-11f: var(--offset-11, var(--offset-10f));
    --span-result: var(--span-11f);
    --offset-result: var(--offset-11f);
  }
}
@container s-grid (min-width: 60rem) {
  :where(.s-grid > * > *) {
    --max-span: 12;
    --span-12f: var(--span-12, var(--span-11f));
    --offset-12f: var(--offset-12, var(--offset-11f));
    --span-result: var(--span-12f);
    --offset-result: var(--offset-12f);
  }
}
/* CARD 
========================================================================
*/
:where(article) {
  --inner-border-radius: calc(var(--s-block-radius) - var(--sugar-border-width));
  padding: var(--sugar-spacing-block) var(--sugar-spacing-inline);
  box-shadow: var(--s-box-shadow);
  margin-bottom: calc(var(--sugar-spacing-block) * 1.5);
  border-radius: var(--s-block-radius);
  background: var(--s-color-bg-article);
  border: var(--sugar-border-width) solid var(--s-color-bg-85-fg);
}

:where(article > header, article > footer) {
  margin-inline: calc(var(--sugar-spacing-inline) * -1);
}

:where(article > header) {
  padding: var(--sugar-spacing-block) var(--sugar-spacing-inline);
  border-radius: var(--inner-border-radius) var(--inner-border-radius) 0 0;
  margin-block: calc(var(--sugar-spacing-block) * -1) var(--sugar-spacing-block);
}

:where(article > footer) {
  margin-block: var(--sugar-spacing-block) calc(var(--sugar-spacing-block) * -1);
  border-radius: 0 0 var(--inner-border-radius) var(--inner-border-radius);
}

:where(article > header, body > header) {
  border-bottom: var(--sugar-border-width) solid var(--s-color-bg-85-fg);
}

:where(article > header) {
  background-color: var(--s-color-bg-article-footer);
}

:where(article > footer, body > footer) {
  border-top: var(--sugar-border-width) solid var(--s-color-bg-85-fg);
  background-color: var(--s-color-bg-article-footer);
}

:where(article > footer) {
  padding: var(--sugar-spacing-block) var(--sugar-spacing-inline);
}

/* LAYOUT
========================================================================
*/
:where(.s-container) {
  padding-inline: var(--sugar-spacing-inline);
  margin-inline: calc((100dvw - min(100dvw, var(--container-width))) / 2);
  /* this way  the container is still the same width,
  no matter whether there is a scrollbar or not */
}

:where(body > header) {
  background-color: var(--s-color-bg);
}

:where(body > footer) {
  padding: var(--sugar-spacing-block) 0;
  box-shadow: var(--s-box-shadow-half);
  margin-top: auto;
}

:where(body > header) {
  position: sticky;
  width: 100%;
  z-index: 1;
  top: 0;
  /* padding-top added in order to avoid margin collapsing, 
     In case of child with margin would define height of the header */
  padding-top: 0.02px;
  box-shadow: var(--s-box-shadow-half);
}

:where(body > header + *) {
  padding-top: var(--sugar-spacing-block);
}

:where(body > :has(+ footer)) {
  padding-bottom: var(--sugar-spacing-block);
}

:where(body:has(> footer)) {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* MARGINS
========================================================================
*/
:where(section) {
  margin-bottom: var(--sugar-spacing-block);
}

/* Don't apply margin top for following */
:where(h1, h2, h3, h4, h5, h6, hgroup, dl, article, section, table, p) {
  margin-block-start: 0;
}

/* Don't apply margin bottom if the element is the last of its parent */
:where(h1, h2, h3, h4, h5, h6, hgroup, dl, article, section, table, p):last-child {
  margin-block-end: 0;
}

/* FORMS
========================================================================
*/
/**
  * Remove the margin on controls in Safari.
  */
:where(button, input, select) {
  margin: 0;
}

/**
    * Correct the inability to style buttons in iOS and Safari.
    */
:where(button, [type=button i], [type=reset i], [type=submit i]) {
  -webkit-appearance: button;
}

/**
    * Change the inconsistent appearance in all browsers (opinionated).
    */
:where(fieldset) {
  --fieldset-radius: calc(var(--s-input-border-radius) * 1.5);
  --fieldset-padding: calc(0.5rem + (var(--sugar-spacing-inline) * 0.375));
  border: var(--sugar-border-width) solid var(--s-color-bg-85-fg);
  border-radius: var(--fieldset-radius);
  padding: var(--fieldset-padding);
}

:where(fieldset:has(> legend)) {
  --legend-height: calc((var(--s-input-block-padding) / 2) + (0.5rem * var(--s-line-height)));
  margin-top: calc(var(--fieldset-padding) + var(--legend-height));
}

:where(legend) {
  /* color: var(--s-color-primary-80-fg);
  padding: calc(var(--s-input-block-padding) / 2) var(--s-input-padding-inline); */
  color: var(--s-color-primary-80-fg);
  padding: calc(var(--s-input-block-padding) / 2) var(--s-input-padding-inline);
  border: var(--sugar-border-width) solid var(--s-color-bg-85-fg);
  border-bottom: 0;
  translate: 0 calc(var(--sugar-border-width) / 2 - 50%);
  line-height: 0;
  padding-top: var(--legend-height);
  border-radius: calc(var(--fieldset-radius) * 0.5) calc(var(--fieldset-radius) * 0.5) 0 0;
  margin-inline-start: var(--s-input-border-radius);
}

/**
    * 1. Remove the margin in Firefox and Safari.
    * 3. Change the resize direction in all browsers (opinionated).
    */
:where(textarea) {
  margin: 0; /* 1 */
  resize: vertical; /* 3 */
}

/**
    * Correct the cursor style of increment and decrement buttons in Safari.
    */
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/**
    * Correct the text style of placeholders in Chrome, Edge, and Safari.
    */
::-webkit-input-placeholder {
  color: inherit;
  opacity: 0.54;
}

/**
    * Remove the inner padding in Chrome, Edge, and Safari on macOS.
    */
::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
    * 1. Correct the inability to style upload buttons in iOS and Safari.
    * 2. Change font properties to `inherit` in Safari.
    */
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/**
 * 1. Change the inconsistent appearance in all browsers (opinionated).
 * 2. Add typography inheritance in all browsers (opinionated).
 */
:where(button,
input,
select,
textarea,
[type=button i],
[type=reset i],
[type=submit i],
[role=button i],
summary[role=button i]) {
  background-color: var(--s-color-bg);
  border: var(--sugar-border-width) solid var(--s-color-input-border); /* 1 */
  color: inherit; /* 1 */
  font: inherit; /* 2 */
  letter-spacing: inherit; /* 2 */
  word-spacing: inherit; /* 2 */
  padding: var(--s-input-block-padding) var(--s-input-padding-inline); /* 1 */
  border-radius: var(--s-input-border-radius);
}

:where([role=button i]:not(summary)) {
  display: inline-block;
  text-align: center;
}

:where(input:not([type=checkbox], [type=radio]), select, textarea, button) {
  width: 100%;
}

:where(button,
input,
select,
textarea,
[role=button i],
[type=reset i],
[type=submit i]):disabled {
  background-color: var(--s-color-bg-85-fg);
}

:where(button, [role=button i], [type=reset i], [type=submit i]):disabled {
  border-color: var(--s-color-bg-85-fg);
}

:where(input, textarea):where([aria-invalid]),
:where(select,
input[type=datetime-local],
input[type=date],
input[type=month],
input[type=week],
input[type=time],
input[type=search]) {
  -webkit-appearance: none;
  appearance: none;
  background-position: center right var(--s-input-padding-inline);
  background-size: 1.2rem;
  background-repeat: no-repeat;
  padding-right: 2.5rem;
}

:where(input, textarea):where([aria-invalid=true]) {
  background-image: var(--sugar-icon-invalid);
  border-color: var(--s-color-negative);
}

:where(input, textarea):where([aria-invalid=false]) {
  background-image: var(--sugar-icon-valid);
  border-color: var(--s-color-positive);
}

/**
   * Change the inconsistent appearance in all browsers (opinionated).
   */
:where(select) {
  background-size: 1rem;
  background-image: var(--sugar-chevron);
}

:where(select[multiple]) {
  background-image: none;
}

:where(button,
[type=button i],
[type=reset i],
[type=submit i],
[role=button i],
summary[role=button i]) {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--s-color-primary);
  color: var(--s-color-primary-contrast);
  border: var(--sugar-border-width) solid var(--s-color-primary);
  cursor: pointer;
  transition: background-color 0.25s;
}

:where(button, [type=button i], [type=reset i], [type=submit i], [role=button i]):where(.s-outline) {
  background-color: var(--s-color-primary-contrast);
  color: var(--s-color-primary);
  border: var(--sugar-border-width) solid var(--s-color-primary);
}

:where(button, [type=button i], [type=reset i], [type=submit i], [role=button i]):where(:hover) {
  background-color: var(--s-color-primary-80-fg);
  border-color: var(--s-color-primary-80-fg);
  color: var(--s-color-primary-contrast);
}

:where(button, [type=button i], [type=reset i], [type=submit i], [role=button i]):where(.s-secondary) {
  filter: saturate(0.5);
}

/* File input */
:where([type=file i]) {
  padding: calc(var(--s-input-block-padding) / 2);
  display: flex;
  align-items: center;
}

::file-selector-button {
  height: 100%;
  margin-inline-end: 1rem;
  border-radius: calc(var(--s-input-border-radius) * 0.8);
  border: var(--sugar-border-width) solid;
  padding-inline: var(--s-input-padding-inline);
  line-height: 0;
  background-color: var(--s-color-bg);
  color: var(--s-color-fg);
}

/* Color input */
:where(input[type=color i]) {
  padding: calc(var(--s-input-block-padding) / 2);
}

::-webkit-color-swatch-wrapper {
  padding: 0;
}

::-webkit-color-swatch {
  border-radius: calc(var(--s-input-border-radius) * 0.8);
}

::-moz-color-swatch {
  border-radius: calc(var(--s-input-border-radius) * 0.8);
}

:where(input[type=file i], [type=color i]) {
  height: calc(var(--s-input-block-padding) * 2 + var(--s-line-height) * 1rem + 2 * var(--sugar-border-width));
  box-sizing: border-box;
}

:where(label) {
  display: block;
}

:where(label) > :where(input, select, textarea, progress),
:where(label) + :where(input, select, textarea, progress) {
  margin-top: calc(var(--s-input-block-padding) / 3);
}

/**
   * Progress

    * Add the correct vertical alignment in Chrome, Edge, and Firefox.
    */
:where(progress) {
  --sugar-progress-radius: calc(var(--sugar-progress-height) / 2);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%;
  overflow: hidden;
  display: inline-block;
  vertical-align: baseline;
  height: var(--sugar-progress-height);
  border-radius: var(--sugar-progress-radius);
  background-color: var(--s-color-bg-85-fg-primary);
  border: 0;
}

:where(progress)::-webkit-progress-bar {
  background: none;
}

:where(progress):indeterminate::-moz-progress-bar {
  background: none;
}

:where(progress)::-webkit-progress-value {
  background-color: var(--s-color-primary);
}

:where(progress)::-moz-progress-bar {
  background-color: var(--s-color-primary);
}

:where(progress):indeterminate {
  background: var(--s-color-bg-85-fg-primary) linear-gradient(to right, var(--s-color-primary) 20%, var(--s-color-bg-85-fg-primary) 20%) left/200% no-repeat;
  animation: progress-bar 1.3s infinite;
}

@keyframes progress-bar {
  0% {
    background-position: 40% 0;
  }
  100% {
    background-position: -100% 0;
  }
}
/* Radios and checkboxes */
:where(input[type=radio], input[type=checkbox]) {
  appearance: none;
  vertical-align: middle;
  border-radius: 50%;
  width: var(--sugar-check-radio-size);
  height: var(--sugar-check-radio-size);
  border: var(--sugar-border-width-plus) solid var(--s-color-input-border);
  transition: 0.2s all linear;
  margin: 0;
  margin-inline-end: var(--s-input-block-padding);
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
}

:where(label:has(input[type=radio], input[type=checkbox])) {
  display: flex;
  align-items: center;
}

:where(input[type=radio]):checked {
  border: var(--sugar-check-radio-border-size) solid var(--s-color-primary);
}

:where(input[type=checkbox]:not([role=switch i])) {
  border-radius: var(--s-checkbox-radius);
  display: grid;
  place-content: center;
}

:where(input[type=checkbox]:not([role=switch i]))::before {
  content: "";
  width: calc(var(--sugar-check-radio-size) / 1.6);
  height: calc(var(--sugar-check-radio-size) / 1.6);
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
  transform: scale(0);
  transform-origin: bottom left;
  transition: 0.1s transform ease-in-out;
  background-color: var(--s-color-primary);
}

:where(input[type=checkbox]:not([role=switch i])):checked::before {
  transform: scale(1);
}

:where(input[type=checkbox]):focus {
  outline: 2px solid -webkit-focus-ring-color;
  outline-offset: var(--s-focus-offset);
}

:where(input[type=datetime-local], input[type=date], input[type=month], input[type=week]) {
  padding-inline-end: var(--s-input-padding-inline);
}

:where(input[type=datetime-local], input[type=date], input[type=month], input[type=week]) {
  background-image: var(--sugar-icon-date);
}

:where(input[type=time]) {
  background-image: var(--sugar-icon-time);
}

/* prepare inputs with black icons to be black in lightmode */
:where(input[type=time],
input[type=datetime-local],
input[type=date],
input[type=month],
input[type=week],
select) {
  background-blend-mode: difference;
}

:where(input[type=search i]) {
  background-image: var(--sugar-icon-search);
  -webkit-appearance: textfield; /* 1 */
}

/**
    * Correct the outline style in Safari.
    */
_::-webkit-full-page-media,
:where(input[type=search i]) {
  outline-offset: var(--s-focus-offset-negative); /* 2 */
}

/* input button combo */
:where(:has(> input:not([type=radio], [type=checkbox]):first-child:nth-last-child(2)):has(> :where(button,
[type=button i],
[type=reset i],
[type=submit i]):last-child:nth-child(2))) {
  display: flex;
}
:where(:has(> input:not([type=radio], [type=checkbox]):first-child:nth-last-child(2)):has(> :where(button,
[type=button i],
[type=reset i],
[type=submit i]):last-child:nth-child(2))) :first-child {
  border-radius: 0;
  border-start-start-radius: var(--s-input-border-radius);
  border-end-start-radius: var(--s-input-border-radius);
  border-inline-end: 0;
}
:where(:has(> input:not([type=radio], [type=checkbox]):first-child:nth-last-child(2)):has(> :where(button,
[type=button i],
[type=reset i],
[type=submit i]):last-child:nth-child(2))) :last-child {
  max-width: min-content;
  white-space: nowrap;
  border-radius: 0;
  border-start-end-radius: var(--s-input-border-radius);
  border-end-end-radius: var(--s-input-border-radius);
}

/* base for unifying input indicators */
:where(input[type=datetime-local],
input[type=date],
input[type=month],
input[type=week],
input[type=time])::-webkit-calendar-picker-indicator {
  opacity: 0;
}

/* Avoid custom icons for mozilla as it is buggy */
@-moz-document url-prefix() {
  [type=date],
  [type=datetime-local],
  [type=month],
  [type=time],
  [type=week] {
    background-image: none !important;
  }
}
/* Range slider */
:where(input[type=range i]) {
  --c: var(--s-color-primary);
  --g: 0.25rem; /* the gap */
  --l: var(--sugar-range-height); /* line thickness*/
  --s: var(--sugar-check-radio-size); /* thumb size*/
  border-width: 0;
  padding: 0;
  width: 100%;
  height: var(--s);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: none;
  cursor: pointer;
  overflow: hidden;
  --polygon: polygon(
  	0 calc(50% + var(--l) / 2),
  	-100vw calc(50% + var(--l) / 2),
  	-100vw calc(50% - var(--l) / 2),
  	0 calc(50% - var(--l) / 2),
  	0 0,
  	100% 0,
  	100% calc(50% - var(--l) / 2),
  	100vw calc(50% - var(--l) / 2),
  	100vw calc(50% + var(--l) / 2),
  	100% calc(50% + var(--l) / 2),
  	100% 100%,
  	0 100%
  );
}

:where(input):focus-visible,
:where(input):hover {
  --c: var(--s-color-primary-80-fg);
}

:where(input):active,
:where(input):focus-visible {
  --_b: var(--s);
}

:where(input[type=range i])::-webkit-slider-thumb {
  height: var(--s);
  aspect-ratio: 1;
  border-radius: 50%;
  box-shadow: 0 0 0 var(--_b, var(--sugar-check-radio-border-size)) inset var(--c);
  border-image: linear-gradient(90deg, var(--c) 50%, var(--s-color-bg-85-fg-primary) 0) 1/0 100vw/0 calc(100vw + var(--g));
  clip-path: var(--polygon);
  -webkit-appearance: none;
  appearance: none;
  transition: 0.3s;
}

:where(input[type=range])::-moz-range-thumb {
  height: var(--s);
  width: var(--s);
  background: none;
  border-radius: 50%;
  box-shadow: 0 0 0 var(--_b, var(--sugar-check-radio-border-size)) inset var(--c);
  border-image: linear-gradient(90deg, var(--c) 50%, var(--s-color-bg-85-fg-primary) 0) 1/0 100vw/0 calc(100vw + var(--g));
  clip-path: var(--polygon);
  -moz-appearance: none;
  appearance: none;
  transition: 0.3s;
}

/*
  * Change the cursor on disabled, not-editable, or otherwise
  * inoperable elements in all browsers (opinionated).
  */
:where([aria-disabled=true i], [disabled]) {
  cursor: not-allowed;
}

/* Checkbox switch */
:where(input[type=checkbox i][role=switch i]) {
  --dot-gap: 0.15rem;
  --dot-size: calc(
  	var(--sugar-check-radio-size) - 2 * (var(--dot-gap) + var(--sugar-border-width-plus))
  );
  --switch-width: calc(var(--sugar-check-radio-size) * 2);
  --dot-move: calc(var(--switch-width) - var(--sugar-check-radio-size));
  height: var(--sugar-check-radio-size);
  width: var(--switch-width);
  border-radius: calc(var(--sugar-check-radio-size) / 2);
  border: var(--sugar-border-width-plus) solid var(--s-color-input-border);
  position: relative;
  background-color: var(--s-color-primary-contrast);
  display: flex;
  justify-content: left;
}

:where(input[type=checkbox i][role=switch i])::before {
  content: "";
  display: block;
  position: absolute;
  transform: translateX(var(--dot-gap));
  top: var(--dot-gap);
  height: var(--dot-size);
  width: var(--dot-size);
  border-radius: 50%;
  background-color: var(--s-color-primary);
  transition: transform 0.3s, background-color 0.3s;
}

:where(input[type=checkbox i][role=switch i]:checked)::before {
  transform: translateX(calc(var(--dot-gap) + var(--dot-move)));
  background-color: var(--s-color-primary-contrast);
}

:where(input[type=checkbox i][role=switch i]:checked) {
  background-color: var(--s-color-primary);
}

/* LISTS
========================================================================
*/
/**
  * Remove the margin on nested lists in Chrome, Edge, and Safari.
  */
:where(dl, ol, ul) :where(dl, ol, ul) {
  margin: 0;
}

:where(dl) {
  --dl-width: 9rem;
  --dd-min-width: 70%;
  --dl-gap: 1rem;
  display: flex;
  gap: var(--dl-gap);
  flex-wrap: wrap;
}

:where(dt) {
  width: var(--dl-width);
}

:where(dd) {
  flex: 1 0 var(--dd-min-width);
  margin: 0 0 1rem;
  min-width: calc(100% - var(--dl-width) - var(--dl-gap) - 1px);
}

:where(dd:last-child) {
  margin: 0;
}

/* BLOCKQUOTE
========================================================================
*/
:where(blockquote) {
  border-inline-start: var(--s-border-width-max) var(--s-color-primary) solid;
  padding-inline: 1rem 0;
  padding-block: 1rem;
  margin-inline: 0;
}

:where(blockquote > footer) {
  padding-top: calc(var(--sugar-spacing-block) / 3);
  color: var(--s-color-fg-65-bg);
}

/* FIGURE 
========================================================================
*/
:where(figure) {
  margin: 0;
}

:where(figcaption) {
  text-transform: uppercase;
  color: var(--s-color-fg-65-bg);
  font-size: 0.75rem;
  padding-top: 0.2rem;
}

/* HORIZONTAL RULE
========================================================================
*/
:where(hr) {
  margin-block: var(--sugar-spacing-block);
  height: var(--s-hr-height);
  background-color: var(--s-color-separator);
  border: 0;
}

:where(article > hr) {
  margin-inline: calc(var(--sugar-spacing-inline) * -1);
}

/* Accordion 
========================================================================
*/
:where(details summary:not([role=button i])) {
  font-weight: 600;
}

:where(details summary) {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}

:where(details:not(:last-of-type)) {
  margin-bottom: var(--sugar-spacing-list);
}

:where(details:not(:last-of-type) summary) {
  padding-bottom: var(--sugar-spacing-list);
}

:where(details:not([open]):not(:last-of-type) summary:not([role=button i])) {
  padding-bottom: var(--sugar-spacing-list);
}

:where(details:not(:last-of-type):has(summary:not([role=button i]))) {
  border-bottom: var(--sugar-border-width) solid var(--s-color-separator);
}

:where(details summary):after {
  --chevron-size: 0.8rem;
  content: "";
  margin-inline: 0.8rem 0.3rem;
  width: var(--chevron-size);
  height: var(--chevron-size);
  border: solid currentColor;
  border-width: 0 0 var(--sugar-border-width-plus) var(--sugar-border-width-plus);
  transform: rotate(-45deg) translateY(-30%);
  transition: transform 0.3s;
  flex-shrink: 0;
}

:where(details[open] summary):after {
  transform: rotate(45deg);
}

:where(details:not(:last-of-type):has(summary:not([role=button i])) > :not(summary)) {
  padding-block-end: var(--sugar-spacing-list);
}

:where(details:last-of-type > :not(summary),
details:has(summary[role=button i]) > :not(summary)) {
  padding-block-start: var(--sugar-spacing-list);
}

/* Card Accordion */
article:has(> details:only-child) {
  padding: 0;
  margin-bottom: var(--sugar-spacing-list);
}

article > details:only-child {
  margin: calc(var(--sugar-border-width) * -1);
}

article:has(> details:only-child) > details[open] > summary {
  margin: 0;
  border-end-end-radius: 0;
  border-end-start-radius: 0;
}

article > details:only-child > :not(summary) {
  padding: var(--sugar-spacing-block) var(--sugar-spacing-inline);
}

article > details:only-child > summary {
  padding: var(--s-input-block-padding) var(--s-input-padding-inline);
}

/* Animation */
:where(details)::details-content {
  interpolate-size: allow-keywords;
  overflow: hidden;
  block-size: 0;
  transition: block-size 0.3s, content-visibility 0.3s;
  transition-behavior: allow-discrete;
}

:where(details[open])::details-content {
  block-size: auto;
}

/* NAVIGATION
========================================================================
*/
:where(menu) {
  list-style-type: none;
  padding: 0;
}

/**
  * Prevent VoiceOver from ignoring list semantics in Safari (opinionated).
  */
:where(nav li)::before {
  content: "​";
  float: left;
}

:where(nav:has(> menu), nav menu) {
  display: flex;
  align-items: center;
  gap: var(--sugar-nav-gap);
}

:where(nav:has(> menu) a) {
  border-bottom: none;
}

:where(aside nav:has(> menu), aside nav menu) {
  flex-direction: column;
  align-items: flex-start;
}

:where(nav:has(> menu)) {
  justify-content: space-between;
}

/* Breadcrumb */
:where(nav[aria-label=breadcrumb] > ol) {
  display: flex;
  justify-content: start;
  list-style: none;
  padding-inline-start: 0;
  flex-wrap: wrap;
}

:where(nav[aria-label=breadcrumb] > ol > li) {
  white-space: nowrap;
}

:where(nav[aria-label=breadcrumb] > ol > li:not(:last-child)):after {
  content: "/";
  display: inline;
  padding-inline: var(--text-inline-padding-inline);
}

:where(nav[aria-label=breadcrumb] > ol > li a[aria-current=page]) {
  border-bottom: none;
  color: var(--s-color-text);
}

/* DIALOG 
========================================================================
*/
:where(dialog) {
  padding: 0;
  border: none;
  border-radius: var(--s-block-radius);
  color: var(--s-color-text);
}

:where(dialog:not(:modal)) {
  --padding: calc(var(--sugar-spacing-inline) / 2);
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9;
  border: 1px solid var(--s-color-fg);
}

:where(dialog)::backdrop {
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

:where(dialog:not([open])) {
  display: none;
}

:where(body:has(dialog:modal[open])) {
  overflow: hidden;
}

:where(dialog:modal > article, dialog:modal > form > article) {
  max-width: 40rem;
  max-height: calc(100dvh - var(--padding) * 2);
  overflow: auto;
}

:where(dialog > article, dialog > form > article) :where(header:has(> button[aria-label]:last-child) *) {
  margin-bottom: 0;
}

:where(dialog > article, dialog > form > article) :where(header:has(> button[aria-label]:last-child)) {
  display: flex;
  gap: var(--s-gap-default);
  justify-content: space-between;
  align-items: center;
}

:where(dialog > article, dialog > form > article) :where(header > button[aria-label]:last-child) {
  --icon-size: 1.4rem;
  padding: 0;
  border: 0;
  background-color: transparent;
  background-size: cover;
  width: var(--icon-size);
  height: var(--icon-size);
  background-image: var(--sugar-icon-close);
  background-blend-mode: difference;
  background-color: var(--s-color-bg-article-footer);
}

/* LOADERS
========================================================================
*/
/**
  * Change the cursor on busy elements in all browsers (opinionated).
  */
:where([aria-busy=true i]) {
  pointer-events: none;
}

:where([aria-busy=true i]:empty) {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 1px; /*  so user can set min-height as well and the loader percent height still works */
}

:where([aria-busy=true i]):not(:has(progress)):before {
  display: inline-block;
  margin-inline-end: 0.5rem;
  content: "";
  height: clamp(1em, 80%, 3rem);
  min-width: 1em;
  aspect-ratio: 1/1;
  border: var(--sugar-border-width-plus) solid currentColor;
  opacity: 0.6;
  border-top-color: transparent;
  border-radius: 50%;
  animation: loader 1s linear infinite;
}

@keyframes loader {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* TOOLTIPS
========================================================================
*/
:where(*:has(> [aria-describedby]):has(> [role=tooltip i])) {
  position: relative;
}

:where([role=tooltip i]) {
  --arrow-size: 0.5rem;
  --tooltip-gap: 0.1rem;
  visibility: hidden;
  background: var(--s-color-fg);
  border-radius: var(--s-input-border-radius);
  color: var(--s-color-bg);
  padding: var(--s-tooltip-padding-block) var(--s-tooltip-padding-inline);
  font-size: 1rem;
  font-weight: normal;
  bottom: calc(-1 * (var(--arrow-size)) - var(--tooltip-gap));
  translate: 0 100%;
  transform: scale3d(0.2, 0.2, 1);
  transition: all 0.2s ease-in-out;
  transform-origin: 0 0;
  opacity: 0;
  inset-inline-end: 0;
  max-width: 20rem;
  z-index: 2;
}

:where(a[aria-describedby] + [role=tooltip i]) {
  inset-inline-start: 0;
  inset-inline-end: initial;
}

:where([role=tooltip i]),
:where([role=tooltip i]):after,
:where([role=tooltip i]):before {
  display: block;
  position: absolute;
}

/* 
the before element just create an invisible bridge for the hover effect, 
when moving from the 'aria-describedby' element to tooltip element 
*/
:where([role=tooltip i]):before {
  content: "";
  height: calc(var(--arrow-size) + var(--tooltip-gap));
  width: 100%;
  top: calc(-1 * var(--arrow-size) - var(--tooltip-gap));
  inset-inline-start: 0;
}

:where([role=tooltip i]):after {
  content: "";
  height: 0;
  width: 0;
  border: var(--arrow-size) solid transparent;
  border-bottom-color: var(--s-color-fg);
  top: calc(-1.9 * var(--arrow-size));
  inset-inline-start: calc(1rem * var(--s-multiplier-rounded) / 4 + 1rem);
}

:where([aria-describedby]:hover + [role=tooltip i],
[aria-describedby]:focus + [role=tooltip i],
[aria-describedby] + [role=tooltip i]:hover) {
  opacity: 1;
  transform: scale3d(1, 1, 1);
  visibility: visible;
}

/* TABS
========================================================================
*/
:where([role=tablist]) {
  --padding-tabs: calc(var(--s-input-padding-inline) * 2);
  display: flex;
  margin-bottom: var(--sugar-spacing-block);
  overflow: auto clip;
  padding-bottom: var(--s-border-width-max);
}

/* :where([role='tablist']:dir(ltr)):before,
:where([role='tablist']:dir(ltr)):after {
	--direction: 90deg;
	content: '';
	background-image: linear-gradient(var(--direction), var(--s-color-bg), transparent);
	position: sticky;
	inset-inline-start: 0;
	flex: 1 0 var(--padding-tabs);
	margin-inline-start: calc(-1 * var(--padding-tabs));
	margin-bottom: var(--s-border-width-max);
	z-index: 2;
}

:where([role='tablist']:dir(ltr)):after {
	--direction: 270deg;
	inset-inline-end: -1px;
	inset-inline-start: auto;
} */
:where([role=tablist] > [role=tab]) {
  color: var(--s-color-text);
  background: var(--s-color-bg);
  border: none;
  position: relative;
  white-space: nowrap;
  outline-offset: var(--s-focus-offset-negative);
  border-radius: 0;
  /*  In case you need tab to be an anchor instead of a button uncomment the following code: */
  /* 	display: flex;
  width: 100%;
  justify-content: center;
  padding: var(--s-input-block-padding) var(--s-input-padding-inline); */
}

:where([role=tablist] > [role=tab]):focus {
  outline: 2px solid -webkit-focus-ring-color;
}

:where([role=tablist] > [role=tab]):after {
  position: absolute;
  content: "";
  display: block;
  width: 100%;
  inset-block-end: 0;
  inset-inline-start: 0;
  height: var(--s-border-width-max);
  background-color: var(--s-color-primary);
  translate: 0 var(--s-border-width-max);
}

:where([role=tablist] > [role=tab]:first-child) {
  padding-inline-start: var(--padding-tabs);
}

:where([role=tablist] > [role=tab]:last-child) {
  padding-inline-end: var(--padding-tabs);
}

:where([role=tablist] > [role=tab][aria-selected=false]):after {
  background-color: var(--s-color-separator);
}

:where([role=tablist] + [role=tabpanel]) {
  margin-block-end: var(--sugar-spacing-block);
}

/* Above we added margin bottom for all tabpanels, 
but we need to remove it for all tabpanels of the last tablist, 
if the last tabpanel is last-child of its parent */
:where([role=tablist]:not(:has(~ [role=tablist])) ~ [role=tabpanel]:last-child,
[role=tablist]:not(:has(~ [role=tablist])) ~ [role=tabpanel]:has(~ [role=tabpanel]:last-child)) {
  margin-block-end: 0;
}

/* special treatment if tablist and tabpanel are only children on an article */
:where(article:not(:has(> :not([role=tablist]):not([role=tabpanel])))) {
  padding: 0;
  --tabs-radius: calc(var(--s-block-radius) - var(--sugar-border-width));
}

:where(article:not(:has(> :not([role=tablist]):not([role=tabpanel]))) [role=tabpanel]) {
  padding: 0 var(--sugar-spacing-inline) var(--sugar-spacing-block);
}

:where(article:not(:has(> :not([role=tablist]):not([role=tabpanel]))) > [role=tablist]:first-child > [role=tab]:first-child) {
  border-start-start-radius: var(--tabs-radius);
}

:where(article:not(:has(> :not([role=tablist]):not([role=tabpanel]))) > [role=tablist]:first-child > [role=tab]:last-child) {
  border-start-end-radius: var(--tabs-radius);
}

/*# sourceMappingURL=sugar.css.map */