/*
 * The scrollbar is an OVERLAY — it costs no layout width, so content does not
 * jump when it appears, and it fades in while the pointer is over the area or
 * the area is scrolling. The 8px track and the 6px thumb are the component's own
 * intrinsic measures; there is no scale for a scrollbar.
 */
@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;
  }

  /*
   * The part that holds the CALLER's children — a flex column, so two sibling
   * `Text`s stack instead of sharing a line. No `min-width` HERE: Base UI writes
   * `min-width: fit-content` inline on this element, and an inline declaration
   * is not something a sheet can answer at any specificity — so the component
   * answers it inline too, pinning `min-width: 0` back for the vertical
   * orientation (`scroll_area.tsx`). A `horizontal`/`both` area keeps
   * `fit-content`, and on one of those a `max-width` from a caller is still a
   * declaration that silently does nothing: `min-width` beats it, so cap an
   * element of your OWN inside the area instead. Padding, gap and alignment are
   * safe on every orientation — `fit-content` accounts for them.
   */
  .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);
  }
}