@layer utilities {
  /* Text */
  .txt-xx-small {
    font-size: var(--text-xx-small);
  }
  .txt-x-small {
    font-size: var(--text-x-small);
  }
  .txt-small {
    font-size: var(--text-small);
  }
  .txt-normal {
    font-size: var(--text-normal);
  }
  .txt-medium {
    font-size: var(--text-medium);
  }
  .txt-large {
    font-size: var(--text-large);
  }
  .txt-x-large {
    font-size: var(--text-x-large);
  }
  .txt-xx-large {
    font-size: var(--text-xx-large);
  }

  .txt-align-center {
    text-align: center;
  }
  .txt-align-start {
    text-align: start;
  }
  .txt-align-end {
    text-align: end;
  }

  .txt-current {
    color: currentColor;
  }
  .txt-ink {
    color: var(--color-ink);
  }
  .txt-reversed {
    color: var(--color-ink-inverted);
  }
  .txt-negative {
    color: var(--color-negative);
  }
  .txt-positive {
    color: var(--color-positive);
  }
  .txt-subtle {
    color: var(--color-ink-dark);
  }
  .txt-alert {
    color: var(--color-marker);
  }
  .txt-undecorated {
    text-decoration: none;
  }
  .txt-underline {
    text-decoration: underline;
  }
  .txt-tight-lines {
    line-height: 1.2;
  }
  .txt-nowrap {
    white-space: nowrap;
  }
  .txt-balance {
    text-wrap: balance;
  }
  .txt-break {
    word-break: break-word;
  }
  .txt-uppercase {
    text-transform: uppercase;
  }
  .txt-capitalize {
    text-transform: capitalize;
  }
  .txt-capitalize-first-letter::first-letter {
    text-transform: capitalize;
  }
  .txt-link {
    color: var(--color-link);
    text-decoration: underline;
  }

  .leading-loose {
    letter-spacing: 0.02em;
  }

  .font-weight-normal {
    font-weight: 400;
  }
  .font-weight-medium {
    font-weight: 500;
  }
  .font-weight-semibold {
    font-weight: 600;
  }
  .font-weight-bold {
    font-weight: 700;
  }
  .font-weight-black {
    font-weight: 900;
  }

  /* Flexbox and Grid */
  .justify-end {
    justify-content: end;
  }
  .justify-start {
    justify-content: start;
  }
  .justify-center {
    justify-content: center;
  }
  .justify-space-between {
    justify-content: space-between;
  }

  .align-center {
    align-items: center;
  }
  .align-start {
    align-items: start;
  }
  .align-end {
    align-items: end;
  }

  .align-self-center {
    align-self: center;
  }
  .align-self-end {
    align-self: end;
  }
  .align-self-start {
    align-self: start;
  }

  .v-align-middle {
    vertical-align: middle;
  }

  .contain {
    contain: inline-size;
  }

  .display-inline {
    display: inline;
  }

  .flex {
    display: flex;
  }
  .flex-inline {
    display: inline-flex;
  }
  .flex-column {
    flex-direction: column;
  }
  .flex-wrap {
    flex-wrap: wrap;
  }

  .flex-1 {
    flex: 1;
  }
  .flex-item-grow {
    flex-grow: 1;
  }
  .flex-item-shrink {
    flex-shrink: 1;
  }
  .flex-item-no-shrink {
    flex-shrink: 0;
  }
  .flex-item-justify-start {
    margin-inline-end: auto;
  }
  .flex-item-justify-end {
    margin-inline-start: auto;
  }

  .gap {
    column-gap: var(--column-gap, var(--inline-space));
    row-gap: var(--row-gap, var(--block-space));
  }

  .gap-half {
    column-gap: var(--column-gap, var(--inline-space-half));
    row-gap: var(--row-gap, var(--block-space-half));
  }

  .gap-none {
    --column-gap: 0;
    --row-gap: 0;

    gap: 0;
  }

  /* Sizing */
  .full-width {
    inline-size: 100%;
  }
  .min-width {
    min-inline-size: 0;
  }
  .half-width {
    inline-size: 50%;
  }
  .max-width {
    max-inline-size: 100%;
  }
  .min-content {
    inline-size: min-content;
  }
  .fit-content {
    inline-size: fit-content;
  }
  .max-inline-size {
    max-inline-size: 100%;
  }

  /* Overflow */
  .overflow-x {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
  }
  .overflow-y {
    overflow-y: auto;
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
  }
  .overflow-clip {
    text-overflow: clip;
    white-space: nowrap;
    overflow: hidden;
  }
  .overflow-ellipsis {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  .overflow-line-clamp {
    -webkit-line-clamp: var(--lines, 2);
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: clip;
    white-space: normal;
  }

  /* Mouse pointer */
  .non-clickable {
    cursor: default;
    pointer-events: none;
  }

  .cursor-pointer {
    cursor: pointer;
  }

  /* Padding */
  .pad {
    padding: var(--block-space) var(--inline-space);
  }
  .pad-double {
    padding: var(--block-space-double) var(--inline-space-double);
  }

  .pad-block {
    padding-block: var(--block-space);
  }
  .pad-block-start {
    padding-block-start: var(--block-space);
  }
  .pad-block-end {
    padding-block-end: var(--block-space);
  }
  .pad-block-half {
    padding-block: var(--block-space-half);
  }
  .pad-block-start-half {
    padding-block-start: var(--block-space-half);
  }

  .pad-inline {
    padding-inline: var(--inline-space);
  }
  .pad-inline-start {
    padding-inline-start: var(--inline-space);
  }
  .pad-inline-end {
    padding-inline-end: var(--inline-space);
  }
  .pad-inline-half {
    padding-inline: var(--inline-space-half);
  }
  .pad-inline-double {
    padding-inline: var(--inline-space-double);
  }

  .unpad {
    padding: 0;
  }
  .unpad-block-end {
    padding-block-end: 0;
  }
  .unpad-inline {
    padding-inline: 0;
  }

  /* Margins */
  .margin {
    margin: var(--block-space) var(--inline-space);
  }
  .margin-block {
    margin-block: var(--block-space);
  }
  .margin-block-half {
    margin-block: var(--block-space-half);
  }
  .margin-block-start {
    margin-block-start: var(--block-space);
  }
  .margin-block-start-half {
    margin-block-start: var(--block-space-half);
  }
  .margin-block-start-auto {
    margin-block-start: auto;
  }
  .margin-block-end {
    margin-block-end: var(--block-space);
  }
  .margin-block-end-half {
    margin-block-end: var(--block-space-half);
  }
  .margin-block-double {
    margin-block: var(--block-space-double);
  }
  .margin-block-end-double {
    margin-block-end: var(--block-space-double);
  }
  .margin-block-start-double {
    margin-block-start: var(--block-space-double);
  }

  .margin-inline {
    margin-inline: var(--inline-space);
  }
  .margin-inline-start {
    margin-inline-start: var(--inline-space);
  }
  .margin-inline-start-half {
    margin-inline-start: var(--inline-space-half);
  }
  .margin-inline-end {
    margin-inline-end: var(--inline-space);
  }
  .margin-inline-end-half {
    margin-inline-end: var(--inline-space-half);
  }
  .margin-inline-half {
    margin-inline: var(--inline-space-half);
  }
  .margin-inline-double {
    margin-inline: var(--inline-space-double);
  }

  .margin-none {
    margin: 0;
  }
  .margin-none-block {
    margin-block: 0;
  }
  .margin-none-block-start {
    margin-block-start: 0;
  }
  .margin-none-block-end {
    margin-block-end: 0;
  }

  .margin-none-inline {
    margin-inline: 0;
  }
  .margin-none-inline-start {
    margin-inline-start: 0;
  }
  .margin-none-inline-end {
    margin-inline-end: 0;
  }

  .center {
    margin-inline: auto;
  }
  .center-block {
    margin-block: auto;
  }

  /* Position */
  .position-relative {
    position: relative;
  }
  .position-sticky {
    position: sticky;
    inset: var(--inset, 0 auto auto auto);
    z-index: var(--z, 1);
  }

  /* Fills */
  .fill {
    background-color: var(--color-canvas);
  }
  .fill-black {
    background-color: var(--color-ink);
  }
  .fill-white {
    background-color: var(--color-ink-inverted);
  }
  .fill-shade {
    background-color: var(--color-ink-lightest);
  }
  .fill-selected {
    background-color: var(--color-selected);
  }
  .fill-highlight {
    background-color: var(--color-highlight);
  }
  .fill-transparent {
    background-color: transparent;
  }

  .fill-highlighter {
    display: inline-block;
    position: relative;
    z-index: 1;

    &::before {
      background-color: var(--color-highlight);
      border-radius: 0.2em;
      content: "";
      inset-block: 0;
      inset-inline: -0.1em;
      position: absolute;
      transform: skewX(-10deg) rotate(1deg);
      z-index: -1;
    }
  }

  .translucent {
    opacity: var(--opacity, 0.66);
  }

  /* Borders */
  .border {
    border: var(--border-size, 1px) var(--border-style, solid)
      var(--border-color, var(--color-ink-light));
  }
  .border-block {
    border-block: var(--border-size, 1px) var(--border-style, solid)
      var(--border-color, var(--color-ink-light));
  }
  .border-bottom {
    border-block-end: var(--border-size, 1px) var(--border-style, solid)
      var(--border-color, var(--color-ink-light));
  }
  .border-top {
    border-block-start: var(--border-size, 1px) var(--border-style, solid)
      var(--border-color, var(--color-ink-light));
  }
  .borderless {
    border: 0;
  }

  /* Border radius */
  .border-radius {
    border-radius: var(--border-radius, var(--radius));
  }

  /* Chamfered corners. Opt-in, and deliberately not baked into .btn or .panel:
     clip-path cuts away the area outside the border box, which is exactly where
     the focus ring is drawn. Put these on a wrapper around a focusable element,
     or on non-interactive surfaces. */
  .chamfer {
    clip-path: polygon(
      0 0,
      calc(100% - var(--chamfer, var(--chamfer-small))) 0,
      100% var(--chamfer, var(--chamfer-small)),
      100% 100%,
      var(--chamfer, var(--chamfer-small)) 100%,
      0 calc(100% - var(--chamfer, var(--chamfer-small)))
    );
  }

  .chamfer-large {
    --chamfer: var(--chamfer-large);
  }

  /* Shadows */
  .shadow {
    box-shadow: var(--shadow);
  }

  /* Lists */
  :where(.list-style-none) {
    list-style: none;
    margin: 0 auto;
    padding: 0;
  }

  :where(.list-unindented) {
    padding-inline-start: 1.25em;
  }

  /* Accessibility */
  .visually-hidden,
  .for-screen-reader {
    block-size: 1px;
    clip-path: inset(50%);
    inline-size: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
  }

  /* Visibility */
  [hidden] {
    display: none !important;
  }
  .display-contents,
  [contents] {
    display: contents;
  }

  .hide-in-pwa {
    @media (display-mode: standalone) {
      display: none;
    }
  }

  .hide-in-browser {
    @media (display-mode: browser) {
      display: none;
    }
  }

  .hide-focus-ring {
    --focus-ring-size: 0;
  }

  .hide-on-touch {
    @media (any-hover: none) {
      display: none;
    }
  }

  .show-on-touch {
    display: none;

    @media (any-hover: none) {
      display: unset;
    }
  }

  .show-on-native {
    body:not([data-platform~="native"]) & {
      display: none;
    }
  }

  .hide-scrollbar {
    -ms-overflow-style: none; /* Edge */
    scrollbar-width: none; /* FF */

    /* Chrome/Safari/Opera */
    &::-webkit-scrollbar {
      display: none;
    }
  }

  .hide-on-dark-mode {
    html[data-theme="dark"] & {
      display: none;
    }

    html:not([data-theme]) & {
      @media (prefers-color-scheme: dark) {
        display: none;
      }
    }
  }

  .hide-on-light-mode {
    html[data-theme="light"] & {
      display: none;
    }

    html:not([data-theme]) & {
      @media (prefers-color-scheme: light) {
        display: none;
      }
    }
  }
}