@import 'tailwindcss';

@import './theme.css';
@import './fonts.css';
@import './blog/blog-post-item.css';
@import './blog/blog-toc.css';

/* A scoped blog stylesheet for content typography, images, tables, code, etc. */

/* Enable keyword animations */
@media (prefers-reduced-motion: no-preference) {
  html {
    interpolate-size: allow-keywords;
  }
}

/* Scope blog semantics to .blog, but exclude .blog-reset */
@scope (.blog) to (.blog-reset) {
  /* Enable use of `light-dark()` function */
  color-scheme: light dark;

  /* Variables + base styles */
  :scope {
    /* Colors: defined in theme.css */
    /* Surfaces & UI: defined in theme.css */

    /* Blog-specific variables */
    --color-quote-mark: light-dark(var(--color-stone-300), var(--color-zinc-600));
    --color-blockquote-border: light-dark(var(--color-stone-200), var(--color-zinc-800));

    --color-scroll-cover: light-dark(white, var(--color-zinc-950));
    --color-scroll-cover-transparent: light-dark(
      oklch(100% 0.00011 271.152 / 0),
      oklch(0% 0 0 / 0)
    );
    --color-scroll-shadow: light-dark(oklch(0% 0 0 / 0.2), oklch(0% 0 0 / 40%));
    --color-scroll-shadow-transparent: light-dark(oklch(0% 0 0 / 0), oklch(0% 0 0 / 0));

    /* Sizes */
    --line-height: 1.5;
    --max-width: 48rem;

    &:has(.blog-layout__aside) {
      --max-width: 68rem;
      --toc-width: 18rem;
    }
  }

  /* Base styling for the .blog container */
  & {
    font-family: var(--font-sans);
    font-size: 1rem;
    line-height: var(--line-height);
    color: var(--color-text);
    background-color: var(--color-bg);
    width: 100%;
    max-width: var(--max-width);
    margin: 5rem auto;
    padding: 0 2rem;

    -webkit-font-smoothing: antialiased;
  }

  /* Selection and focus styles scoped to blog content */
  :focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
    border-radius: 0.25rem;
  }

  ::selection {
    background: var(--selection-color);
    color: var(--color-accent);
    text-decoration: dotted underline var(--color-accent);
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
  }

  /* Layout wrapper for post content + Table of Contents */
  .blog-layout {
    display: flex;
    flex-direction: column;
  }

  .blog-layout__content {
    min-width: 0;
  }

  .blog-layout__aside {
    display: none;
    /* Shown on larger screens via media query below */
  }

  .blog-layout__actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-top: 1.5rem;
  }

  .blog-layout__actions-wrapper:has(.blog-layout__actions) {
    margin-top: 3rem;
  }

  .blog-layout__actions-wrapper:has(.blog-layout__actions)::before {
    content: '';
    display: block;
    height: 1px;
    width: 100%;
    background: var(--color-border-light);
    border-radius: 9999px;
  }

  .blog-updates {
    margin-top: 3rem;
    padding-top: 3rem;
    border-top: 1px solid var(--color-border-light);
  }

  .blog-updates__title {
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: unset;
    margin: 0 0 0.75rem;
    line-height: 1;
  }

  .blog-updates__list {
    list-style: none;
    padding: 0;
    padding-left: 0.875rem;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    border-left: 1px dashed var(--color-border);
  }

  .blog-update {
    position: relative;
    padding-left: 0.25rem;
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.45;
    color: var(--color-soft);

    &::before {
      --dot-size: 6px;

      content: '';
      position: absolute;
      left: calc(-0.875rem - (var(--dot-size) + 1px) / 2);
      top: 0.55em;
      width: var(--dot-size);
      height: var(--dot-size);
      border-radius: 9999px;
      background: var(--color-accent);
    }
  }

  .blog-update time {
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
    color: var(--color-faint);
    font-style: normal;
    margin: 0;
  }

  .blog-update p {
    margin: 0 !important;
  }

  /* Layout for larger screens */
  @media (min-width: 48rem) {
    :scope {
      /* Avoid collision with left nav on larger screens */
      padding-left: 4rem;
    }

    .blog-layout {
      flex-direction: row;
      align-items: flex-start;
      gap: 4rem;
    }

    .blog-layout__content {
      flex: 1 1 auto;
    }

    .blog-layout__aside {
      display: block;
      flex: 0 0 var(--toc-width);
      position: sticky;

      --toc-vertical-padding: 3rem;
      top: var(--toc-vertical-padding);
      bottom: var(--toc-vertical-padding);
    }
  }

  /* Headings */
  :is(h1, h2, h3, h4, h5, h6) {
    --base: 1rem;
    --ratio: 1.25;

    @media (max-width: 48rem) {
      --ratio: 1.20;
    }

    font-weight: 700;
    text-wrap: balance;

    /* --lh is defined per heading below */
    line-height: var(--lh);
    margin-top: calc(var(--lh) * 1.25em);
  }

  h1 {
    --lh: 1.1;

    font-size: calc(var(--base) * pow(var(--ratio), 4));
    letter-spacing: -0.02em;
  }

  h2 {
    --lh: 1.1;

    font-size: calc(var(--base) * pow(var(--ratio), 3));
    letter-spacing: -0.01em;
  }

  h3 {
    --lh: 1.2;

    font-size: calc(var(--base) * pow(var(--ratio), 2));
  }

  h4 {
    --lh: 1.3;

    font-size: calc(var(--base) * pow(var(--ratio), 1));
  }

  h5 {
    --lh: 1.3;

    font-size: var(--base);
  }

  h6 {
    --lh: 1.3;

    font-size: var(--base);
    color: var(--color-muted);
  }

  /* Anchor Links */
  h2,
  h3,
  h4,
  h5,
  h6 {
    position: relative;

    .anchor-link {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      left: -1.5rem;
      width: 1.5rem;
      padding-right: 0.25rem;

      display: inline-flex;
      align-items: center;
      justify-content: center;

      opacity: 0;
      color: var(--color-muted);
      text-decoration: none;
      transition: color 100ms;

      &:focus-visible,
      &:hover {
        opacity: 1;
        color: var(--color-text);
      }

      &::after {
        content: '';
        display: inline-block;
        width: 1em;
        height: 1em;

        /* Use SVG as mask, color comes from the link text color */
        background-color: currentColor;
        mask-image: url('./images/icons/link.svg');
        mask-repeat: no-repeat;
        mask-size: contain;
        mask-position: center;
      }
    }

    &:hover .anchor-link {
      opacity: 1;
    }
  }

  /* Typography */
  p {
    margin: 0;
    text-wrap: pretty;

    &:not(:first-child) {
      margin-top: 1rem;
    }

    &:not(:last-child) {
      margin-bottom: 1rem;
    }
  }

  /* Avoid text overflows */
  p,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    overflow-wrap: break-word;
  }

  /* Make text selection look cleaner */
  br::selection {
    background-color: transparent !important;
  }

  /* Links */
  a {
    --link-transition: 100ms;
    text-decoration: dotted underline var(--color-faint);
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;

    transition:
      color var(--link-transition),
      text-decoration-color var(--link-transition);

    &:hover {
      color: var(--color-accent);
      text-decoration-color: var(--color-accent);
      text-decoration-style: solid;
    }
  }

  /* External link icon for links that open in a new tab */
  a[target='_blank']:not(:has(img))::after {
    content: '';
    display: inline-block;
    width: 0.75em;
    height: 0.75em;
    margin-right: -0.15em;
    vertical-align: text-top;

    /* Use SVG as mask, color comes from the link text color */
    background-color: var(--color-faint);
    mask-image: url('./images/icons/arrow-up-right.svg');
    mask-repeat: no-repeat;
    mask-size: contain;
    mask-position: center;

    transition:
      background-color var(--link-transition),
      transform var(--ease-spring);
  }

  a[target='_blank']:not(:has(img)):hover::after {
    background-color: var(--color-accent);
    transform: translate(1.5px, -1.5px);
  }

  /* Mail icon for email links */
  a[href^='mailto:']::before {
    content: '';
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-right: 0.1em;
    vertical-align: text-bottom;

    /* Use SVG as mask, color comes from the link text color */
    background-color: var(--color-faint);
    mask-image: url('./images/icons/email.svg');
    mask-repeat: no-repeat;
    mask-size: contain;
    mask-position: center;

    transition:
      background-color var(--link-transition),
      transform var(--ease-spring);
  }

  a[href^='mailto:']:hover::before {
    mask-image: url('./images/icons/email-open.svg');
    background-color: var(--color-accent);

    /* Make the bottom edge of the envelopes align */
    transform: translateY(-2px);
  }

  /* Emphasis */
  b,
  strong {
    font-weight: 600;
  }

  i,
  em,
  cite {
    font-style: italic;
  }

  /* Reverse italics inside blockquotes */
  blockquote :is(i, em) {
    font-style: normal;
  }

  mark {
    /* Use negative margins to offset the padding and prevent layout shifts when the highlight is applied */
    padding: 0.1em 0.1em 0.15em 0.2em;
    margin: -0.1em -0.1em -0.15em -0.2em;

    --color: var(--color-sky-500);
    /* Defaults to blue if no specific color class is applied */
    color: var(--color);

    background-image: linear-gradient(
      85deg,
      color-mix(in oklch, var(--color), transparent 50%),
      color-mix(in oklch, var(--color), transparent 90%) 4px,
      color-mix(in oklch, var(--color), transparent 72.5%) calc(100% - 4px),
      color-mix(in oklch, var(--color), transparent 30%)
    );

    background-color: transparent;
    box-decoration-break: clone;

    border-radius: 0.45em 0.2em;
  }

  mark.primary {
    --color: var(--color-accent);
  }

  mark.red {
    --color: var(--color-red-500);
  }

  mark.orange {
    --color: var(--color-orange-500);
  }

  mark.yellow {
    --color: var(--color-yellow-500);
  }

  mark.green {
    --color: var(--color-green-500);
  }

  mark.blue {
    --color: var(--color-sky-500);
  }

  mark.purple {
    --color: var(--color-purple-500);
  }

  mark.pink {
    --color: var(--color-pink-500);
  }

  /* Media */
  img,
  picture,
  video,
  canvas,
  svg {
    display: block;
    max-width: 100%;
  }

  /* Inherit fonts for form controls */
  input,
  button,
  textarea,
  select {
    font: inherit;
  }

  /* Images inside articles */
  article img:not(:where(header img, .blog-post-card__thumb img)) {
    height: auto;
    margin: 1rem auto;
    border-radius: var(--radius-xs);
    border: 5px solid light-dark(white, var(--color-zinc-100));
    object-fit: cover;

    /* prettier-ignore */
    box-shadow:
      inset 0 0 0.5px 1px oklch(100% 0.00011 271.152 / 0.075),
      /* shadow ring 👇 */
      0 0 0 1px oklch(0% 0 0 / 0.05),
      /* multiple soft shadows 👇 */
      0 0.3px 0.4px oklch(0% 0 0 / 0.02),
      0 0.9px 1.5px oklch(0% 0 0 / 0.045),
      0 3.5px 6px oklch(0% 0 0 / 0.09);

    outline: 0.5px solid oklch(from var(--color-stone-700) l c h / 10%);
  }

  /* Featured image in blog post header */
  header img {
    object-fit: cover;
    box-shadow: var(--shadow-md);

    outline: 1.5px solid oklch(from var(--color-border) l c h / 30%);
    outline-offset: -1.5px;

    border-radius: 1rem;
    @supports (corner-shape: squircle) {
      corner-shape: squircle;
      border-radius: 2rem;
    }
  }

  /* Figures and captions */
  figure {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 1rem auto;

    img {
      margin: 0;
    }

    figcaption {
      color: var(--color-muted);
      font-size: 0.875rem;
      margin-top: 0.75rem;
    }
  }

  /* Lists */
  ul,
  ol {
    margin: 1rem 0 1rem 0.75rem;

    /* Custom markers defined below */
    list-style: none;
  }

  ol {
    counter-reset: list-counter;
  }

  /* Nested lists */
  :is(ul, ol) :is(ul, ol) {
    margin-left: 0.5rem;
    margin-block: 0;
  }

  li {
    margin: 0.5rem 0;

    &:first-of-type {
      margin-top: 0;
    }

    &:last-of-type {
      margin-bottom: 0;
    }

    /* Shared styles for custom list markers */
    &:is(:is(ol, ul):not(.blog-toc__list, .blog-post-list, .blog-updates__list) > li) {
      display: flex;
      align-items: flex-start;

      &::before {
        font-weight: 800;
        margin-right: 0.5rem;
        color: var(--color-accent);
      }
    }

    /* Custom numbering for ordered lists */
    &:is(ol:not(.blog-toc__list, .blog-post-list, .blog-updates__list) > li) {
      counter-increment: list-counter;

      &::before {
        content: counter(list-counter) '. ';
        font-variant-numeric: tabular-nums;
      }
    }

    /* Custom markers for unordered lists */
    &:is(ul:not(.blog-toc__list, .blog-post-list, .blog-updates__list) > li)::before {
      content: '•';
    }
  }

  /* Content Containers */
  section:not(:last-of-type) {
    margin-bottom: 3rem;
  }

  /* Blog page header */
  header {
    padding-bottom: 1.5rem;
  }

  .blog-header-wrapper {
    margin-bottom: 3rem;
  }

  .blog-header-wrapper::after {
    content: '';
    display: block;
    height: 1px;
    width: 100%;
    background: var(--color-border-light);
    border-radius: 9999px;
  }

  /* Blog index header */
  .blog-header-wrapper:has(.blog-index__header) {
    margin-bottom: 1rem;
  }

  /* If there's no image before the h1, reduce its top margin */
  header:not(:has(img + h1)) h1 {
    margin-top: 0;
    margin-bottom: 0.5rem;
  }

  .blog-header__date {
    margin-block: 0;
    color: var(--color-muted);
    font-size: 0.95rem;
    font-style: italic;
  }

  .blog-header__updated {
    position: relative;
    margin-block: 0;
    color: var(--color-muted);
    font-size: 0.85rem;
  }

  .blog-header__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    color: var(--color-muted);
    font-size: 0.95rem;
    margin-top: 0.25rem;
  }

  .blog-header__meta > *:not(:last-child)::after {
    content: '·';
    margin: 0 0.5rem;
  }

  .blog-header__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
  }

  .blog-header__tag {
    font-size: 0.8rem;
    line-height: 1;
    padding: 0.25rem 0.65rem 0.3rem;
    border: 1px solid var(--color-border);
    border-radius: 9999px;
    color: var(--color-muted);
    background-color: transparent;
  }

  .blog-back-to-top,
  .blog-copy-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.35rem 0.6rem;

    &:where(.blog-back-to-top) {
      gap: 0.4rem;
      padding-right: 0.4rem;
    }

    &:where(.blog-copy-link) {
      gap: 0.6rem;
      padding-left: 0.5rem;
    }

    font-weight: 600;
    color: var(--color-text);
    text-decoration: none;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    cursor: pointer;
    color: var(--color-soft);

    transition:
      color 100ms,
      background-color 100ms,
      width 100ms,
      transform 500ms var(--ease-spring);

    border-radius: 0.5rem;
    @supports (corner-shape: squircle) {
      corner-shape: squircle;
      border-radius: 1.5rem;
    }

    &:active {
      transform: scale(0.97);
    }

    &:hover {
      color: var(--color-text);
      background-color: var(--color-surface-alt);
    }

    svg[data-icon='arrow-up'] {
      margin-top: 2px;
    }

    .blog-copy-link__icon-container {
      /* Stack icons for cross-fading */
      display: grid;
      place-items: center;

      /* Base icon styles */
      .blog-copy-link__icon {
        grid-area: 1 / 1;
        transition:
          opacity 200ms ease,
          transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275),
          filter 200ms ease;
        transform-origin: center;
      }

      .blog-copy-link__icon--hidden {
        opacity: 0;
        transform: scale(0.5);
        filter: blur(4px);
      }
    }

    /* Stack text so button is always sized to the widest text */
    .blog-copy-link__text-container {
      display: grid;
      place-items: start;
    }

    .blog-copy-link__text-container > span {
      grid-area: 1 / 1;
      transition:
        opacity 200ms ease,
        transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }

    .blog-copy-link__text-success {
      opacity: 0;
      transform: translateY(50%) scale(0.9);
    }

    /* State: Copied */
    &.copied {
      /* Flip icons */
      .blog-copy-link__icon[data-icon='clipboard'] {
        opacity: 0;
        transform: scale(0.5);
        filter: blur(4px);
      }

      .blog-copy-link__icon[data-icon='check'] {
        opacity: 1;
        transform: scale(1);
        filter: none;
      }

      /* Flip text */
      .blog-copy-link__text-default {
        opacity: 0;
        transform: translateY(-50%) scale(0.9);
      }

      .blog-copy-link__text-success {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }
  }

  /* Table of Contents styles in blog/blog-toc.css */

  /* Blog index layout overrides */
  &.blog--index {
    max-width: 780px;
  }

  &.blog--index .blog-layout {
    flex-direction: column;
  }

  /* Blog post item styles in blog/blog-post-item.css */

  /* Blockquotes */
  blockquote {
    position: relative;
    padding: 1rem;
    margin: 1rem 0;
    margin-left: 0.75rem;
    color: var(--color-soft);
    font-style: italic;
    font-family: var(--font-serif);
    background: var(--color-surface);

    border-radius: 0.75rem;
    @supports (corner-shape: squircle) {
      corner-shape: squircle;
      border-radius: 1.5rem;
    }
  }

  /* Blockquote citation styling */
  blockquote cite {
    display: block;
    font-size: 0.875em;
    text-align: right;
    font-weight: 600;
    font-family: var(--font-sans);
    color: var(--color-text);
    margin-top: 0.25rem;
    text-wrap: balance;

    &::before {
      content: '—';
      margin-right: 0.3rem;
      color: var(--color-faint);
    }
  }

  /* Blockquote opening quote pseudo-element */
  blockquote:has(cite)::before {
    color: var(--color-quote-mark);
    content: '“';
    font-size: 4em;
    line-height: 0.1em;
    margin-left: -0.1em;
    vertical-align: -0.35em;
  }

  /* Blockquote left border pseudo-element */
  blockquote::after {
    content: '';
    height: calc(100% - 0.75rem);
    width: 3px;
    border-radius: 9999px;
    position: absolute;
    left: -12px;
    top: 50%;
    transform: translateY(-50%);
    background: var(--color-blockquote-border);
  }

  blockquote :is(strong, b) {
    color: var(--color-text);
  }

  blockquote p {
    margin: 0.75rem 0;

    &:first-of-type {
      margin-top: 0;
    }

    &:last-of-type {
      margin-bottom: 0;
    }
  }

  /* Nested blockquotes */
  blockquote blockquote {
    padding: 0.5rem;
    margin: 0 0 -0.5rem 0.5rem;
  }

  code {
    /* Code font */
    font-family: var(--font-mono);
    font-size: 0.8em;

    /* Base code styles */
    border: 1px solid var(--color-border-light);
    padding: 0.2rem 0.3rem;

    /* Allow long inline code snippets to wrap */
    overflow-wrap: break-word;

    border-radius: 0.3rem;
    @supports (corner-shape: squircle) {
      corner-shape: squircle;
      border-radius: 1.5rem;
    }

    /* Using !important to override the background applied by highlight.js */
    background: light-dark(
      white,
      color-mix(in oklch, var(--color-surface) 50%, var(--color-bg))
    ) !important;
  }

  /* Code blocks */
  pre:has(code) {
    margin: 1rem 0;
    overflow-x: auto;

    /* Smooth scrolling on iOS */
    -webkit-overflow-scrolling: touch;

    border-radius: 0.75rem;
    @supports (corner-shape: squircle) {
      corner-shape: squircle;
      border-radius: 1.5rem;
    }
  }

  pre > code:is(.language-bash, .language-sh, .language-zsh)::before {
    content: '$';
    display: inline;
    color: var(--color-faint);
    margin-right: 1em;
  }

  pre > code {
    /* Space for copy button */
    padding-right: 3rem !important;
  }

  .code-block-wrapper {
    display: grid;
    margin: 1rem 0;
  }

  .code-block-wrapper pre {
    grid-area: 1 / 1;
    margin: 0;
    width: 100%;
  }

  .copy-code-btn {
    /* Position in top right corner */
    grid-area: 1 / 1;
    position: sticky;
    top: 0.5rem;
    z-index: 10;
    justify-self: end;
    align-self: start;
    margin: 0.5rem;

    /* Visual styling */
    padding: 0.4rem;
    cursor: pointer;
    color: var(--color-muted);
    background: light-dark(
      var(--color-bg),
      color-mix(in oklch, var(--color-surface) 50%, var(--color-bg))
    );

    transition:
      background-color 100ms,
      transform 500ms var(--ease-spring);

    border-radius: 0.25rem;
    @supports (corner-shape: squircle) {
      corner-shape: squircle;
      border-radius: 0.75rem;
    }

    &:hover {
      background: var(--color-surface-alt);
    }

    &:active {
      transform: scale(0.97);
    }

    /* Stack icons for cross-fading */
    display: grid;
    place-items: center;

    /* Base icon styles */
    .copy-code-btn__icon {
      grid-area: 1 / 1;
      transition:
        opacity 200ms ease,
        transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275),
        filter 200ms ease;
      transform-origin: center;
    }

    .copy-code-btn__icon--hidden {
      opacity: 0;
      transform: scale(0.5);
      filter: blur(4px);
    }
  }

  /* Inline code inside blockquotes */
  blockquote code {
    color: var(--color-text);
    font-style: normal;
  }

  /* Keyboard tags */
  kbd {
    display: inline-block;
    min-width: 0.75rem;
    padding: 0.15rem 0.3rem;
    border: 1px solid var(--color-border);
    border-radius: 0.25rem;

    font-family: var(--font-sans);
    font-size: 0.75rem;
    line-height: 1;
    text-align: center;

    background: var(--color-bg);
    color: var(--color-text);

    cursor: default;

    box-shadow: 0 2px 0 1px var(--color-border);
    translate: 0 -1px;

    transition:
      translate 50ms ease,
      box-shadow 50ms ease;

    &:hover {
      box-shadow: 0 2.5px 0 1px var(--color-border);
      translate: 0 -1.5px;
    }

    &:active,
    &.is-active {
      box-shadow: 0 1px 0 0.5px var(--color-border);
      translate: 0 1px;
    }
  }

  /* Scrollable table wrapper */
  .table-wrapper {
    position: relative;
    margin: 2rem 0;
    overflow-x: auto;

    /* Smooth scrolling on iOS */
    -webkit-overflow-scrolling: touch;

    /* Fading shadows on left and right edges to indicate scrollability */
    background:
      /* Shadow Cover LEFT */
      linear-gradient(
          to right,
          var(--color-scroll-cover) 30%,
          var(--color-scroll-cover-transparent)
        )
        left center,
      /* Shadow Cover RIGHT */
        linear-gradient(
          to left,
          var(--color-scroll-cover) 70%,
          var(--color-scroll-cover-transparent)
        )
        right center,
      /* Shadow LEFT */
        radial-gradient(
          farthest-side at 0 50%,
          var(--color-scroll-shadow),
          var(--color-scroll-shadow-transparent)
        )
        left center,
      /* Shadow RIGHT */
        radial-gradient(
          farthest-side at 100% 50%,
          var(--color-scroll-shadow),
          var(--color-scroll-shadow-transparent)
        )
        right center;

    background-repeat: no-repeat;
    background-size:
      40px 100%,
      40px 100%,
      14px 100%,
      14px 100%;
    background-attachment: local, local, scroll, scroll;
  }

  /* Tables */
  table {
    max-width: 100%;
    font-size: 0.875rem;
    text-align: left;
    border-collapse: collapse;
  }

  html[dir='rtl'] table {
    text-align: right;
  }

  thead {
    font-size: 0.75rem;
    text-transform: uppercase;
    background: var(--color-surface);
  }

  th,
  td {
    padding: 0.75rem;
    white-space: nowrap;
  }

  tbody tr {
    color: var(--color-muted);
    border-bottom: 0.5px solid var(--color-border-light);
  }

  tbody tr:last-child {
    border-bottom: none;
  }

  /* Sticky first column for tables when the first header cell is marked sticky */
  thead th:first-child.sticky {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--color-surface);
  }

  thead:has(th:first-child.sticky) + tbody td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--color-bg);
  }

  /* Horizontal Rules */
  hr {
    border: 0;
    height: 1px;
    margin-block: 3rem;
    border-radius: 9999px;
    background-color: var(--color-border-light);
  }
}

/* Utility classes */
.text-fade {
  background: linear-gradient(
    to right,
    currentColor -10%,
    color-mix(in oklch, currentColor 30%, transparent) 50%,
    color-mix(in oklch, currentColor 10%, transparent)
  );
  -webkit-text-fill-color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
}