/*
  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;
  }

  .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%;
  }

  @media (min-width: 40rem) {
    .sm-auto-width {
      inline-size: auto;
    }
  }

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