/**
 * ScrollArea - Styled scrollable container styles
 * @countermeasure/web-components/primitives/scroll-area
 */

.cmm-scroll-area {
  position: relative;
  overflow: hidden;
}

.cmm-scroll-area__viewport {
  width: 100%;
  height: 100%;

  /* Firefox scrollbar styling */
  scrollbar-width: thin;
  scrollbar-color: hsl(var(--muted)) transparent;
}

/* Orientation variants */
.cmm-scroll-area__viewport--vertical {
  overflow-y: auto;
  overflow-x: hidden;
}

.cmm-scroll-area__viewport--horizontal {
  overflow-x: auto;
  overflow-y: hidden;
}

.cmm-scroll-area__viewport--both {
  overflow: auto;
}

/* WebKit scrollbar styling */
.cmm-scroll-area__viewport::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.cmm-scroll-area__viewport::-webkit-scrollbar-track {
  background: transparent;
}

.cmm-scroll-area__viewport::-webkit-scrollbar-thumb {
  background-color: hsl(var(--muted));
  border-radius: 9999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

.cmm-scroll-area__viewport::-webkit-scrollbar-thumb:hover {
  background-color: hsl(var(--muted-foreground));
}
