@layer openprops, normalize, utils, theme, components.root, components.extended;

/* Normalize */

@layer normalize {
  *,
  ::before,
  ::after {
    box-sizing: inherit;
  }

  * {
    scrollbar-width: thin;
  }

  :where(html) {
    --_page-bg-color: var(--surface-default);

    accent-color: var(--primary);
    background-color: var(--_page-bg-color);
    block-size: 100%;
    box-sizing: border-box;
    caret-color: var(--primary);
    color: var(--text-color-2);
    font-family: var(--font-sans);
    interpolate-size: allow-keywords;
    line-height: var(--font-lineheight-4);

    /* https://kilianvalkhof.com/2022/css-html/your-css-reset-needs-text-size-adjust-probably/ */
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;

    @media (--motionOK) {
      scroll-behavior: smooth;
    }
  }

  :where(body) {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    container-type: inline-size;
    font-size: 16px;
    font-synthesis: style;
    font-weight: 400;
    inline-size: 100%;
    margin: 0;
    min-block-size: 100%;
    min-inline-size: 320px;
    position: relative;
    text-rendering: optimizeLegibility;
  }

  /* TODO */
  :where(:not(dialog, popover)) {
    margin: 0;
  }

  :where(:not(fieldset, progress, meter)) {
    background-origin: border-box;
    background-repeat: no-repeat;
    border-style: solid;
    border-width: 0;
  }

  :where(fieldset) {
    border: var(--field-border-width) solid var(--field-border-color);
    border-radius: var(--field-border-radius);
    padding: var(--size-3);
    display: grid;
    gap: var(--size-3);
  }

  :where(input, button, textarea),
  :where(input[type="file"])::-webkit-file-upload-button {
    color: inherit;
    font-size: inherit;
    font: inherit;
    letter-spacing: inherit;
  }

  :where(input):-webkit-autofill,
  :where(input):-webkit-autofill:hover,
  :where(input):-webkit-autofill:focus,
  :where(textarea):-webkit-autofill,
  :where(textarea):-webkit-autofill:hover,
  :where(textarea):-webkit-autofill:focus,
  :where(select):-webkit-autofill,
  :where(select):-webkit-autofill:hover,
  :where(select):-webkit-autofill:focus,
  :where(input):autofill,
  :where(input):autofill:hover,
  :where(input):autofill:focus,
  :where(textarea):autofill,
  :where(textarea):autofill:hover,
  :where(textarea):autofill:focus,
  :where(select):autofill,
  :where(select):autofill:hover,
  :where(select):autofill:focus {
    -webkit-text-fill-color: var(--text-color-2);
    -webkit-box-shadow: 0 0 0px 1e5px var(--well-1) inset;
    transition: background-color 5000s ease-in-out 0s;
  }

  ::placeholder {
    color: var(--text-color-2);
  }

  ::-moz-placeholder {
    opacity: 1;
  }

  :focus-visible {
    /* Inverts the --_page-bg-color */
    --_focus-visible-color: rgb(
      from var(--_page-bg-color) calc(255 - r) calc(255 - g) calc(255 - b)
    );

    border-radius: var(--border-radius, 0px);
    outline: 2px solid var(--_focus-visible-color);
    outline-offset: 2px;
  }

  @media (--motionOK) {
    :where(:focus-visible) {
      transition: outline-offset 145ms var(--ease-2);
    }
    :where(:not(:active):focus-visible) {
      transition-duration: 0.15s;
    }
  }

  :where(:not(:active):focus-visible) {
    outline-offset: var(--outline-offset, 0px);
  }

  :where(
      a[href],
      area,
      button,
      input:not(
          [type="text"],
          [type="email"],
          [type="number"],
          [type="password"],
          [type=""],
          [type="tel"],
          [type="url"]
        ),
      label[for],
      select,
      summary
    ) {
    cursor: pointer;
  }

  :where(
      a[href],
      area,
      button,
      [role="button"],
      input,
      label[for],
      select,
      summary,
      textarea,
      [tabindex]:not([tabindex*="-"])
    ) {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  :where(img, svg, video, canvas, audio, iframe, embed, object) {
    display: block;
  }

  :where(img, svg, video) {
    block-size: auto;
    max-inline-size: 100%;
  }

  :where(svg:not([width])) {
    inline-size: var(--size-7);
  }

  :where(dt:not(:first-of-type)) {
    margin-block-start: var(--size-5);
  }

  :where(figure) {
    display: grid;
    gap: var(--size-2);
    place-items: center;
  }

  :target {
    scroll-margin-block-start: 2rem;
  }
}

/* Utils */

@layer utils {
  /*
Screen-reader only
When you visibly want to hide an element but make it accessible for screen readers.
*/
  .sr-only {
    block-size: 1px;
    clip-path: inset(50%);
    inline-size: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
  }

  /* Hover and active effect for checkbox, radio and icon buttons */
  :where(.checkbox input, .radio input, .icon-button) {
    --isLTR: 1;
    --isRTL: -1;

    position: relative;
    transform-style: preserve-3d;

    &:dir(rtl) {
      --isLTR: -1;
      --isRTL: 1;
    }

    &:where(:not([disabled])) {
      &:hover:before {
        --thumb-scale: 1;
      }

      &:active:before {
        --thumb-scale: 1.1;
      }

      &::before {
        --thumb-scale: 0.01;
        --highlight-size: 150%;

        background-color: oklch(0.6 0 0 / 0.2);
        block-size: var(--highlight-size);
        clip-path: circle(50%);
        content: "";
        inline-size: var(--highlight-size);
        inset-block-start: 50%;
        inset-inline-start: 50%;
        position: absolute;
        transform-origin: center center;
        transform: translateX(calc(var(--isRTL) * 50%)) translateY(-50%)
          translateZ(-1px) scale(var(--thumb-scale));
        will-change: transform;

        @media (prefers-reduced-motion: no-preference) {
          transition: transform 0.2s ease;
        }
      }
    }
  }
}

/* Components */

/*
* Components are divided into two categories - if they are stand-alone (root) or if they are built on top of others (extended).
*/

/*** Root components (no dependencies)  */

@layer components.root {
  :where(.button) {
    --_bg-color: transparent;
    --_border-color: transparent;
    --_border-radius: var(--button-border-radius);
    --_font-size: initial;
    --_min-height: 2.375rem;
    --_text-color: var(--primary);

    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    align-items: center;
    background: var(--_bg-color) var(--ripple, none);
    border-radius: var(--_border-radius);
    border: var(--border-size-1) solid var(--_border-color);
    color: var(--_text-color);
    display: inline-flex;
    font-size: var(--_font-size);
    font-weight: 700;
    gap: var(--size-2);
    justify-content: center;
    min-block-size: var(--_min-height);
    padding-block: 0.5ex;
    padding-inline: 1.5ex;
    text-align: center;
    text-decoration: none;

    user-select: none;

    &:where([disabled]) {
      cursor: not-allowed;
      opacity: 0.64;
    }

    @media (prefers-reduced-motion: no-preference) {
      transition: background-color 0.2s var(--ease-out-3),
        box-shadow 0.2s var(--ease-out-3), border-color 0.2s var(--ease-out-3),
        color 0.2s var(--ease-out-3), outline-offset 0.05s var(--ease-1);

      /* Ripple effect */
      background-position: center;

      &:where(:not([disabled])) {
        &:where(:not(:active):hover) {
          --ripple: radial-gradient(circle, transparent 1%, var(--_bg-color) 1%)
            center/15000%;

          transition: background var(--button-ripple-duration);
        }

        &:where(:hover:active) {
          background-size: var(--button-ripple-size);
          transition: background 0s;
        }
      }
    }

    /* Element states */
    &:where(:not([disabled])) {
      &:where(:not(:active):hover) {
        --_bg-color: light-dark(
          oklch(from var(--primary) l 0.01 h / 20%),
          oklch(from var(--primary) l 0.01 h / 40%)
        );
      }

      &:where(:hover:active) {
        --_bg-color: light-dark(
          oklch(from var(--primary) l 0.06 h / 30%),
          oklch(from var(--primary) l 0.06 h / 40%)
        );
      }
    }

    /* Disabled */
    &:where([disabled]) {
      --_text-color: color-mix(
        in oklch,
        var(--text-color-2) 50%,
        var(--surface-default)
      );
    }

    /* Icon */
    &:where(:has(svg), &.icon-only) {
      gap: 1ex;

      svg {
        max-block-size: 0.7lh;
        color: currentColor;
      }
    }

    /* Sizes */
    &.small {
      --_min-height: 1.875rem;
      padding-block: 0;
      padding-inline: 1ex;
    }

    &.large {
      --_min-height: 2.875rem;
      padding-inline: 4ex;
    }

    /* Variants */
    &.outlined {
      --_bg-color: var(--surface-default);
      --_border-color: var(--color-8);
      --_text-color: var(--color-8);

      &:where(:not([disabled])) {
        &:where(:not(:active):hover) {
          --_bg-color: var(--color-10);
          --_border-color: var(--color-10);
          --_text-color: var(--color-1);
        }

        &:where(:active) {
          --_bg-color: var(--color-9);
          --_border-color: var(--color-9);
          --_text-color: var(--color-1);
        }
      }

      &:where([disabled]) {
        --_bg-color: var(--surface-default);
        --_border-color: color-mix(
          in oklch,
          var(--text-color-2) 20%,
          var(--surface-default)
        );
        --_text-color: color-mix(
          in oklch,
          var(--text-color-2) 40%,
          var(--surface-default)
        );
      }
    }
    &.tonal {
      --_bg-color: var(--color-6);
      --_text-color: var(--color-16);

      &:where(:not([disabled])) {
        &:where(:not(:active):hover) {
          --_bg-color: var(--color-9);
          --_border-color: var(--color-9);
        }

        &:where(:active) {
          --_bg-color: var(--color-7);
          --_border-color: var(--color-7);
        }
      }

      &:where([disabled]) {
        --_bg-color: color-mix(
          in oklch,
          var(--text-color-2) 8%,
          var(--surface-default)
        );
        --_text-color: color-mix(
          in oklch,
          var(--text-color-2) 70%,
          var(--surface-default)
        );
      }
    }
    &.filled {
      --_bg-color: var(--color-8);
      --_text-color: var(--color-1);

      &:where(:not([disabled])) {
        &:where(:not(:active):hover) {
          --_bg-color: var(--color-10);
          --_border-color: var(--color-10);
        }

        &:where(:active) {
          --_bg-color: var(--color-9);
          --_border-color: var(--color-9);
        }
      }

      &:where([disabled]) {
        --_bg-color: color-mix(
          in oklch,
          var(--text-color-2) 20%,
          var(--surface-default)
        );
        --_text-color: color-mix(
          in oklch,
          var(--text-color-2) 70%,
          var(--surface-default)
        );
      }
    }
    &.elevated {
      --_bg-color: light-dark(
        color-mix(in oklch, var(--gray-2) 97%, var(--color-16)),
        color-mix(in oklch, var(--gray-13) 97%, var(--color-1))
      );
      --_ripple-color: light-dark(
        color-mix(in oklch, var(--gray-2) 80%, var(--color-8)),
        color-mix(in oklch, var(--gray-13) 80%, var(--color-8))
      );
      --_text-color: var(--color-8);

      box-shadow: 0px 3px 1px -2px oklch(0 0 0 / 20%),
        0px 2px 2px 0px oklch(0 0 0 / 14%), 0px 1px 5px 0px oklch(0 0 0 / 12%);

      &:where(:not([disabled])) {
        &:where(:not(:active):hover) {
          --ripple: radial-gradient(
              circle,
              transparent 1%,
              var(--_ripple-color) 1%
            )
            center/15000%;

          --_bg-color: light-dark(
            color-mix(in oklch, var(--gray-2) 93%, var(--color-8)),
            color-mix(in oklch, var(--gray-13) 93%, var(--color-8))
          );
        }

        &:where(:hover:active) {
          --_bg-color: light-dark(
            color-mix(in oklch, var(--gray-2) 91%, var(--color-8)),
            color-mix(in oklch, var(--gray-13) 91%, var(--color-8))
          );
        }
      }

      &:where([disabled]) {
        --_bg-color: color-mix(
          in oklch,
          var(--text-color-2) 8%,
          var(--surface-elevated)
        );
        --_text-color: color-mix(
          in oklch,
          var(--text-color-2) 70%,
          var(--surface-elevated)
        );
      }
    }
  }

  /* file input */
  :where(input[type="file"]) {
    align-self: flex-start;
    border-radius: var(--radius-2);
    border: var(--border-size-1) solid var(--surface-filled);
    box-shadow: var(--inner-shadow-4);
    color: var(--text-color-2-contrast);
    cursor: initial;
    max-inline-size: 100%;
    padding: 0;
  }

  :where(input[type="file"])::-webkit-file-upload-button,
  :where(input[type="file"])::file-selector-button {
    cursor: pointer;
    margin-inline-end: var(--size-relative-6);
  }
}

@layer components.root {
  :where(.icon-button) {
    --_text-color: inherit;

    align-items: center;
    aspect-ratio: 1;
    background-color: transparent;
    border: 0;
    border-radius: var(--radius-round);
    display: inline-flex;
    inline-size: var(--size-6);
    justify-content: center;
    padding: 0;
    transform-style: preserve-3d;

    &:where([disabled]) {
      color: light-dark(rgb(0, 0, 0/0.3), rgb(255, 255, 255/0.26));
      cursor: not-allowed;
      opacity: 0.64;
    }

    svg {
      max-inline-size: var(--size-5);
      pointer-events: none;
    }

    /* Ripple effect, utils.css */
    &::before {
      --highlight-size: 130%;
    }

    /* Size */
    &.small {
      inline-size: var(--size-4);
      svg {
        max-inline-size: var(--size-4);
      }
    }
  }
}

@layer components.root {
  :where(nav.tabs) {
    --_bg-color: transparent;

    & > [role="tablist"] {
      button {
        outline-color: transparent;
        outline-offset: -4px;

        &[aria-selected="true"] {
          &:focus-visible {
            outline: 2px solid var(--text-color-1);
          }
        }
      }
    }

    /* Underlined */
    &.underlined {
      /* Tab list */
      & > [role="tablist"] {
        border-bottom: 1px solid var(--border-color);

        button {
          --_ripple-color: light-dark(
            color-mix(in oklch, var(--gray-2) 80%, var(--color-8)),
            color-mix(in oklch, var(--gray-13) 80%, var(--color-8))
          );

          background: var(--_bg-color) var(--ripple, none);
          font-weight: 500;
          line-height: var(--font-lineheight-4);
          padding: var(--size-2) var(--size-3);

          &:focus-visible {
            border-radius: 0;
          }

          &[aria-selected="true"] {
            border-block-end: 2px solid var(--primary);
            color: var(--primary);
          }

          @media (prefers-reduced-motion: no-preference) {
            transition: background-color 0.2s var(--ease-out-3),
              border-color 0.2s var(--ease-out-3), color 0.2s var(--ease-out-3),
              outline-offset 0.05s var(--ease-1);

            /*** Ripple effect */
            background-position: center;
            transition: background var(--button-ripple-duration);
            &:where(:not(:active):hover) {
              --ripple: radial-gradient(
                  circle,
                  transparent 1%,
                  var(--_ripple-color) 1%
                )
                center/15000%;
            }

            &:where(:hover:active) {
              background-size: var(--button-ripple-size);
              transition: background 0s;
            }

            &:hover {
              background-color: light-dark(
                oklch(from var(--primary) calc(l * 0.75) none h / 5%),
                oklch(from var(--primary) calc(l * 1.25) none h / 5%)
              );
            }
          }
        }
      }
    }

    /* Filled */
    &.filled {
      --_bg-color: var(--surface-default);
      --_radius: var(--border-radius);
      --_selected-bg: var(--surface-filled);

      & > [role="tablist"] {
        background-color: var(--_bg-color);
        border: var(--border-width) solid var(--border-color);
        border-radius: var(--_radius);
        overflow: hidden;
        padding: 0.792ex;
        width: fit-content;

        button {
          background-color: var(--_bg-color);
          border-radius: var(--_radius);
          line-height: var(--font-lineheight-4);
          padding-inline: var(--size-3);

          &:hover {
            background-color: oklch(from var(--_bg-color) calc(l * 1.25) c h);
          }

          &[aria-selected="true"] {
            background-color: var(--_selected-bg);

            &:hover {
              background-color: oklch(
                from var(--_selected-bg) calc(l * 1.25) c h
              );
            }
          }

          @media (prefers-reduced-motion: no-preference) {
            transition: background-color 0.2s var(--ease-out-3),
              border-color 0.2s var(--ease-out-3), color 0.2s var(--ease-out-3),
              outline-offset 0.05s var(--ease-1);
          }
        }
      }
    }
  }
}

@layer components.root {
  :where([role="group"].toggle-button-group) {
    --_border-radius: var(--radius-round);
    --_button-padding-inline: clamp(var(--size-2), 3cqi, var(--size-4));
    --_max-width: auto;
    --_icon-size: var(--size-4);

    background-color: var(--surface-default);
    border: 1px solid var(--border-color);
    border-radius: var(--_border-radius);
    display: flex;
    grid-auto-columns: 1fr;
    grid-auto-flow: column;
    max-inline-size: var(--_max-width);
    min-inline-size: max-content;
    overflow: clip;

    /* Size */
    &.small {
      button {
        min-block-size: 2.1875rem; /* 35px */
      }
    }

    &.x-small {
      button {
        min-block-size: var(--size-6); /* 30px */
      }
    }

    &.fullwidth {
      inline-size: 100%;
    }

    /* Button */
    button {
      --_bg-color: transparent;

      align-items: center;
      background: var(--_bg-color) var(--ripple, none);
      border-radius: 0;
      border-inline: 1px solid var(--border-color);
      border-inline-start-width: 0;
      color: var(--text-color-1);
      display: inline-flex;
      flex: auto;
      gap: 1ex;
      justify-content: center;
      min-block-size: 2.5rem; /* 40px */
      min-inline-size: 5ex;
      outline-offset: calc(-1 * var(--size-2));
      padding: 0 var(--_button-padding-inline);
      position: relative;
      user-select: none;

      @media (prefers-reduced-motion: no-preference) {
        transition: background-color 0.2s var(--ease-out-3),
          box-shadow 0.2s var(--ease-out-3), border-color 0.2s var(--ease-out-3),
          color 0.2s var(--ease-out-3), outline-offset 0.05s var(--ease-1);
      }

      /* Element states */
      &:hover {
        --_bg-color: light-dark(oklch(0% 0 0 / 0.04), oklch(100% 0 0 / 0.08));
      }

      &:focus-visible {
        outline-offset: -6px;
      }

      /* Disabled */
      &[disabled] {
        border-color: color-mix(in oklch, var(--border-color) 50%, transparent);
        cursor: not-allowed;
        color: color-mix(in oklch, var(--text-color-1) 30%, transparent);
      }

      &[disabled] + &:not([disabled]):not(:last-of-type) {
        border-inline-end-width: 1px;
      }

      /* Assign border radius for outline */
      &:first-of-type {
        border-bottom-left-radius: var(--_border-radius);
        border-top-left-radius: var(--_border-radius);
      }
      &:last-of-type {
        border-bottom-right-radius: var(--_border-radius);
        border-top-right-radius: var(--_border-radius);
      }

      &:last-of-type {
        border-inline-end-width: 0;
      }

      /* Ripple effect */
      background-position: center;

      &:where(:not([disabled])) {
        &:where(:not(:active):hover) {
          --ripple: radial-gradient(circle, transparent 1%, var(--_bg-color) 1%)
            center/15000%;

          transition: background var(--button-ripple-duration);
        }

        &:where(:hover:active) {
          background-size: var(--button-ripple-size);
          transition: background 0s;
        }
      }

      /* Icons */
      svg {
        inline-size: var(--_icon-size);
        inset-inline-start: calc(var(--_button-padding-inline));

        & + svg {
          max-block-size: var(--size-5);
          max-inline-size: var(--size-7);
        }
      }

      /* Selected */
      &.selected {
        --_bg-color: color-mix(
          in oklch,
          var(--primary) 12%,
          var(--surface-default)
        );

        /* Checkmark */
        svg:first-of-type {
          margin-block-end: -3px;
        }
      }
    }
  }
}

@layer components.root {
  :where(.avatar) {
    --_bg-color: var(--color-8);
    --_color: var(--text-color-1);
    --_width: 40px;

    align-items: center;
    background-color: var(--_bg-color);
    color: var(--_color);
    aspect-ratio: 1;
    border-radius: 100vmax;
    display: inline-flex;
    inline-size: var(--_width);
    justify-content: center;
    overflow: clip;
    position: relative;
    text-align: center;
    text-decoration: none;

    &:has(img) {
      background-color: transparent;
    }

    svg {
      max-inline-size: var(--size-5);
    }

    img {
      block-size: 100%;
      inline-size: 100%;
      inset: 0;
      object-fit: cover;
      position: absolute;
    }

    &.squared {
      border-radius: 0;
    }

    &.rounded {
      border-radius: var(--border-size-3);
    }
  }

  /*
  TODO: implement reading-order if that becomes a thing.
  https://developer.chrome.com/blog/reading-order/
  */
  :where(.avatar-group) {
    --_margin: var(--size-1);

    display: flex;
    flex-direction: row-reverse;

    &.gap-small {
      --_margin: var(--size-2);
    }

    &.gap-x-small {
      --_margin: var(--size-3);
    }

    .avatar {
      margin-inline-end: calc(-1 * var(--_margin));
      outline: 2px solid var(--surface-default);
    }
  }
}

@layer components.root {
  :where(.badge) {
    --_bg-color: var(--primary);
    --_border-color: var(--primary);
    --_color: var(--gray-1);
    --_inset-offset: 16px;
    --_inset: auto auto calc(100% - var(--_inset-offset))
      calc(100% - var(--_inset-offset));
    --_translate: 0;

    display: inline-flex;
    position: relative;

    &::after {
      background-color: var(--_bg-color);
      border: 2px solid var(--_border-color);
      border-radius: 100vmax;
      color: var(--_color);
      content: attr(aria-label);
      font-size: 12px;
      font-weight: 500;
      block-size: var(--size-4);
      line-height: normal;
      min-inline-size: var(--size-4, 1.125rem);
      padding-inline: var(--size-1);
      inset: var(--_inset);
      position: absolute;
      text-align: center;
      translate: var(--_translate);
      transition: opacity 0.2s var(--ease-out-1);
      inline-size: max-content;
    }

    /* Alignment */
    &.start-start {
      --_inset: auto calc(100% - var(--_inset-offset))
        calc(100% - var(--_inset-offset)) auto;
    }
    &.start-end {
      --_inset: auto auto calc(100% - var(--_inset-offset))
        calc(100% - var(--_inset-offset));
    }
    &.end-start {
      --_inset: calc(100% - var(--_inset-offset))
        calc(100% - var(--_inset-offset)) auto auto;
    }
    &.end-end {
      --_inset: calc(100% - var(--_inset-offset)) auto auto
        calc(100% - var(--_inset-offset));
    }

    /* Dot */
    &.dot {
      --_inset: 0 -1px auto auto;
      &::after {
        content: "";
        min-inline-size: var(--size-2);
        block-size: var(--size-2);
        inline-size: var(--size-2);
        padding: 0;
      }
    }

    /* Visibility */
    &.invisible {
      &::after {
        opacity: 0;
        pointer-events: none;
      }
    }

    /* Colors */
    &.error,
    &.good,
    &.ok,
    &.warning {
      --_bg-color: var(--color-8);
      --_border-color: var(--color-8);
    }
  }

  [dir="rtl"] {
    :where(.badge) {
      --_inset: auto calc(100% - 16px) calc(100% - 16px) auto;

      /* Alignment */
      &.start-start {
        --_inset: auto auto calc(100% - 16px) calc(100% - 16px);
      }
      &.start-end {
        --_inset: auto calc(100% - 16px) calc(100% - 16px) auto;
      }
      &.end-start {
        --_inset: calc(100% - 16px) auto auto calc(100% - 16px);
      }
      &.end-end {
        --_inset: calc(100% - 16px) calc(100% - 16px) auto auto;
      }
    }
  }
}

@layer components.root {
  :where(.card) {
    --_bg-color: transparent;
    --_border-color: transparent;
    --_border-width: 0;
    --_shadow: none;

    background-color: var(--_bg-color);
    border-color: var(--_border-color);
    border-radius: var(--border-radius, 0.25rem);
    border-style: solid;
    border-width: var(--_border-width);
    box-shadow: var(--_shadow);
    display: flex;
    flex-direction: column;
    gap: var(--size-3);
    overflow: hidden;
    padding-inline: 0;

    /* Variants */
    &.text {
      --_bg-color: transparent;
      --_border-color: transparent;
      --_border-width: 0;
      --_shadow: none;
      padding-inline: 0;
    }

    &.tonal {
      --_bg-color: var(--surface-tonal);
      --_border-width: 1px;
    }

    &.elevated {
      --_bg-color: var(--surface-elevated);
      --_border-color: transparent;
      --_border-width: 0;
      --_shadow: var(--shadow-3);

      /* Adjust shadow in dark mode */
      @container style(--color-scheme: dark) {
        --_shadow: var(--shadow-4);
      }
    }

    &.outlined {
      --_bg-color: var(--surface-default);
      --_border-color: var(--border-color);
      --_border-width: 1px;
    }

    & > :where(hgroup, .content) {
      padding-inline: var(--size-3);
    }

    & > hgroup {
      padding-block: var(--size-3) 0;

      /* Top paragraph */
      & > p:first-of-type:first-child {
        line-height: 1.3;
      }

      /* Bottom paragraph */
      & > p:last-of-type:last-child:not(:first-child) {
        font-size: var(--font-size-1, 1rem);
      }
    }

    & > .content:where(:only-child, :first-child) {
      padding-block: var(--size-3) var(--size-4);
    }

    & > .actions {
      display: flex;
      gap: var(--size-1);
      margin-block: var(--size-2) 0;
      padding-block-end: var(--size-1);
      padding-inline: var(--size-1) var(--size-3);
    }
  }
}

@layer components.root {
  :where(.chip) {
    --_bg-color: var(--surface-tonal);
    --_border-color: var(--border-color);
    --_color: var(--text-color-1);

    align-items: center;
    background: var(--_bg-color) var(--ripple, none);
    border: 1px solid var(--_border-color);
    border-radius: var(--radius-2, 0.5rem);
    color: var(--_color);
    display: inline-flex;
    font-size: var(--font-size-0, 0.75rem);
    gap: var(--size-1);
    block-size: var(--size-7, 2rem);
    padding-inline: var(--size-2);
    text-decoration: none;

    /* Variants */
    &.tonal {
      --_bg-color: var(--surface-tonal);
      --_color: var(--text-color-1);
    }

    &.outlined {
      --_bg-color: var(--surface-default);
      --_color: var(--text-color-1);
    }

    /* TODO: should this be out of the box? */
    /* Colors */
    /* &:hover {
      --_bg-color: var(--color-11);
      --_border-color: var(--color-11);
      --_color: var(--text-color-1);
    } */
    /* &.red,
    &.blue,
    &.green,
    &.orange,
    &.primary {
      --_bg-color: var(--color-5);
      --_border-color: var(--color-7);
      --_color: var(--text-color-1-contrast);

      &:hover {
        --_bg-color: var(--color-7);
        --_border-color: var(--color-7);
        --_color: var(--text-color-1-contrast);

        &:active {
          --_bg-color: var(--color-8);
          --_border-color: var(--color-8);
        }
      }

      &.outlined {
        --_bg-color: var(--surface-tonal);
        --_color: var(--text-color-1);
        --_border-color: var(--color-9);

        &:hover {
          --_bg-color: var(--color-9);
          --_border-color: var(--color-9);
          --_color: var(--text-color-1);

          &:active {
            --_bg-color: var(--color-11);
            --_border-color: var(--color-11);
          }
        }
      }
    } */

    &:where(button, a):where(:not([disabled])) {
      &:where(:not(:active)):hover {
        --_bg-color: light-dark(
          oklch(from var(--surface-tonal) calc(l * 0.98) c h),
          oklch(from var(--surface-tonal) calc(l * 1.1) c h)
        );
      }
    }

    /* Icon */
    &:has(svg:first-child) {
      padding-inline: var(--size-1) var(--size-2);
    }
    &:has(svg:last-child) {
      padding-inline: var(--size-2) var(--size-1);
    }

    &:has(svg) {
      svg {
        flex-shrink: 0;
        inline-size: var(--size-3);
      }
    }

    /* Sizes */
    &.small {
      block-size: var(--size-5);
    }
    &.multiline {
      block-size: auto;
    }

    /* Ripple effect */
    background-position: center;

    &:where(:not([disabled])) {
      &:where(:not(:active):hover) {
        --ripple: radial-gradient(circle, transparent 1%, var(--_bg-color) 1%)
          center/15000%;

        transition: background var(--button-ripple-duration);
      }

      &:where(:hover:active) {
        background-size: var(--button-ripple-size);
        transition: background 0s;
      }
    }

    /* Disabled */
    &:where([disabled]) {
      opacity: 0.64;
      --_text-color: color-mix(
        in oklch,
        var(--text-color-2) 50%,
        var(--surface-default)
      );
      cursor: not-allowed;
    }
  }
}

@layer components.root {
  :where(.definition-list) {
    --_border-style: solid;
    --_border-width: 1px;

    display: grid;
    gap: var(--size-3);
    padding: 0;

    &.dotted {
      --_border-style: dotted;
      --_border-width: 2px;
    }

    li {
      display: grid;
      margin: 0;
      padding: 0;

      .term {
        display: block;
        font-weight: 700;
        overflow: hidden;
        position: relative;
      }

      hr {
        display: none;
        margin: 0;
      }
    }

    @container (width > 45ch) {
      gap: var(--size-1);

      li {
        align-items: baseline;
        display: grid;
        gap: var(--size-1);
        grid-template-columns: 1fr auto;

        &:has(hr) {
          grid-template-columns: auto 1fr auto;
        }

        hr {
          background-color: transparent;
          border-block-end: var(--_border-width) var(--_border-style)
            var(--border-color);
          block-size: 2px;
          display: block;
        }

        .term {
          &::after {
            display: inline-block;
          }
        }
        .description {
          color: var(--text-color-2);
        }
      }
    }
  }
}

@layer components.root {
  :where(hr) {
    background-color: var(--border-color);
    block-size: var(--border-size-1);
    margin-block: var(--size-fluid-3);
  }
}

@layer components.root {
  :where(.link) {
    color: var(--primary);
    cursor: pointer;
    font-weight: 700;
    text-decoration: underline;
    text-decoration-color: var(--primary);
    text-underline-offset: 2px;

    &[href] {
      &:hover,
      &:focus-visible {
        color: var(--primary-light);
      }
    }

    @supports (-moz-appearance: none) {
      text-underline-offset: 2px;
    }
  }
}

@layer components.root {
  :where(table) {
    border-collapse: collapse;
    display: block;
    margin: var(--size-3) 0;
    max-inline-size: 100%;
    position: relative;

    /* Rows */
    tr {
      background-color: var(--surface-default);
      border-top: 1px solid var(--border-color);

      &:hover {
        background-color: oklch(from var(--surface-filled) l c h / 75%);
      }
    }

    /* Cells */
    th,
    td {
      border: 1px solid var(--border-color);
      padding: var(--size-1) var(--size-2);
    }

    th {
      background-color: var(--surface-filled);
      color: var(--text-color-1);
      font-size: var(--font-size-sm, 0.75rem);
      font-weight: 600;
      text-align: start;
    }

    td {
      font-size: var(--font-size-sm, 0.75rem);
    }

    /* Caption */
    caption {
      caption-side: bottom;
      color: var(--text-color-2);
      font-size: var(--font-size-sm, 0.75rem);
      padding: var(--size-2) 0;
      text-align: start;
    }

    /* Header */
    thead {
      position: sticky;
      top: 0;
      z-index: 1;
    }

    /* Footer */
    tfoot {
      border-top: 2px solid var(--border-color);

      tr {
        background-color: var(--surface-filled);
      }

      td {
        color: var(--text-color-1);
        font-weight: 600;
      }
    }

    /* Column group */
    colgroup col {
      border: none;
    }

    @container (width < 60ch) {
      th,
      td {
        padding: var(--size-1) 0.875rem;
      }
    }

    /* Sticky header */
    &.sticky-header thead {
      background-color: var(--surface-filled);
      position: sticky;
      inset-block-start: 0;
      z-index: 1;
    }

    /* Dense */
    &.dense {
      th,
      td {
        padding: var(--size-1) var(--size-2);
      }

      caption {
        padding: var(--size-1) 0;
      }

      @container (width < 60ch) {
        th,
        td {
          padding: var(--size-1) var(--size-2);
        }
      }
    }
  }
}

@layer components.root {
  :where(progress) {
    --_accent-color: var(--primary);
    --_bg-color: var(--surface-tonal);

    appearance: none;
    background-color: var(--_bg-color);
    border-radius: var(--border-radius, 0.25rem);
    border: 0;
    display: inline-block;
    block-size: var(--size-1);
    overflow: hidden;
    position: relative;
    vertical-align: baseline;
    inline-size: 100%;

    &::-webkit-progress-bar {
      border-radius: var(--border-radius, 0.25rem);
      background: none;
    }

    &[value]::-webkit-progress-value {
      background-color: var(--_accent-color);

      @media (prefers-reduced-motion: no-preference) {
        transition: inline-size 0.2s
          var(--ease-out-4, cubic-bezier(0, 0, 0.1, 1));
      }
    }

    &::-moz-progress-bar {
      background-color: var(--_accent-color);
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    progress:indeterminate {
      background-color: var(--_bg-color);

      &::after {
        animation: indeterminate 2s linear infinite;
        background-color: var(--_accent-color);
        content: "";
        inset: 0 auto 0 0;
        position: absolute;
        will-change: inset-inline-start, inset-inline-end;
      }

      &[value]::-webkit-progress-value {
        background-color: transparent;
      }

      &::-moz-progress-bar {
        background-color: transparent;
      }
    }

    [dir="rtl"] {
      :where(progress):indeterminate {
        animation-direction: reverse;

        &::after {
          animation-direction: reverse;
        }
      }
    }
  }

  @keyframes indeterminate {
    0% {
      left: -200%;
      right: 100%;
    }
    60% {
      left: 107%;
      right: -8%;
    }
    100% {
      left: 107%;
      right: -8%;
    }
  }
}

@layer components.root {
  [aria-busy="true"]:not(
      input,
      select,
      textarea,
      html,
      progress,
      [aria-describedby]
    ) {
    position: relative;

    &::before {
      animation: spin 0.7s linear infinite;
      border-color: transparent currentColor currentColor;
      border-radius: 50%;
      border-style: solid;
      border-width: 3px;
      content: "";
      display: inline-block;
      block-size: 1em;
      opacity: 0.5;
      vertical-align: -0.14em;
      inline-size: 1em;
    }

    &:not(button.button):not(:empty) {
      &::before {
        margin-inline-end: 0.5em;
      }
    }
  }

  @keyframes spin {
    to {
      transform: rotate(1turn);
    }
  }
}

@layer components.root {
  label:where(.checkbox, .radio) {
    align-items: center;
    color: var(--text-color-1);
    cursor: pointer;
    display: inline-grid;
    gap: 0 var(--size-2);
    grid-auto-columns: auto;
    grid-auto-flow: column;
    inline-size: fit-content;
    line-height: 1.5;
    transform: translateZ(0);
    user-select: none;

    /* Disabled */
    &:has([disabled]) {
      cursor: not-allowed;
      opacity: 0.64;
      user-select: none;

      input {
        cursor: not-allowed;
      }
    }

    /* Required dot */
    &:has([required]:not([type="checkbox"]:checked)) {
      .label:after {
        color: var(--red);
        content: "*";
        inset: 0 -0.25ex auto auto;
        position: absolute;
      }
    }

    /* Label */
    .label {
      grid-column: 2;
      grid-row: 1;
      position: relative;
      padding-inline: 0 1ex;
    }

    /* Supporting text */
    .supporting-text {
      color: var(--text-color-2);
      font-size: var(--font-size-xs);
      grid-column: 2;
      grid-row: 2;
      line-height: 1.5;
      z-index: 1;
    }

    /* Stacked layout */
    &.stack {
      justify-items: center;
      grid-auto-columns: unset;

      .label {
        grid-column: 1/-1;
        grid-row: 2;
        margin-block-start: var(--size-1);
        padding-inline: 1ex;

        /* Required dot */
        &::after {
          inset: 0 -0.25ex auto auto;
        }
      }

      .supporting-text {
        grid-column: 1/-1;
        grid-row: 3;
      }
    }

    /* Input */
    input {
      aspect-ratio: 1;
      block-size: 1.125rem;
      cursor: pointer;
      inline-size: 1.125rem;

      &::before {
        --highlight-size: 175%;
      }
    }

    /* Sizes */
    &.small {
      input {
        block-size: var(--size-3);
        inline-size: var(--size-3);
      }
    }

    &.large {
      input {
        block-size: var(--size-4);
        inline-size: var(--size-4);
      }
    }

    /* Validation */
    &.error {
      input[type="checkbox"] {
        accent-color: var(--color-9);

        & ~ :where(.label, .supporting-text) {
          color: var(--color-9);
        }
      }
    }

    /* Touch devices */
    @media (pointer: coarse) {
      input {
        block-size: var(--size-4);
        inline-size: var(--size-4);
      }
    }
  }
}

@layer components.root {
  :where(.switch) {
    --_accent-color: var(--primary);
    --_accent-contrast: var(--primary-contrast);

    --_dot-bg-color: light-dark(var(--gray-11), var(--gray-14));
    --_dot-inset: var(--size-1) auto auto var(--size-1);
    --_dot-outline-size: 0;
    --_dot-size: var(--size-3);

    --_track-bg-color: light-dark(var(--gray-3), var(--gray-8));
    --_track-height: var(--size-5);
    --_track-width: var(--size-8);
    --_transition-tf: var(--ease-4);
    --_transition-time: 0.2s;

    align-items: center;
    color: var(--text-color-1);
    display: inline-grid;
    gap: 0 var(--size-2);
    grid-auto-columns: auto;
    grid-auto-flow: column;
    inline-size: fit-content;

    input[type="checkbox"][role="switch"] {
      appearance: none;
      block-size: var(--_track-height);
      cursor: pointer;
      inline-size: var(--_track-width);
      margin: 0;
      position: relative;

      /* Track */
      &::before {
        background-color: var(--_track-bg-color);
        block-size: var(--_track-height);
        border: 1px solid var(--_dot-bg-color);
        border-radius: 100vmax;
        content: "";
        inline-size: var(--_track-width);
        inset: 0;
        position: absolute;
      }

      &:focus-visible {
        outline-offset: 2px;
        outline: 2px solid currentColor;
      }

      /* Dot */
      &::after {
        background-color: var(--_dot-bg-color);
        block-size: var(--_dot-size);
        border-radius: 100vmax;
        content: "";
        inline-size: var(--_dot-size);
        inset: var(--_dot-inset);
        outline-offset: -1px;
        outline: var(--_dot-outline-size) solid var(--_dot-bg-color);
        position: absolute;
      }

      /* Checked */
      &:checked {
        &::before {
          background-color: var(--_accent-color);
          border-color: var(--_accent-color);
          transition: background-color var(--_transition-time)
              var(--_transition-tf),
            border-color var(--_transition-time) var(--_transition-tf);
        }

        /* Dot */
        &::after {
          --_dot-bg-color: var(--_accent-contrast);
          --_dot-outline-size: calc(var(--size-1) - 1px);

          inset-inline-start: calc(
            var(--_track-width) - var(--_dot-size) - var(--size-1)
          );
        }
      }

      /* Animation */
      @media (prefers-reduced-motion: no-preference) {
        /* Track */
        &::before {
          transition: background-color var(--_transition-time)
              var(--_transition-tf),
            border-color var(--_transition-time) var(--_transition-tf);
        }

        /* Dot */
        &::after {
          transition: all var(--_transition-time) var(--_transition-tf);
        }

        &:active:after {
          --_dot-outline-size: calc(var(--size-1) + 1px);
        }

        &:checked {
          &:active:after {
            --_dot-outline-size: calc(var(--size-1) + 1px);
          }
        }
      }
    }

    /* Required dot */
    &:has([required]:not(:checked)) {
      .label:after {
        color: var(--red);
        content: "*";
        inset: 0 -0.25ex auto auto;
        position: absolute;
      }
    }

    /* Disabled */
    &:has([disabled]) {
      cursor: not-allowed;
      opacity: 0.64;
      user-select: none;

      input {
        cursor: not-allowed;
      }
    }

    /* Label */
    .label {
      grid-column: 2;
      grid-row: 1;
      min-width: 0;
      padding-inline: 0 1ex;
      position: relative;
      user-select: none;
    }

    /* Supporting text */
    .supporting-text {
      color: var(--text-color-2);
      font-size: var(--font-size-xs);
      grid-column: 2;
      grid-row: 2;
      line-height: 1.5;
      z-index: 1;
    }

    /* Size */
    &.small {
      --_dot-size: 0.75rem;
      --_track-height: var(--size-4);
      --_track-width: 2.5rem;
    }

    /* Stacked layout */
    &.stack {
      justify-items: center;
      grid-auto-columns: unset;

      .label {
        grid-column: 1/-1;
        grid-row: 2;
        margin-block-start: var(--size-1);
        padding-inline: 1ex;
      }

      .supporting-text {
        grid-column: 1/-1;
        grid-row: 3;
      }
    }

    /* Validation */
    &.error {
      input {
        outline: 2px solid var(--color-9);
        border-radius: var(--radius-round);
      }

      .label,
      .supporting-text {
        color: var(--color-9);
      }
    }
  }
}

@layer components.root {
  :where(.range > input[type="range"]) {
    --thumb-bg: var(--primary);
    --thumb-highlight-color: oklch(from var(--primary) 70% 100% h / 20%);
    --thumb-highlight-size: 0px;
    --thumb-offset: -1ex;
    --thumb-size: 3ex;
    --track-color: var(--field-border-color);
    --track-fill: 0%;
    --track-height: 1ex;

    appearance: none;
    background: transparent;
    display: block;
    inline-size: 100%;
    margin: 1ex 0 3ex;
    outline-offset: 1ex;

    @media (hover: none) {
      --thumb-offset: -14px;
      --thumb-size: 30px;
    }

    /* Track */
    &::-webkit-slider-runnable-track {
      appearance: none;
      background: linear-gradient(
          to right,
          transparent var(--track-fill),
          var(--track-color) 0%
        ),
        var(--primary);
      block-size: var(--track-height);
      border-radius: 5ex;
      box-shadow: var(--inner-shadow-1);
    }

    &::-moz-range-track {
      appearance: none;
      background: linear-gradient(
          to right,
          transparent var(--track-fill),
          var(--track-color) 0%
        ),
        var(--primary);
      block-size: var(--track-height);
      border-radius: 5ex;
      box-shadow: var(--inner-shadow-2);
    }

    /* Ring */
    &::-webkit-slider-thumb {
      appearance: none;
      background: var(--thumb-bg);
      block-size: var(--thumb-size);
      border-radius: 50%;
      border: 3px solid var(--surface-default);
      box-shadow: 0 0 0 var(--thumb-highlight-size) var(--thumb-highlight-color);
      cursor: ew-resize;
      inline-size: var(--thumb-size);
      margin-block-start: var(--thumb-offset);

      @media (prefers-reduced-motion: no-preference) {
        transition: box-shadow 0.1s ease;
      }

      .fieldset-item:focus-within & {
        border-color: var(--gray-14);
      }
    }

    &::-moz-range-thumb {
      appearance: none;
      background: var(--thumb-bg);
      block-size: var(--thumb-size);
      border-radius: 50%;
      border: 3px solid var(--primary);
      box-shadow: 0 0 0 var(--thumb-highlight-size) var(--thumb-highlight-color);
      cursor: ew-resize;
      inline-size: var(--thumb-size);
      margin-block-start: var(--thumb-offset);

      @media (prefers-reduced-motion: no-preference) {
        transition: box-shadow 0.1s ease;
      }

      .fieldset-item:focus-within & {
        border-color: var(--gray-14);
      }
    }

    /* Element state */
    &:not([disabled]) {
      &:hover {
        --thumb-highlight-size: var(--size-1);
      }

      &:active {
        --thumb-highlight-size: var(--size-2);
        --track-color: light-dark(
          oklch(from var(--field-border-color) calc(l * 0.9) c h),
          oklch(from var(--field-border-color) calc(l * 1.1) c h)
        );
      }
    }

    &[disabled] {
      --thumb-bg: oklch(from var(--text-color-1) l c h / 50%);
      --track-color: var(--field-border-color);

      cursor: not-allowed;

      &::-webkit-slider-thumb {
        cursor: not-allowed;
      }
      &::-moz-range-thumb {
        cursor: not-allowed;
      }
    }
  }
}

@layer components.root {
  /* Base typography */
  :where(h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6) {
    color: var(--text-color-1);
    font-weight: 700;
    text-wrap: pretty;
  }

  :where(h1, .h1) {
    font-size: var(--font-size-h1, var(--font-size-7));
    letter-spacing: -0.02em;
    line-height: 1.15;
  }

  :where(h2, .h2) {
    font-size: var(--font-size-h2, var(--font-size-5, 2rem));
    letter-spacing: -0.02em;
    line-height: 1.2;
  }

  :where(h3, .h3) {
    font-size: var(--font-size-h3, var(--font-size-4, 1.5rem));
    letter-spacing: -0.01em;
    line-height: 1.167;
  }

  :where(h4, .h4) {
    font-size: var(--font-size-h4, var(--font-size-3, 1.25rem));
    letter-spacing: -0.01em;
    line-height: 1.235;
  }

  :where(h5, .h5) {
    font-size: var(--font-size-h5, var(--font-size-2, 1.1rem));
    line-height: 1.334;
  }

  :where(h6, .h6) {
    font-size: var(--font-size-h6, var(--font-size-1, 1rem));
    line-height: 1;
  }

  :where(hgroup) {
    & > :where(p, .p) {
      margin: 0;
    }

    & > :where(h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6) {
      margin-block-end: 0.4em;
    }

    /* The second p element */
    & > :where(p, .p):last-of-type:last-child:not(:first-child) {
      color: oklch(from currentColor l c h / 75%);
      font-size: var(--font-size-lg);
      line-height: 1.6;
    }
  }

  /** Overline */
  :where(.overline, hgroup > :where(p, .p):first-of-type:first-child) {
    color: light-dark(
      oklch(from var(--text-color-2) calc(l * 1.25) c h),
      oklch(from var(--text-color-2) calc(l * 0.75) c h)
    );
    font-size: var(--font-size-xs);
    font-weight: 500;
    letter-spacing: 0.06em;
    line-height: 2.5;
    text-transform: uppercase;
  }

  :where(p, .p) {
    text-wrap: pretty;

    &.small {
      font-size: var(--font-size-md);
    }
    &.large {
      font-size: var(--font-size-lg);
    }
  }

  /* Inline text elements */
  :where(ins, u, abbr, dfn) {
    text-decoration: underline;
    text-underline-offset: 1px;

    @supports (-moz-appearance: none) {
      text-underline-offset: 2px;
    }
  }

  :where(abbr, dfn) {
    font-style: normal;
    text-decoration: var(--color-9) underline dotted;

    &[title] {
      cursor: help;
      text-underline-offset: 1px;
    }

    @supports (-moz-appearance: none) {
      text-underline-offset: 2px;
    }
  }

  :where(sup) {
    font-size: 0.5em;
  }

  :where(del, ins) {
    color: var(--color-9);
  }

  :where(small) {
    font-size: max(0.5em, var(--font-size-0, 0.75rem));
    max-inline-size: var(--size-content-1);
  }

  :where(cite) {
    font-style: italic;
  }

  /* Blockquote */
  :where(blockquote) {
    border-inline-start-width: var(--border-size-3);
    display: grid;
    gap: var(--size-3);
    padding-block: var(--size-3);
    padding-inline: var(--size-4);

    :first-child {
      margin-block-start: 0;
    }

    :last-child {
      margin-block-end: 0;
    }

    footer {
      color: var(--text-color-2);
    }
  }

  /* Code */
  :where(pre) {
    border-radius: 0.375rem;
    direction: ltr;
    font-size: 0.875rem;
    line-height: 1.7142857;
    margin-block: 1.7142857em;
    max-inline-size: max-content;
    min-inline-size: 0;
    padding-block: 0.8571429em;
    padding-inline: 1.1428571em;
    white-space: pre;
    writing-mode: lr;
  }

  :where(code, kbd, samp, pre) {
    font-family: var(--font-mono);
  }

  :where(code) {
    background-color: oklch(00 0 0 /18%);
    border-radius: var(--border-size-3);
    font-size: 0.9em;
    padding: 0.2ex 0.5ex;
  }

  :where(kbd, var) {
    background-color: var(--text-color-2);
    border-color: var(--text-color-2);
    border-radius: var(--border-radius, var(--radius-2));
    border-width: var(--border-size-1);
    color: var(--text-color-2-contrast);
    padding: calc(var(--size-1) / 2) var(--size-1);
  }

  :where(:not(pre) code, kbd) {
    word-break: break-word;
  }

  :where(:not(pre) code) {
    border-radius: var(--border-radius, var(--radius-2));
    padding: var(--size-1) var(--size-2);
    writing-mode: lr;
  }

  :where(mark) {
    border-radius: var(--border-radius, 0);
    box-decoration-break: clone;
    padding: calc(var(--size-1) / 2) var(--size-1);
    vertical-align: baseline;
  }

  /* Misc */
  :where(dt) {
    font-weight: 700;
  }

  :where(figure) {
    & > :where(figcaption) {
      font-size: var(--font-size-1, 1rem);
      text-wrap: balance;
    }
  }
}

/*** Extended components (has dependencies) */

@layer components.extended {
  :where([role="group"].button-group) {
    --_border-radius: var(--button-border-radius);

    border-radius: var(--_border-radius);
    display: inline-flex;
    min-width: max-content;

    button {
      border-radius: 0;

      svg {
        max-inline-size: 0.7lh;
      }

      &:focus-visible {
        outline-offset: -4px;
      }

      & + & {
        border-inline-width: 1px;
        margin-inline-start: -1px;
      }

      &:first-of-type {
        border-bottom-left-radius: var(--_border-radius);
        border-top-left-radius: var(--_border-radius);
      }
      &:last-of-type {
        border-bottom-right-radius: var(--_border-radius);
        border-top-right-radius: var(--_border-radius);
      }

      /* Variants */
      /*** Text & Elevated */
      &:not(:where(.tonal, .filled, .outlined)) {
        & + button {
          border-inline-start: 1px solid var(--border-color);
        }
      }

      &:where(.tonal, .filled) {
        & + button {
          border-inline-start-color: var(--color-7);
        }
      }

      &:where(.tonal, .filled, .elevated) {
        & + &[disabled] {
          border-inline-start-color: color-mix(
            in oklch,
            var(--border-color) 90%,
            white
          );
        }
      }

      &:where(.elevated) {
        box-shadow: var(--shadow-1);

        button {
          &:not(:hover) {
            box-shadow: none;
          }
        }
      }
    }
  }
}

@layer components.extended {
  :where(details) {
    --_accordion-transition-time: 0.2s;
    --_bg-color: transparent;
    --_margin-inline: var(--size-1);
    --_shadow: none;

    background-color: var(--_bg-color);
    box-shadow: var(--_shadow);
    border-radius: var(--border-radius, 4px);
    display: block;
    margin-inline: var(--_margin-inline);
    transition: all var(--_accordion-transition-time) ease-out;

    /* Accordion animation */
    /* https://nerdy.dev/open-and-close-transitions-for-the-details-element */
    @media (prefers-reduced-motion: no-preference) {
      interpolate-size: allow-keywords;
    }

    &::details-content {
      block-size: 0;
      opacity: 0;
      overflow-y: clip;
      transition: content-visibility var(--_accordion-transition-time)
          allow-discrete,
        opacity var(--_accordion-transition-time),
        block-size var(--_accordion-transition-time);
    }

    &[open]::details-content {
      block-size: auto;
      opacity: 1;
    }
    /***/

    & > summary {
      background-color: inherit;
      cursor: pointer;
      font-weight: 700;
      padding-block: var(--size-3);
      user-select: none;
    }

    /* Custom arrow */
    /* summary {
      align-items: center;
      background-color: inherit;
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      list-style: none;
      padding-block: var(--size-3);
      user-select: none;

      &::marker,
      &::-webkit-details-marker {
        display: none;
      }

      svg {
        transition: rotate 0.2s ease-out;
      }
    }

    &[open] > summary svg {
      rotate: 180deg;
    } */

    & > .content {
      margin-block-start: 0;
      padding-block: var(--size-2) var(--size-3);
    }

    & > .actions {
      display: flex;
      gap: var(--size-1);
      justify-content: end;
      margin-block-start: var(--size-3);
      padding-block-end: var(--size-1);
      padding-inline: var(--size-3) var(--size-1);
    }

    /* Variants */
    &.card,
    &.text {
      --_bg-color: transparent;
      --_margin-inline: var(--size-1);
    }

    &.elevated {
      --_bg-color: var(--surface-elevated);
      --_margin-inline: 0;
      --_shadow: var(--shadow-2);
    }

    &.outlined {
      --_bg-color: var(--surface-default);
      --_margin-inline: 0;
      border: 1px solid var(--border-color);
    }

    &.tonal {
      --_bg-color: var(--surface-tonal);
      --_margin-inline: 0;
    }

    &:where(.elevated, .outlined, .tonal) > * {
      padding-inline: var(--size-3);
    }
  }

  /* Accordion group  */
  :where(.card:has(details)) {
    --_gutter-color: var(--border-color);

    display: block;

    & > .content {
      margin-block: 0;
      padding: 0;
    }

    &.card,
    &.text {
      &:not(.tonal, .outlined, .elevated) {
        summary {
          padding-inline: 0;
        }
      }
    }

    details {
      --_margin-inline: 0;

      border: 0;
      box-shadow: none;

      & > * {
        padding-inline: var(--size-3);
      }

      /* Border between accordion items */
      & + & {
        summary {
          border-radius: 0;
          border-block-start: 1px solid var(--_gutter-color);
        }
      }

      /* First item */
      &:first-of-type {
        border-start-start-radius: var(--border-radius, 0.25rem);
        border-start-end-radius: var(--border-radius, 0.25rem);
        summary {
          border-start-start-radius: var(--border-radius, 0.25rem);
          border-start-end-radius: var(--border-radius, 0.25rem);
        }
      }

      /* Last item */
      &:last-of-type {
        border-end-start-radius: var(--border-radius, 0.25rem);
        border-end-end-radius: var(--border-radius, 0.25rem);
        summary {
          border-end-start-radius: var(--border-radius, 0.25rem);
          border-end-end-radius: var(--border-radius, 0.25rem);
        }
      }
    }
  }
}

@layer components.extended {
  /*
Lists meant to be used stand-alone or as part of Select elements

  Intended use-case:
  - ul.list > li
  - .select > .list > option
*/
  :where(.list) {
    --_bg-color: light-dark(var(--gray-1), var(--gray-15));

    background-color: var(--_bg-color);
    list-style: none;
    padding: var(--size-2) 0;

    @media (pointer: coarse) {
      &,
      * {
        user-select: none;
      }
    }

    /* Borders on all list items */
    &.bordered {
      :where(li + li, option + option) {
        margin-block-start: var(--size-3);
        &::before {
          block-size: 1px;
          border-block-start: 1px solid var(--border-color);
          content: "";
          display: block;
          inline-size: 100%;
          inset: calc(-1 * var(--size-2)) 0 auto 0;
          position: absolute;
          visibility: visible; /* override select > option:before style */
        }
      }
    }

    /* Dense - less gaps and spacing */
    &.dense {
      :where(li, option) {
        gap: var(--size-2);
        min-block-size: var(--size-7);
        padding: var(--size-1) var(--size-2);

        &.border-top {
          margin-block-start: var(--size-2);
          &::before {
            inset: calc(-1 * var(--size-1)) 0 auto 0;
          }
        }

        /* Clickable list item */
        &:has(> a, > button, > label) {
          min-block-size: auto;
          padding: 0;
        }

        & > :where(a, button, label) {
          gap: var(--size-2);
          min-block-size: var(--size-7);
          padding: var(--size-1) var(--size-2);
        }

        /* Checkbox / Radio */
        & > label {
          .end {
            padding-inline-end: 0.125rem;
          }
        }

        /* Leading and trailing content */
        .start,
        .end {
          .avatar {
            max-inline-size: var(--size-6);
          }

          .icon-button,
          svg {
            max-inline-size: var(--size-4);
          }

          .checkbox,
          .radio {
            max-inline-size: var(--size-3);
          }
        }
      }
    }

    /* Gutterless */
    &.gutterless {
      :where(li, option) {
        padding-inline: 0;

        & > :where(a, button, label) {
          padding-inline: 0;
        }
      }
    }

    /* List item */
    :where(li, option, [role="group"] > label) {
      align-items: center;
      background: var(--_bg-color) var(--ripple, none);
      display: flex;
      font-size: var(--font-size-sm);
      gap: var(--size-3);
      isolation: isolate;
      min-block-size: 40px;
      padding: var(--size-2) var(--size-3);
      position: relative;

      &::before {
        display: none; /* removing checkmark from option */
      }

      * {
        font-size: inherit;
      }

      /* Clickable list item */
      &:has(> a, > button, > label) {
        background: transparent;
        display: block;
        min-block-size: auto;
        padding: 0;
      }

      /* Select option */
      &:where(option) {
        align-items: center;
        background-color: var(--_bg-color);
        color: inherit;
        cursor: pointer;
        display: flex;
        gap: var(--size-3);
        inline-size: 100%;
        margin: 0;
        min-block-size: 40px;
        padding: var(--size-2) var(--size-3);
        text-align: start;
        text-decoration: none;
        z-index: 0;

        &:hover {
          background-color: light-dark(var(--gray-2), var(--gray-14));
        }

        &:checked {
          background-color: oklch(from var(--primary) l c h / 30%);
        }
      }

      & > a,
      & > button,
      & > label {
        align-items: center;
        background: var(--_bg-color) var(--ripple, none);
        color: inherit;
        cursor: pointer;
        display: flex;
        gap: var(--size-3);
        inline-size: 100%;
        margin: 0;
        min-block-size: 40px;
        outline-offset: -3px;
        padding: var(--size-2) var(--size-3);
        text-align: start;
        text-decoration: none;
        z-index: 0;

        /*** Ripple effect */
        background-position: center;
        transition: background var(--button-ripple-duration);
        &:where(:not(:active):hover) {
          --ripple: radial-gradient(circle, transparent 1%, var(--_bg-color) 1%)
            center/15000%;
        }

        &:where(:hover:active) {
          background-size: var(--button-ripple-size);
          transition: background 0s;
        }

        &:hover {
          background-color: light-dark(var(--gray-2), var(--gray-14));
        }

        /*** Remove ripple effect when trailing button is clicked */
        &:has(.end:hover) {
          &:where(:not(:active):hover) {
            --ripple: none;
          }
        }
      }

      /* Checkbox / Radio / Switch */
      & > label {
        .end {
          padding-inline-end: var(--size-1);
        }

        &:where(.checkbox, .radio) {
          inline-size: 100%;
        }

        &.switch {
          --_dot-size: 0.75rem;
          --_track-height: var(--size-4);
          --_track-width: 2.5rem;
        }
      }

      /* Video */
      &:has(video) {
        padding: 0.75rem var(--size-3) 0.75rem 0;
      }

      /* Border between list items */
      &.border-top {
        margin-block-start: var(--size-3);
        &::before {
          block-size: 1px;
          border-block-start: 1px solid var(--border-color);
          content: "";
          display: block;
          inline-size: 100%;
          inset: calc(-1 * var(--size-2)) 0 auto 0;
          position: absolute;
        }
      }

      /* Text */
      .text {
        flex: 1;
        line-height: 1.6;

        :where(h1, h2, h3, h4, h5, h6, p, span) {
          color: inherit;
          font-weight: 400;
        }

        p + p {
          font-size: var(--font-size-xs);
        }
      }

      /* Leading content */
      .start {
        align-self: center;
        align-items: center;
        display: grid;
        z-index: 1;

        &:has(svg) {
          max-inline-size: var(--size-5);
        }

        svg {
          padding-block-start: 0.125rem;
        }

        img {
          aspect-ratio: 1;
          inline-size: 56px;
          object-fit: cover;
        }

        video {
          aspect-ratio: 16/9;
          block-size: 64px;
          object-fit: cover;
        }
      }

      /* Trailing content */
      .end {
        align-items: center;
        display: flex;
        font-size: var(--font-size-xs);
        text-align: end;
        z-index: 1;

        &:not(:has(a, button, input)) {
          pointer-events: none;
        }

        kbd {
          background-color: transparent;
          border: 0;
          color: inherit;
          opacity: 0.6;
        }

        svg {
          max-inline-size: var(--size-5);
          inline-size: 100%;
        }
      }

      /* Inset */
      &.inset {
        .text {
          padding-inline-start: calc(var(--size-5) + var(--size-3));
        }

        /* Safety measure so it won't look bad if there for some reason should exist a leading element inside. */
        .start {
          display: none;
        }
      }
    }
  }
}

@layer components.extended {
  :where(.alert) {
    --_bg-color: var(--surface-tonal);
    --_border-color: var(--surface-tonal);
    --_color: var(--text-color-1);

    &.outlined {
      --_bg-color: var(--surface-default);
      --_border-color: var(--border-color);
      --_color: var(--text-color-1);
    }

    background-color: var(--_bg-color);
    border: 1px solid var(--_border-color);
    border-radius: var(--border-radius);
    color: var(--_color);
    padding: var(--size-3);

    & > .content {
      display: grid;
      gap: var(--size-2);
      font-size: var(--font-size-sm);

      h1,
      h2,
      h3,
      h4,
      h5,
      h6 {
        color: inherit;
        font-size: var(--font-size-md);
        font-weight: 600;

        * {
          font-size: inherit;
        }
      }
    }

    /* Colors */
    &.error,
    &.ok,
    &.warning {
      --_bg-color: var(--color-4);
      --_border-color: var(--color-9);
      --_color: var(--color-15);

      &.outlined {
        --_bg-color: var(--surface-default);
        --_border-color: var(--color-9);
        --_color: light-dark(var(--color-15), var(--color-1));
      }

      svg {
        margin-block-start: 0.15rem;
        stroke: var(--color-9);
      }
    }

    /* Links
    * Can't make sure contrast will be acceptable (yet) so we use the current text color instead.
    */
    &:not(.outlined) {
      a[href] {
        color: inherit;

        &:hover {
          color: var(--primary);
        }
      }
    }

    /* Icon */
    &:has(svg) {
      display: grid;
      gap: var(--size-3);
      grid-template-columns: var(--size-4) 1fr;

      svg {
        margin-block-start: 0.15rem;
        stroke: currentColor;
      }
    }
  }
}

@layer components.extended {
  :where(dialog) {
    margin-block-start: 15%; /* vertical alignment */
    padding-block: 0;
    pointer-events: none;

    &::backdrop {
      background-color: rgba(0, 0, 0, 0.5);
      backdrop-filter: blur(5px);

      @media (prefers-reduced-motion: reduce) {
        backdrop-filter: none;
      }
    }

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

    &[open] {
      pointer-events: all;
    }

    .actions {
      justify-content: end;
      padding-inline: var(--size-3) var(--size-1);
    }

    /* Animation */
    /* There's no close animation, intentionally */
    opacity: 0;

    &[open] {
      opacity: 1;
      transition: display 0.2s allow-discrete,
        margin-block-start 0.3s var(--ease-1), overlay 0.2s allow-discrete,
        opacity 0.2s var(--ease-out-1);

      @starting-style {
        opacity: 0;
      }
    }

    @media (prefers-reduced-motion: no-preference) {
      margin-block-start: 17%;
      &[open] {
        margin-block-start: 15%;

        @starting-style {
          margin-block-start: 17%;
        }
      }
    }
  }

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

@layer components.extended {
  :where(.snackbar) {
    align-items: center;
    /* Inverse surface-filled */
    background-color: light-dark(var(--gray-15), var(--gray-2));
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-2);
    color: var(--text-color-1-contrast);
    display: flex;
    font-size: var(--font-size-sm);
    gap: var(--size-3);
    inset-block: auto var(--size-3);
    inset-inline: var(--size-3) auto;
    justify-content: space-between;
    min-inline-size: min(100%, 37ch);
    padding: var(--size-2) var(--size-3);
    position: fixed;
    inline-size: calc(100% - var(--size-6, 1.75rem));
    z-index: 100;

    &::backdrop {
      display: none;
    }

    * {
      word-break: break-word;
    }

    /* Global positioning (in relation to the window) */
    /*** Default (end-start) */
    inset-block: auto var(--size-3);
    inset-inline: 50% 0;
    translate: -50% 0;

    &.start-start,
    &.start-center,
    &.start-end {
      inset-block: var(--size-3) auto;
    }

    /* TODO use @custom-media instead? */
    @container (width > 480px) {
      /* Default (end-start) */
      inset-block: auto var(--size-7, 2rem);
      inset-inline: var(--size-7, 2rem) auto;
      translate: revert;
      inline-size: fit-content;

      &.end-start,
      &.end-end,
      &.start-start,
      &.start-end {
        translate: revert;
      }

      &.start-start {
        inset-block: var(--size-7, 2rem) auto;
        inset-inline: var(--size-7, 2rem) auto;
      }
      &.start-center {
        inset-block: var(--size-7, 2rem) auto;
        inset-inline: 50% 0;
        translate: -50% 0;
      }
      &.start-end {
        inset-block: var(--size-7, 2rem) auto;
        inset-inline: auto var(--size-7, 2rem);
      }
      &.end-start {
        inset-block-end: var(--size-7, 2rem);
        inset-inline: var(--size-7, 2rem) auto;
      }
      &.end-center {
        inset-block: auto var(--size-7, 2rem);
        inset-inline: 50% 0;
        translate: -50% 0;
      }
      &.end-end {
        inset-block: auto var(--size-7, 2rem);
        inset-inline: auto var(--size-7, 2rem);
      }
    }

    /* Absolute positioning */
    &.absolute {
      position: absolute;
    }

    /* Actions */
    .actions {
      align-items: center;
      display: flex;
      flex-shrink: 0;
      gap: var(--size-3);
      padding-inline: 0;

      button {
        /* Inverse hover and active backgrounds */
        &:where(:not([disabled])) {
          &:where(:not(:active):hover) {
            --_bg-color: light-dark(
              color-mix(in oklch, white 40%, black),
              color-mix(in oklch, white 85%, black)
            );
          }

          &:where(:hover:active) {
            --_bg-color: light-dark(
              color-mix(in oklch, white 45%, black),
              color-mix(in oklch, white 80%, black)
            );
          }
        }
      }

      button:not(:has(svg)) {
        border-radius: var(--border-radius);
        font-size: inherit;
        max-block-size: var(--size-6, 1.5rem);
        padding: 1ex;
      }

      button:has(svg) {
        color: inherit;
        max-inline-size: var(--size-6, 1.75rem);
        margin: var(--size-00);
        padding: var(--size-1);
      }
    }

    /* Animations */
    opacity: 0;
    transition: display 0.075s allow-discrete, overlay 0.075s allow-discrete,
      opacity 0.075s var(--ease-out-1);

    &:popover-open,
    &:popover-open::backdrop,
    &.visible {
      opacity: 1;
      transition: display 0.25s allow-discrete, overlay 0.25s allow-discrete,
        opacity 0.25s var(--ease-out-1);

      @starting-style {
        opacity: 0;
      }
    }
  }
}

@layer components.extended {
  /* Common styling for checkbox, radio and switch groups */
  :where(fieldset.field-group) {
    border: 0;
    border-radius: 0;
    gap: 0;
    padding: 0;
    z-index: 1;

    legend {
      color: var(--text-color-2);
      padding: 0 1ex 0 0;
    }

    /* Disabled */
    &[disabled] {
      cursor: not-allowed;
      opacity: 0.64;
      user-select: none;

      input {
        cursor: not-allowed;
      }
    }

    /* Validation */
    &.error {
      legend,
      .supporting-text {
        color: var(--color-9);
      }
    }

    /* Required */
    &:has([required]) {
      &:not(:has(input:where([type="radio"], [type="checkbox"]):checked)) {
        legend {
          position: relative;

          &::after {
            color: var(--red);
            content: "*";
            inset: 0 -0.25ex auto auto;
            position: absolute;
          }
        }
      }
    }
    :where(.radio, .checkbox, .switch) .label:after {
      display: none;
    }

    /* Supporting text */
    .supporting-text {
      color: var(--text-color-2);
      font-size: var(--font-size-xs);
      line-height: 1.5;
      z-index: 1;
    }

    /* Fields */
    .fields {
      display: flex;
      flex-direction: column;
      gap: var(--size-2);

      * ~ & {
        padding: var(--size-2) 0;
      }
    }

    :last-child {
      padding-block-end: 0;
    }

    /* Directions */
    &.row {
      .fields {
        flex-direction: row;
      }
    }
  }
}

@layer components.extended {
  /*
- Common styling for input, textarea and select
- Form related styles such as: label, supporting text, error handling
*/
  :where(.field) {
    --_accent-color: var(--primary);
    --_bg-color: var(--surface-default);
    --_border-color: var(--field-border-color);
    --_field-padding-block: 0.75rem;
    --_field-padding-inline: var(--size-2);
    --_filled-border-color: var(--text-color-1);
    --_height: var(--field-size);
    --_label-color: var(--text-color-2);
    --_supporting-text-color: var(--text-color-2);

    contain: layout;
    display: inline-grid;
    position: relative;

    /* Input/Select base */
    & input,
    & textarea,
    & select {
      background-color: var(--_bg-color);
      block-size: var(--_height);
      border-radius: var(--field-border-radius);
      border: var(--field-border-width) solid var(--_border-color);
      color: var(--text-color-1);
      font-family: var(--font-sans);
      font-size: var(--font-size-1);
      grid-column: 1/-1;
      grid-row: 1;
      inline-size: 100%;
      line-height: var(--font-lineheight-1);
      min-inline-size: 0;
      padding: var(--_field-padding-block) var(--_field-padding-inline);

      @media (prefers-reduced-motion: no-preference) {
        transition: border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
          padding-block 0.2s var(--ease-3);
      }
    }

    /* Required/Invalid */
    &:has(
        :not(:placeholder-shown):invalid,
        :where(
            :placeholder-shown,
            option[value=""]:not(:checked),
            option:checked:not([value=""])
          ):required
      ) {
      .label:after {
        color: var(--red);
        content: "*";
        margin: -0.25em auto auto 0.25em;
      }
    }

    /* File */
    &:has(input[type="file"]) {
      cursor: pointer;

      input {
        align-self: flex-start;
        block-size: var(--_height);
        box-shadow: none;
        color: var(--text-color-1);
        cursor: inherit;
        max-inline-size: 100%;
        padding: 0;
        transition: font-size 0.2s var(--ease-3);

        &::-webkit-file-upload-button,
        &::file-selector-button {
          background-color: var(--surface-tonal);
          border: none;
          block-size: calc(100% - var(--size-2) * 2);
          border-radius: var(--field-border-radius);
          cursor: pointer;
          margin-inline-end: 1ex;
          margin-block-start: var(--size-2);
          margin-inline-start: var(--size-2);
        }
      }

      /* Variants */
      &.filled {
        input {
          &::-webkit-file-upload-button,
          &::file-selector-button {
            background-color: var(--surface-default);
            block-size: calc(100% - var(--size-2) * 2);
            border-radius: var(--field-border-radius);
            cursor: pointer;
            margin-block-start: var(--size-2);
          }
        }
      }

      /* Sizes */
      &.small {
        input {
          font-size: var(--font-size-sm);
          &::-webkit-file-upload-button,
          &::file-selector-button {
            block-size: calc(100% - var(--size-2));
            margin-block-start: var(--size-1);
          }
        }
      }
    }

    /* Autosuggest */
    &:has(input[list]) {
      .label {
        /* Make sure chevron is visible */
        inline-size: calc(100% - var(--size-6));
      }
    }

    /* Select */
    &:has(select) {
      .label {
        /* Make sure chevron is visible */
        inline-size: calc(100% - var(--size-6));
      }
    }

    /* Experimental Select */
    &:has(select button) {
      select {
        padding: 0;

        button {
          outline: 0;
          padding: var(--_field-padding-block) var(--size-8)
            var(--_field-padding-block) var(--_field-padding-inline);
        }
      }
    }

    /* Non-experimental Select */
    &:has(select):not(:has(button)) {
      select {
        padding: var(--_field-padding-block) var(--size-8)
          var(--_field-padding-block) var(--_field-padding-inline);
      }
    }

    /* Input - color */
    &:has(input[type="color"]) {
      input {
        appearance: none;
        background: none;
        block-size: var(--_height);
        overflow: hidden;
        padding: 0;

        &::-webkit-color-swatch {
          border: none;
        }

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

      .label {
        border: 1px solid var(--field-border-color);
        inline-size: fit-content;
        margin-inline-start: var(--size-2);
      }
    }

    /* Textarea */
    &:has(textarea) {
      .label {
        align-self: start;
        margin-block-start: var(--_field-padding-block);
      }
    }

    /*
  * Variant: Outlined
  */
    &:not(.filled) {
      /* Element states */
      &:hover {
        &:not(.error) {
          :where(input, textarea, select) {
            --_border-color: var(--text-color-1);
          }
        }
      }
    }

    &:not(.filled):focus-within {
      & input,
      & textarea,
      & select {
        border-color: var(--_accent-color);
        outline-offset: -2px;
        outline: 2px solid var(--_accent-color);
      }
    }

    /* Label */
    .label {
      align-self: center;
      background-color: var(--_bg-color);
      border-radius: var(--field-border-radius);
      color: var(--_label-color);
      border-radius: var(--radius-1);
      display: inline-flex;
      font-size: var(--font-size-md);
      grid-column: 1/-1;
      grid-row: 1;
      inline-size: calc(100% - (var(--field-border-width) * 2));
      margin-inline-start: var(--field-border-width);
      padding-inline: var(--_field-padding-inline);
      pointer-events: none;
      z-index: 1;

      @media (prefers-reduced-motion: no-preference) {
        transition: border-color 0.2s var(--ease-3),
          font-size 0.2s var(--ease-3), inline-size 0.05s var(--ease-3),
          margin 0.2s var(--ease-3), padding-inline 0.2s var(--ease-3);
      }
    }

    /*
  * Label transitions
  * Triggered by:
  * - focus
  * - filled form fields (except color inputs)
  * - non-empty select options
  */
    &:focus-within,
    &:has(:where(input:not([type="color"]), textarea):not(:placeholder-shown)),
    &:has(option[value=""]:not(:checked)),
    &:has(option:checked:not([value=""])) {
      .label {
        border-color: transparent;
        color: var(--_accent-color);
        font-size: 0.75rem;
        inline-size: max-content;
        letter-spacing: 0.15px;
        line-height: 1.15;
        margin-block-start: -2.7rem;
        margin-inline-start: var(--_field-padding-inline);
        padding-inline: 0.125rem;
      }

      /* Neutral label color reset */
      &:not(:focus-within):not(.error) {
        .label {
          color: var(--text-color-2);
        }
      }

      &:has(textarea) {
        .label {
          margin-block-start: -0.35rem;
        }

        &.small {
          .label {
            align-self: start;
            margin-block-start: var(--_field-padding-block);
          }
        }
      }
    }

    /* Supporting text */
    .supporting-text {
      color: var(--_supporting-text-color);
      font-size: var(--font-size-xs);
      grid-row: 3;
      line-height: 1.5;
      margin-inline-start: var(--field-border-width);
      padding-inline: var(--_field-padding-inline);
      z-index: 1;
    }

    /* Auto-fit */
    &.auto-fit {
      inline-size: auto;
      :where(& input, & textarea) {
        field-sizing: content;
      }
    }

    /* Validation */
    &.error {
      --_accent-color: var(--color-9);
      --_border-color: var(--color-9);
      --_filled-border-color: var(--color-9);
      --_label-color: var(--color-9);
      --_supporting-text-color: var(--color-9);
    }

    /*
  * Variant: Filled
  */
    &.filled {
      --_bg-color: var(--surface-tonal);
      *:focus-visible {
        outline: 0;
      }

      /* Base style */
      & input,
      & textarea,
      & select {
        border-block-end-color: var(--_filled-border-color);
        border-block-start-color: transparent;
        border-inline-color: transparent;
        border-radius: 0;
      }

      & input[type="color"] {
        border-inline: none;
      }

      /* Bottom line */
      &::before {
        background-color: var(--_filled-border-color);
        block-size: calc(var(--field-border-width) + 1px);
        content: "";
        inline-size: 100%;
        margin-block-end: calc(-1 * (var(--field-border-width) * 2));
        transform: scaleX(0);
        translate: 0 calc(-1 * (var(--field-border-width) * 2));
        z-index: 1;

        @media (prefers-reduced-motion: no-preference) {
          transition: transform 0.3s var(--ease-3), translate 0.2s var(--ease-3);
        }
      }

      /* Label */
      .label {
        background-color: var(--_bg-color);
      }

      &:not(:has([disabled], :has(input[type="color"]))) {
        /* Hover */
        &:hover {
          --_bg-color: light-dark(
            oklch(from var(--surface-tonal) calc(l * 0.93) c h),
            oklch(from var(--surface-tonal) calc(l * 1.1) c h)
          );
        }
      }

      /*
    * Label transitions
    * Triggered by:
    * - focus
    * - filled form fields (except color inputs)
    * - non-empty select options
    */
      &:has(.label) {
        &:focus-within,
        &:has(
            :where(input:not(:where([type="color"])), textarea):not(
                :placeholder-shown
              )
          ),
        &:has(option[value=""]:not(:checked)),
        &:has(option:checked:not([value=""])) {
          :where(input, textarea) {
            padding-block: calc(var(--_field-padding-block) * 1.7)
              calc(var(--_field-padding-block) * 0.3);
          }

          select > button,
          select:not(:has(button)) {
            padding-block: calc(var(--_field-padding-block) * 1.7)
              calc(var(--_field-padding-block) * 0.3);
          }

          .label {
            margin-block-start: calc(-1 * var(--size-5));
            margin-inline-start: calc(var(--_field-padding-inline) / 2);
            padding-inline: calc(var(--_field-padding-inline) / 2);
          }

          &:has(textarea) {
            .label {
              margin-block-start: var(--size-1);
            }
          }
        }
      }

      /* Element states */
      &:hover {
        &::before {
          transform: scaleX(1);
        }
      }
      &:focus-within {
        & input,
        & textarea,
        & select {
          border-block-end-color: var(--_accent-color);
        }

        &::before {
          background-color: var(--_accent-color);
          transform: scaleX(1) translateX(0px);
        }
      }
    }

    /* Disabled */
    &:where(:has([disabled])) {
      &::before {
        display: none;
      }
      :where(input, textarea, select) {
        cursor: not-allowed;
        opacity: 0.7;

        * {
          pointer-events: none;
        }
      }
    }

    /* Read-only */
    &:where(:has([readonly])) {
      &::before {
        display: none;
      }
      :where(input, textarea, select) {
        cursor: not-allowed;

        * {
          pointer-events: none;
        }
      }
    }

    /* Sizes */
    &.small {
      --_field-padding-block: var(--size-2);
      --_height: var(--field-size-small);

      &:has(input[type="color"]) {
        .label {
          line-height: 1.5;
        }
      }

      &:has(textarea) {
        .label {
          align-self: center;
          margin-block-start: unset;
        }
      }

      /*
    * Label transitions
    * Triggered by:
    * - focus
    * - filled form fields (except color inputs)
    * - non-empty select options
    */
      &:focus-within,
      &:has(
          :where(input:not([type="color"]), textarea):not(:placeholder-shown)
        ),
      &:has(option[value=""]:not(:checked)),
      &:has(option:checked:not([value=""])) {
        .label {
          margin-block-start: -2.2rem;
          margin-inline-start: var(--size-1);
          padding-inline: var(--size-1);
        }

        &:not(.filled):has(textarea) {
          .label {
            margin-block-start: -0.35rem;
          }
        }
      }
    }
  }
}

@layer components.extended {
  :where(.field > select) {
    position: relative;

    /* Default arrow */
    &::picker-icon {
      block-size: 0;
      border-block-start: 5px solid;
      border-inline: 5px solid transparent;
      color: currentColor;
      content: "";
      inline-size: 0;
      inset: 50% var(--size-3) auto auto;
      pointer-events: none;
      position: absolute;
      translate: 0 -50%;
    }

    &:open {
      &::picker-icon {
        rotate: 180deg;
      }
    }

    /* Select popover */
    &::picker(select) {
      /* Animation on-stage styles */
      border: 0;
      box-shadow: var(--shadow-2);
      opacity: 1;
      padding: 0;
      scale: 1;

      /* Animation starting styles */
      @starting-style {
        opacity: 0;
        transform: scale(0.9);
      }

      @media (prefers-reduced-motion: no-preference) {
        transition: display 0.2s allow-discrete, opacity 0.2s var(--ease-3),
          overlay 0.2s allow-discrete, scale 0.2s var(--ease-3);
      }
    }

    /* Animation off-stage styles */
    &:not(:open)::picker(select) {
      opacity: 0;
      scale: 0.9;
    }

    button {
      background-color: transparent;
      display: flex;
      inline-size: 100%;
      margin: 0;
      position: relative;

      selectedcontent {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }

    .list {
      /* Groups */
      [role="group"] {
        label {
          background-color: light-dark(var(--gray-3), var(--gray-13));
          color: light-dark(
            oklch(from var(--text-color-1) calc(l * 0.75) c h),
            oklch(from var(--text-color-1) calc(l * 1.25) c h)
          );
          font-weight: 500;
          overflow: hidden;
          padding-inline: var(--size-2);
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        &:not(:first-child),
        option:first-of-type {
          margin-block-start: var(--size-2);
        }

        option:last-of-type,
        &:last-child {
          option:last-of-type {
            margin-block-end: 0;
          }
        }
      }

      /* Option */
      option {
        /* Checkmark */
        /* TODO - checkmark should be the final version of the checkmark API. Follow the development of this and remove redundant psuedo stuff. */
        &::check {
          display: none;
        }
        &::checkmark {
          display: none;
        }
        &::before {
          display: none;
        }

        &:focus-visible {
          outline-offset: -1px;
        }
      }
    }
  }

  :where(.field:has(> select)) {
    /* Size */
    &.small {
      button {
        padding-block: var(--size-1);
        padding-inline: var(--size-2) var(--size-7);

        &::after {
          inset-inline-end: var(--size-2);
        }
      }
    }

    /*
    * Non-experimental Select
    *
    * Hack to get the arrow working. Pseudo elements aren't allowed on the `<select>` element, so need to add it on the `.field` class instead. Noting this down if an `:after` element would be needed on a `.field`.
    */
    &:not(:has(button)) {
      select {
        appearance: none;
      }

      /* Arrow */
      &::after {
        align-self: center;
        block-size: 0;
        border-block-start: 5px solid;
        border-inline: 5px solid transparent;
        content: "";
        display: inline-block;
        flex-shrink: 0;
        grid-column: 1/-1;
        grid-row: 1;
        inline-size: 0;
        inset-inline-end: var(--size-3);
        justify-self: end;
        pointer-events: none;
        position: relative;
      }
    }
  }

  select:has(button),
  ::picker(select) {
    appearance: base-select;
  }
}

@layer components.extended {
  :where(
      .field:has(
          :where(
              input[type="date"],
              input[type="datetime-local"],
              input[type="email"],
              input[type="month"],
              input[type="number"],
              input[type="password"],
              input[type="search"],
              input[type="tel"],
              input[type="text"],
              input[type="time"],
              input[type="url"],
              input[type="week"]
            )
        )
    ) {
    /* Sizes */
    &.small {
      input {
        padding-inline: var(--size-2);
      }
    }
  }

  /* Autosuggest */
  :where(.field:has(input[list])) {
    /* Hide native arrow */
    input::-webkit-calendar-picker-indicator {
      opacity: 0;
      position: absolute;
      cursor: pointer;
      pointer-events: none;
    }
  }
  :where(
      .field:has(input[list]:placeholder-shown),
      .field:has(input[list]):where(:focus-within, :hover)
    ) {
    /* Arrow */
    &::after {
      block-size: 0;
      border-block-start: 5px solid;
      border-inline: 5px solid transparent;
      content: "";
      display: inline-block;
      flex-shrink: 0;
      inline-size: 0;
      inset: 50% var(--size-3) auto auto;
      pointer-events: none;
      position: absolute;
      translate: 0 -50%;
    }
  }
}

@layer components.extended {
  :where(.field:has(textarea)) {
    textarea {
      block-size: auto;
      field-sizing: content;
      min-block-size: 5rem;
      resize: vertical;
    }

    /* Size */
    &.small {
      textarea {
        min-block-size: var(--_height);
      }
    }

    /* Auto-fit */
    &.auto-fit {
      textarea {
        min-block-size: var(--_height);
        resize: both;
      }
    }
  }
}

@layer components.extended {
  @scope (.rich-text) to (.not-rich-text) {
    a {
      color: var(--primary);
      cursor: pointer;
      font-size: inherit;
      font-weight: 700;
      line-height: inherit;
      text-decoration: underline;
      text-decoration-color: var(--primary);
      text-underline-offset: 2px;

      &[href] {
        &:hover,
        &:focus-visible {
          color: var(--primary-light);
        }
      }
    }

    /* Blockquote */
    blockquote {
      font-size: inherit;
      line-height: inherit;
      :first-child {
        margin-block-start: 0;
      }

      :last-child {
        margin-block-end: 0;
      }
    }

    /* Text */
    p {
      font-size: inherit;
      line-height: inherit;
      margin-block: 1.25em;
    }

    :is(h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6) {
      color: var(--text-color-1);

      & + *:not(&) {
        margin-block-start: 0;
      }
    }

    h1,
    .h1 {
      font-size: var(--font-size-h1, var(--font-size-7));
      letter-spacing: -0.02em;
      line-height: 1.1111111;
      margin-block: 0 0.8888889em;
    }

    h2,
    .h2 {
      font-size: var(--font-size-h2, var(--font-size-5, 2rem));
      letter-spacing: -0.02em;
      line-height: 1.3333333;
      margin-block: 2em 1em;
    }

    h3,
    .h3 {
      font-size: var(--font-size-h3, var(--font-size-4, 1.5rem));
      letter-spacing: -0.01em;
      line-height: 1.6;
      margin-block: 1.6em 0.6em;
    }

    h4,
    .h4 {
      font-size: var(--font-size-h4, var(--font-size-3, 1.25rem));
      letter-spacing: -0.01em;
      line-height: 1.5;
      margin-block: 1.5em 0.5em;
    }

    h5,
    .h5 {
      font-size: var(--font-size-h5, var(--font-size-2, 1.1rem));
      line-height: 1;
      margin-block: 0 var(--size-1);
    }

    h6,
    .h6 {
      font-size: var(--font-size-h6, var(--font-size-1, 1rem));
      line-height: 1;
      margin-block: 0 var(--size-1);
    }

    /** Overline */
    :where(.overline, hgroup > :where(p, .p):first-of-type:first-child) {
      color: light-dark(
        oklch(from var(--text-color-2) calc(l * 1.25) c h),
        oklch(from var(--text-color-2) calc(l * 0.75) c h)
      );
      font-size: var(--font-size-xs);
      font-weight: 500;
      letter-spacing: 0.06em;
      line-height: 2.5;
      text-transform: uppercase;
    }

    hgroup {
      & > p {
        margin: 0;
      }

      & > :where(h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6) {
        margin-block-end: 0.4em;
      }

      & + * {
        margin-block-start: 3em;
      }

      /* The second p element */
      & > :where(p, .p):last-of-type:last-child:not(:first-child) {
        color: oklch(from currentColor l c h / 75%);
        font-size: var(--font-size-lg);
        line-height: 1.6;
      }
    }

    /* Lists */
    ul:not([class]) {
      list-style-type: disc;
    }

    ol:not([class]) {
      list-style-type: decimal;
    }

    :where(ul, ol):not([class]) {
      display: grid;
      font-size: inherit;
      gap: 0.5em;
      line-height: inherit;
      margin-block-start: 1.25em;
      margin-block-end: 1.25em;
      padding-inline-start: 1.625em;

      li {
        padding-inline-start: 0.375em;
      }
    }

    /* Nested lists */
    :where(ul ul),
    :where(ul ol),
    :where(ol ul),
    :where(ol ol) {
      margin-block-start: 0.75em;
      margin-block-end: 0.75em;
    }

    /* Description lists */
    :where(dl) {
      font-size: inherit;
      line-height: inherit;
      margin-block-start: 1.25em;
      margin-block-end: 1.25em;

      dt {
        margin-block-start: 1.25em;
      }

      dd {
        margin-block-start: 0.5em;
        padding-inline-start: 1.625em;
      }
    }

    /* Figures */
    figure {
      margin-block: 2em;

      & > * {
        margin-block: 0;
      }

      & figcaption {
        font-size: 0.875em;
        line-height: 1.4285714;
        margin-block-start: 0.8571429em;
      }
    }

    /* Remove top margin from first child */
    & > :first-child {
      margin-block-start: 0;
    }

    /* Remove bottom margin from last child */
    & > :last-child {
      margin-block-end: 0;
    }

    /* Horizontal rules */
    hr {
      & + * {
        margin-block-start: 0;
      }
    }
  }
}