/* An overlay scrollbar, costing no width so content never jumps; 8px track and 6px thumb are intrinsic. */
@layer theme, base, lotics, components, utilities;
@layer lotics.tokens, lotics.reset, lotics.components;

@layer lotics.components {
  .lotics-scroll-area {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
  }

  .lotics-scroll-area__viewport {
    flex: 1;
    min-width: 0;
    min-height: 0;
    overscroll-behavior: contain;
  }

  .lotics-scroll-area__viewport:focus-visible {
    outline: var(--lotics-ring-width) solid var(--ring);
    outline-offset: 0;
  }

  /* A flex column so sibling `Text`s stack. No `min-width` here: Base UI writes `min-width: fit-content`
     inline, so the component pins `min-width: 0` inline for vertical (`scroll_area.tsx`). On
     `horizontal`/`both` a caller's `max-width` does nothing against it, so cap your own element inside. */
  .lotics-scroll-area__content {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  .lotics-scroll-area__scrollbar {
    display: flex;
    width: 8px;
    padding: var(--lotics-space-2);
    opacity: 0;
    transition: opacity var(--lotics-duration-fast) var(--lotics-ease-standard);
    touch-action: none;
  }

  .lotics-scroll-area__scrollbar[data-orientation="horizontal"] {
    width: auto;
    height: 8px;
  }

  .lotics-scroll-area__scrollbar[data-hovering],
  .lotics-scroll-area__scrollbar[data-scrolling] {
    opacity: 1;
  }

  .lotics-scroll-area__thumb {
    width: 100%;
    border-radius: var(--lotics-radius-full);
    background: var(--lotics-wash-press);
  }
}