/*
  Small utilities layer — genuine one-offs only. JS-driven state is handled by
  semantic state classes on the components themselves (the fizzy way), not by
  toggling utility classes here.
*/

@layer utilities {
  .hidden {
    display: none;
  }

  .whitespace-pre-line {
    white-space: pre-line;
  }

  [data-tone="positive"] { color: var(--color-positive-ink); }
  [data-tone="negative"] { color: var(--color-negative-ink); }
  [data-tone="pending"] { color: var(--color-warning-ink); }

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

  .line-clamp {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--lines, 3);
    line-clamp: var(--lines, 3);
    overflow: hidden;
    white-space: pre-wrap;
  }

  .scrollbar-thin {
    scrollbar-width: thin;

    &::-webkit-scrollbar {
      width: 8px;
      height: 8px;
    }

    &::-webkit-scrollbar-thumb {
      border-radius: var(--radius-full);
      background-color: var(--color-slate-300);
    }
  }

  .full-width {
    inline-size: 100%;
  }

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

  .sr-only,
  .sr-only-on-small {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }

  .sr-only-on-small {
    @media (min-width: 40rem) {
      position: static;
      width: auto;
      height: auto;
      margin: 0;
      overflow: visible;
      clip: auto;
      white-space: normal;
    }
  }
}