@charset "utf-8";
@import (optional, reference) "var.less";
/*Scroll and Swipe*/
._scroll {
  --_scroll-bar-sz: var(--_sz-min);
  --_scroll-bar-between: 0px;
  --_scroll-bar-end: 0px;
  --_scroll-bar-c-track: var(--_c-mask-4);
  --_scroll-bar-c-thumb: var(--_c-mask-28);
  --_scroll-bar-c-hover: var(--_c-mask-36);
  --_scroll-bar-c-active: var(--_c-mask-44);
  --_scroll-bar-radius: 0px;
  --_scroll-w:100%;
  --_scroll-h:100%;
  position: relative;
  width: var(--_scroll-w);
  height: var(--_scroll-h);
  [unbound] {
  }
  >._scroll-wrap {
    position: relative;
  }
  >._scroll-bar {
    background-color: var(--_scroll-bar-c-track);
    border-radius: var(--_scroll-bar-radius);
    width: var(--_scroll-bar-sz);
    height: calc(100% - var(--_scroll-bar-between)*2);
    opacity: 0;
    pointer-events: none;
    .v3-trans-all(var(--_dur-1));
    position: absolute;
    z-index: 2;
    span {
      background-color: var(--_scroll-bar-c-thumb);
      border-radius: inherit;
      .v3-trans-all(var(--_dur-1));
      position: absolute;
      &:hover {
        background-color: var(--_scroll-bar-c-hover);
      }
    }
    &:hover,
    &[scrolling] {
      --_scroll-bar-sz: var(--_sz-space);
    }
    &[scrolling] span {
      background-color: var(--_scroll-bar-c-active);
    }
  }
  &:hover>._scroll-bar,
  >._scroll-bar[shown] {
    opacity: 1;
    pointer-events: initial;
  }
  &[axis=x] {
    display: flex;
    overflow-x: hidden;
    >._scroll-wrap {
      height: 100%;
      display: inline-flex;
    }
    >._scroll-bar {
      height: var(--_scroll-bar-sz);
      width: calc(100% - var(--_scroll-bar-between)*2);
      left: var(--_scroll-bar-between);
      bottom: var(--_scroll-bar-end);
    }
    >._scroll-bar span {
      height: 100%;
    }
  }
  &[axis=y] {
    min-height: var(--_sz-body);
    overflow-y: hidden;
    >._scroll-bar {
      right: var(--_scroll-bar-end);
      top: var(--_scroll-bar-between);
    }
    >._scroll-bar span {
      width: 100%;
    }
  }
  &[axis='x']:where([gridded])>._scroll-wrap {
    flex-wrap: wrap;
    writing-mode: vertical-lr;
    >* {
      writing-mode: horizontal-tb;
    }
  }
  &[axis='y']:where([gridded])>._scroll-wrap {
    display: flex;
    flex-wrap: wrap;
  }
}
