@use "../../../styles/int.scss";

$scroll-bar-size: 10px;

.thumb {
  flex: 1;
  background-color: var(--ScrollArea-thumb-color, #{int.$gray-30});
  border-radius: $scroll-bar-size;
  position: relative;

  &::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    min-width: 44px;
    min-height: 44px;
  }
}

.bar {
  display: flex;

  /* ensures no selection */
  user-select: none;

  /* disable browser handling of all panning and zooming gestures on touch devices */
  touch-action: none;

  padding: 2px;
  background: var(--ScrollArea-bar-color, transparent);
  transition: background 160ms ease-out;

  &[data-orientation="vertical"] {
    width: $scroll-bar-size;
  }

  &[data-orientation="horizontal"] {
    flex-direction: column;
    height: $scroll-bar-size;
  }
}