@layer components {
  .ui-text {
    margin: 0;
  }

  [data-slot="text"][data-size="2xs"] {
    font-size: var(
      --font-size-2xs,
      calc(var(--font-size-base) / var(--font-size-ratio) / var(--font-size-ratio))
    );
  }
  [data-slot="text"][data-size="xs"] {
    font-size: var(--font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)));
  }
  [data-slot="text"][data-size="sm"] {
    font-size: var(--font-size-sm, var(--font-size-base));
  }
  [data-slot="text"][data-size="md"] {
    font-size: var(--font-size-base);
  }
  [data-slot="text"][data-size="lg"] {
    font-size: var(
      --font-size-lg,
      calc(var(--font-size-base) * var(--font-size-ratio) * var(--font-size-ratio))
    );
  }
  [data-slot="text"][data-size="xl"] {
    font-size: var(
      --font-size-xl,
      calc(
        var(--font-size-base) * var(--font-size-ratio) * var(--font-size-ratio) *
          var(--font-size-ratio)
      )
    );
  }
  [data-slot="text"][data-size="2xl"] {
    font-size: var(
      --font-size-2xl,
      calc(
        var(--font-size-base) * var(--font-size-ratio) * var(--font-size-ratio) *
          var(--font-size-ratio) * var(--font-size-ratio)
      )
    );
  }

  [data-slot="text"][data-size="3xl"],
  [data-slot="text"][data-size="4xl"],
  [data-slot="text"][data-size="5xl"] {
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-tight);
  }
  [data-slot="text"][data-size="3xl"] {
    font-size: var(
      --font-size-3xl,
      calc(
        var(--font-size-display) / var(--font-size-display-ratio) / var(--font-size-display-ratio)
      )
    );
  }
  [data-slot="text"][data-size="4xl"] {
    font-size: var(
      --font-size-4xl,
      calc(var(--font-size-display) / var(--font-size-display-ratio))
    );
  }
  [data-slot="text"][data-size="5xl"] {
    font-size: var(--font-size-5xl, var(--font-size-display));
  }

  [data-slot="text"][data-weight="regular"],
  [data-slot="heading"][data-weight="regular"] {
    font-weight: var(--font-weight-normal);
  }
  [data-slot="text"][data-weight="medium"],
  [data-slot="heading"][data-weight="medium"] {
    font-weight: var(--font-weight-medium);
  }
  [data-slot="text"][data-weight="semibold"],
  [data-slot="heading"][data-weight="semibold"] {
    font-weight: var(--font-weight-semibold);
  }

  [data-slot="text"][data-weight="bold"],
  [data-slot="heading"][data-weight="bold"] {
    font-weight: var(--font-weight-bold);
  }

  code[data-slot="text"],
  kbd[data-slot="text"] {
    font-family: var(--font-family-mono, ui-monospace, "SFMono-Regular", monospace);
  }

  [data-slot="text"][data-tone="default"],
  [data-slot="heading"][data-tone="default"],
  [data-slot="icon"][data-tone="default"] {
    color: hsl(var(--foreground));
  }
  [data-slot="text"][data-tone="muted"],
  [data-slot="heading"][data-tone="muted"],
  [data-slot="icon"][data-tone="muted"] {
    color: hsl(var(--muted-foreground));
  }

  [data-slot="text"][data-tone="inherit"],
  [data-slot="heading"][data-tone="inherit"],
  [data-slot="icon"][data-tone="inherit"] {
    color: inherit;
  }
  [data-slot="text"][data-tone="primary"],
  [data-slot="heading"][data-tone="primary"],
  [data-slot="icon"][data-tone="primary"] {
    color: hsl(var(--primary));
  }

  [data-slot="text"][data-tone="success"],
  [data-slot="heading"][data-tone="success"],
  [data-slot="icon"][data-tone="success"] {
    color: hsl(var(--text-success));
  }
  [data-slot="text"][data-tone="warning"],
  [data-slot="heading"][data-tone="warning"],
  [data-slot="icon"][data-tone="warning"] {
    color: hsl(var(--text-warning));
  }
  [data-slot="text"][data-tone="destructive"],
  [data-slot="heading"][data-tone="destructive"],
  [data-slot="icon"][data-tone="destructive"] {
    color: hsl(var(--text-error));
  }
  [data-slot="text"][data-tone="info"],
  [data-slot="heading"][data-tone="info"],
  [data-slot="icon"][data-tone="info"] {
    color: hsl(var(--text-info));
  }

  [data-slot="text"][data-align="start"],
  [data-slot="heading"][data-align="start"] {
    text-align: start;
  }
  [data-slot="text"][data-align="center"],
  [data-slot="heading"][data-align="center"] {
    text-align: center;
  }
  [data-slot="text"][data-align="end"],
  [data-slot="heading"][data-align="end"] {
    text-align: end;
  }
  [data-slot="text"][data-truncate],
  [data-slot="heading"][data-truncate] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }

  [data-slot="text"][data-whitespace="pre-wrap"] {
    white-space: pre-wrap;
    overflow-wrap: break-word;
    min-inline-size: 0;
  }

  [data-slot="text"][data-clamp] {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--text-clamp, 2);
    line-clamp: var(--text-clamp, 2);
    overflow: hidden;
    min-width: 0;
  }

  [data-slot="text"][data-link] {
    text-decoration-line: var(--text-link-decoration-line);
    text-underline-offset: var(--text-link-underline-offset);
    text-decoration-thickness: var(--text-link-underline-width);
  }

  [data-slot="text"][data-link][data-tone="primary"]:not([data-disabled]) {
    color: hsl(var(--text-link, from hsl(var(--primary)) var(--text-link-channels)));
  }
  [data-slot="text"][data-link]:hover,
  [data-slot="text"][data-link]:focus-visible {
    text-decoration-line: underline;
  }

  [data-slot="text"][data-tabular] {
    font-variant-numeric: tabular-nums;
  }
  [data-slot="text"][data-mono] {
    font-family: var(--font-family-mono, ui-monospace, "SFMono-Regular", monospace);
  }

  [data-slot="heading"] {
    margin: 0;
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--letter-spacing-tight);
    line-height: var(--line-height-tight);
  }

  [data-slot="heading"][data-level="1"]:not([data-size]) {
    font-size: var(
      --heading-h1,
      calc(
        var(--font-size-base) * var(--font-size-ratio) * var(--font-size-ratio) *
          var(--font-size-ratio)
      )
    );
  }
  [data-slot="heading"][data-level="2"]:not([data-size]) {
    font-size: var(
      --heading-h2,
      calc(var(--font-size-base) * var(--font-size-ratio) * var(--font-size-ratio))
    );
  }
  [data-slot="heading"][data-level="3"]:not([data-size]) {
    font-size: var(--heading-h3, var(--font-size-base));
  }
  [data-slot="heading"][data-level="4"]:not([data-size]) {
    font-size: var(
      --heading-h4,
      var(--font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)))
    );
  }

  [data-slot="heading"][data-size="2xs"] {
    font-size: var(
      --font-size-2xs,
      calc(var(--font-size-base) / var(--font-size-ratio) / var(--font-size-ratio))
    );
  }
  [data-slot="heading"][data-size="xs"] {
    font-size: var(--font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)));
  }
  [data-slot="heading"][data-size="sm"] {
    font-size: var(--font-size-sm, var(--font-size-base));
  }
  [data-slot="heading"][data-size="md"] {
    font-size: var(--font-size-base);
  }
  [data-slot="heading"][data-size="lg"] {
    font-size: var(
      --font-size-lg,
      calc(var(--font-size-base) * var(--font-size-ratio) * var(--font-size-ratio))
    );
  }
  [data-slot="heading"][data-size="xl"] {
    font-size: var(
      --font-size-xl,
      calc(
        var(--font-size-base) * var(--font-size-ratio) * var(--font-size-ratio) *
          var(--font-size-ratio)
      )
    );
  }
  [data-slot="heading"][data-size="2xl"] {
    font-size: var(
      --font-size-2xl,
      calc(
        var(--font-size-base) * var(--font-size-ratio) * var(--font-size-ratio) *
          var(--font-size-ratio) * var(--font-size-ratio)
      )
    );
  }
  [data-slot="heading"][data-size="3xl"] {
    font-size: var(
      --font-size-3xl,
      calc(
        var(--font-size-display) / var(--font-size-display-ratio) / var(--font-size-display-ratio)
      )
    );
  }
  [data-slot="heading"][data-size="4xl"] {
    font-size: var(
      --font-size-4xl,
      calc(var(--font-size-display) / var(--font-size-display-ratio))
    );
  }
  [data-slot="heading"][data-size="5xl"] {
    font-size: var(--font-size-5xl, var(--font-size-display));
  }
}

@layer components {

  [data-slot="heading"][data-level="5"] {
    font-size: var(
      --heading-h5,
      var(
        --font-size-2xs,
        calc(var(--font-size-base) / var(--font-size-ratio) / var(--font-size-ratio))
      )
    );
  }

  [data-slot="text"][data-disabled],
  [data-slot="heading"][data-disabled] {
    color: hsl(var(--text-disabled));
    cursor: not-allowed;
    user-select: none;
  }

  [data-slot="text"][data-disabled][data-link]:hover,
  [data-slot="text"][data-disabled][data-link]:active {
    color: hsl(var(--text-disabled));
  }

  [data-slot="text"] mark,
  [data-slot="heading"] mark {
    padding: 0;
    background-color: var(--text-mark-background);
    color: var(--text-mark-foreground);
  }
  [data-slot="text"] u,
  [data-slot="heading"] u {
    text-decoration-line: underline;
    text-decoration-skip-ink: auto;
  }
  [data-slot="text"] del,
  [data-slot="heading"] del {
    text-decoration-line: line-through;
  }
  [data-slot="text"] strong,
  [data-slot="heading"] strong {
    font-weight: var(--font-weight-bold);
  }
  [data-slot="text"] code,
  [data-slot="text"] kbd,
  [data-slot="heading"] code,
  [data-slot="heading"] kbd {
    background: hsl(var(--muted));
    border: var(--stroke-hairline) solid hsl(var(--border));
    border-radius: var(--prose-code-radius);
    padding-inline: var(--prose-code-space-inline);
    font-family: var(--font-family-mono, ui-monospace, "SFMono-Regular", monospace);
    font-size: var(--prose-code-font-size);
  }

  [data-slot="text"] kbd,
  [data-slot="heading"] kbd {
    border-block-end-width: var(--stroke-md);
  }

  .ui-typography-actions {
    display: inline;
    margin-inline-start: var(--text-action-gap);
  }
  .ui-typography-actions[data-placement="start"] {
    margin-inline-start: 0;
    margin-inline-end: var(--text-action-gap);
  }

  .ui-typography-action {
    display: inline-flex;
    align-items: center;
    gap: var(--text-action-gap);
    margin-inline-start: var(--text-action-gap);
    border: 0;
    background: none;
    padding: 0;
    color: var(--text-action-color, hsl(var(--primary)));
    font: inherit;
    cursor: pointer;
    vertical-align: baseline;
  }
  .ui-typography-actions[data-placement="start"] > .ui-typography-action:first-child,
  .ui-typography-actions > .ui-typography-action:first-child {
    margin-inline-start: 0;
  }
  .ui-typography-action:hover,
  .ui-typography-action:focus-visible {
    color: var(
      --text-action-color-hover,
      hsl(var(--primary-hover, from hsl(var(--primary)) var(--primary-hover-channels)))
    );
  }

  .ui-typography-action[data-copied] {
    color: hsl(var(--text-success));
  }
  .ui-typography-icon {
    inline-size: var(--text-action-size);
    block-size: var(--text-action-size);
  }
  .ui-typography-icon-spin {
    animation: ui-typography-spin var(--duration-loop) linear infinite;
  }

  @media (prefers-reduced-motion: reduce) {
    .ui-typography-icon-spin {
      animation: none;
    }
  }

  .ui-typography-content[data-clamp] {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--text-clamp, 2);
    line-clamp: var(--text-clamp, 2);
    overflow: hidden;
    min-width: 0;
  }
  .ui-typography-content[data-truncate] {
    display: inline-block;
    max-inline-size: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
  }

  [data-slot="text"][data-ellipsis][data-truncate] {
    display: inline-block;
    max-inline-size: 100%;
    vertical-align: bottom;
  }

  .ui-typography-edit {
    position: relative;
  }
  .ui-typography-edit-textarea {
    font-size: inherit;
    line-height: inherit;
    font-family: inherit;
    font-weight: inherit;
  }
  .ui-typography-edit-confirm {
    position: absolute;
    inset-inline-end: var(--space-2);
    inset-block-end: var(--space-1);
    color: hsl(var(--muted-foreground));
    pointer-events: none;
  }

  .ui-typography {
    color: hsl(var(--foreground));
    overflow-wrap: break-word;
  }
}

@layer components {
  @keyframes ui-typography-spin {
    to {
      transform: rotate(1turn);
    }
  }
}