/*
ScrollArea

<div class="scroll-area">                 position: relative; clips; ring on focus
  <div class="scroll-area-viewport">      the native scroller, native bars hidden
    <div class="scroll-area-content">
  <div class="scroll-area-scrollbar" data-orientation="vertical|horizontal" data-state>
    <div class="scroll-area-thumb" data-state>
  <div class="scroll-area-corner" data-state>

Bars overlay the content, so showing them never moves anything. The
controller sets --scroll-area-thumb-size and the thumb's transform.
*/

/* The edge distances stay on the viewport: children opt in with
   --scroll-area-overflow-y-start: inherit (Base UI). */
@property --scroll-area-overflow-x-start { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --scroll-area-overflow-x-end   { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --scroll-area-overflow-y-start { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --scroll-area-overflow-y-end   { syntax: "<length>"; inherits: false; initial-value: 0px; }

@layer components {

.scroll-area {
  position:      relative;
  display:       flex;
  flex-direction: column;
  min-height:    0;
  overflow:      hidden;
  border-radius: inherit;
  --scroll-area-bar: var(--scrollbar-size);
}

.scroll-area:has(> .scroll-area-viewport:focus-visible) {
  box-shadow: var(--focus-ring);
}

.scroll-area-viewport {
  flex:            1 1 auto;
  width:           100%;
  height:          100%;
  min-height:      0;
  max-height:      inherit;
  overflow:        hidden;
  border-radius:   inherit;
  outline:         none;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.scroll-area-viewport::-webkit-scrollbar {
  display: none;
}

.scroll-area[data-orientation="vertical"]   > .scroll-area-viewport { overflow-y: auto; }
.scroll-area[data-orientation="horizontal"] > .scroll-area-viewport { overflow-x: auto; }
.scroll-area[data-orientation="both"]       > .scroll-area-viewport { overflow: auto; }

.scroll-area[data-orientation="horizontal"] > .scroll-area-viewport > .scroll-area-content,
.scroll-area[data-orientation="both"] > .scroll-area-viewport > .scroll-area-content {
  width:     max-content;
  min-width: 100%;
}

.scroll-area-scrollbar {
  position:    absolute;
  display:     flex;
  padding:     var(--space-px);
  user-select: none;
  touch-action: none;
  direction:   ltr;     /* thumb offsets are physical px; rtl is handled in the controller */
  opacity:     1;
  transition:  opacity var(--duration-normal) var(--ease-out);
  z-index:     1;
}

.scroll-area-scrollbar[data-state="hidden"] {
  opacity:        0;
  pointer-events: none;
  transition-duration: var(--duration-fast);
}

.scroll-area-scrollbar[data-orientation="vertical"] {
  top:                0;
  bottom:             var(--scroll-area-corner-height, 0px);
  right:              0;
  width:              var(--scroll-area-bar);
  flex-direction:     column;
  border-left:        var(--space-px) solid transparent;
}

/* :dir() follows the nearest dir, so dir="ltr" inside an rtl page stays ltr. */
.scroll-area:dir(rtl) > .scroll-area-scrollbar[data-orientation="vertical"] {
  right:        auto;
  left:         0;
  border-left:  0;
  border-right: var(--space-px) solid transparent;
}

.scroll-area-scrollbar[data-orientation="horizontal"] {
  left:          0;
  right:         var(--scroll-area-corner-width, 0px);
  bottom:        0;
  height:        var(--scroll-area-bar);
  flex-direction: row;
  border-top:    var(--space-px) solid transparent;
}

.scroll-area:dir(rtl) > .scroll-area-scrollbar[data-orientation="horizontal"] {
  left:  var(--scroll-area-corner-width, 0px);
  right: 0;
}

.scroll-area-thumb {
  position:      relative;
  flex:          none;
  background:    var(--rule);
  border-radius: var(--radius-pill);
  transition:    background-color var(--duration-fast) var(--ease-out);
  will-change:   transform;
}

.scroll-area-thumb[data-state="hidden"] {
  visibility: hidden;
}

/* A hit area at least a small control square, centered on the thumb (Radix: 44px). */
.scroll-area-thumb::before {
  content:   "";
  position:  absolute;
  top:       50%;
  left:      50%;
  width:     100%;
  height:    100%;
  min-width:  var(--control-height-sm);
  min-height: var(--control-height-sm);
  transform: translate(-50%, -50%);
}

.scroll-area-scrollbar[data-orientation="vertical"] > .scroll-area-thumb {
  width:      100%;
  height:     var(--scroll-area-thumb-size, 0px);
  min-height: var(--space-5);
}

.scroll-area-scrollbar[data-orientation="horizontal"] > .scroll-area-thumb {
  height:    100%;
  width:     var(--scroll-area-thumb-size, 0px);
  min-width: var(--space-5);
}

.scroll-area-scrollbar:hover > .scroll-area-thumb,
.scroll-area-scrollbar[data-dragging] > .scroll-area-thumb {
  background: var(--rule-strong);
}

.scroll-area-corner {
  position:         absolute;
  bottom:           0;
  inset-inline-end: 0;
  width:            var(--scroll-area-corner-width, 0px);
  height:           var(--scroll-area-corner-height, 0px);
  background:       transparent;
}

.scroll-area-corner[data-state="hidden"] {
  display: none;
}

}