@use '../../_styles/mixin.scss' as *;
/*
 * ::-webkit-scrollbar 兼容chrome 4+, edge 79+, safari 4+, opera 15+, 
 * scrollbar-width 兼容firefox 64+
 */
.o-scrollbar {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  pointer-events: none;

  > .o-scrollbar-dragging {
    opacity: 1;
  }

  &.o-scrollbar-visible-x {
    > .o-scrollbar-x {
      opacity: 1;
      pointer-events: auto;
    }
  }

  &.o-scrollbar-visible-y {
    > .o-scrollbar-y {
      opacity: 1;
      pointer-events: auto;
    }
  }

  &.o-scrollbar-visible {
    .o-scrollbar-rail {
      opacity: 1;
      pointer-events: auto;
    }
  }
}

.o-scrollbar-rail {
  // 默认隐藏
  opacity: 0;
  pointer-events: none;

  position: absolute;
  background-color: var(--scrollbar-bg-color);
  transition: opacity var(--o-duration-m1) var(--o-easing-standard-in) var(--scrollbar-delay);
  @include hover {
    .o-scrollbar-x-thumb-bar {
      height: var(--scrollbar-thumb-width-hover);
      background-color: var(--scrollbar-thumb-bg-color-hover);
    }
    .o-scrollbar-y-thumb-bar {
      width: var(--scrollbar-thumb-width-hover);
      background-color: var(--scrollbar-thumb-bg-color-hover);
    }
    .o-scrollbar-track {
      opacity: 1;
    }
  }
}
.o-scrollbar-y {
  top: var(--scrollbar-y-top);
  bottom: var(--scrollbar-y-bottom);
  margin: auto;

  left: var(--scrollbar-y-left);
  right: var(--scrollbar-y-right);

  width: var(--scrollbar-width);
  height: var(--scrollbar-height);
}

.o-scrollbar-x {
  left: var(--scrollbar-x-left);
  right: var(--scrollbar-x-right);
  margin: auto;

  top: var(--scrollbar-x-top);
  bottom: var(--scrollbar-x-bottom);

  width: var(--scrollbar-height);
  height: var(--scrollbar-width);
}

.o-scrollbar-dragging {
  .o-scrollbar-track {
    opacity: 1;
  }
}
.o-scrollbar-track {
  position: relative;
  z-index: 0;
  border-radius: var(--scrollbar-thumb-radius);
  background-color: var(--scrollbar-track-bg-color);
  opacity: 0;
  transition: opacity var(--o-duration-m1) var(--o-easing-standard-in) var(--scrollbar-delay);
}
.o-scrollbar-y-track {
  width: var(--scrollbar-track-width);
  height: 100%;
  left: 50%;
  margin-left: calc(var(--scrollbar-track-width) / -2);
}
.o-scrollbar-x-track {
  height: var(--scrollbar-track-width);
  width: 100%;
  top: 50%;
  margin-top: calc(var(--scrollbar-track-width) / -2);
}

.o-scrollbar-thumb {
  position: absolute;
  z-index: 1;
}
.o-scrollbar-y-thumb {
  top: 0;
  left: 0;
  right: 0;
  min-height: var(--scrollbar-thumb-min-size);
}
.o-scrollbar-x-thumb {
  left: 0;
  top: 0;
  bottom: 0;
  min-width: var(--scrollbar-thumb-min-size);
  display: flex;
}

.o-scrollbar-rail{
  .o-scrollbar-x-thumb-bar,
  .o-scrollbar-y-thumb-bar {
    background-color: var(--scrollbar-thumb-bg-color);
    border-radius: var(--scrollbar-thumb-radius);
    transition: all var(--o-duration-m1) var(--o-easing-standard-in) var(--scrollbar-delay);
    margin: auto;
    &.is-dragging {
      background-color: var(--scrollbar-thumb-bg-color-active);
    }
  }
}
.o-scrollbar-x-thumb-bar {
  width: 100%;
  height: var(--scrollbar-thumb-width);

  &.is-dragging {
    height: var(--scrollbar-thumb-width-hover);
  }
}
.o-scrollbar-y-thumb-bar {
  width: var(--scrollbar-thumb-width);
  height: 100%;
  &.is-dragging {
    width: var(--scrollbar-thumb-width-hover);
  }
}

// scrollbar container and wrapper

.o-scrollbar-wrapper {
  position: relative;
}
.o-scrollbar-container {
  overflow: auto;
  scrollbar-width: none;
  &::-webkit-scrollbar {
    display: none;
  }
}

.o-scroller {
  position: relative;
  display: flex;
}

.o-scroller-container {
  flex: 1; // 撑满父容器

  padding: var(--scroller-padding);
  overflow: auto;
  scrollbar-width: none;

  &::-webkit-scrollbar {
    display: none;
  }
  &.is-x-disabled {
    overflow-x: hidden;
  }
  &.is-y-disabled {
    overflow-y: hidden;
  }
}
.o-scrollbar-to-body {
  position: fixed;
  z-index: var(--o-z-index-max);
}