@import '../../assets/scss/components/scrollbar/_variables';

.st-scrollbar {
  $root: &;

  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;

  &__container {
    overflow: scroll;

    &--x-hidden {
      overflow-x: hidden;
    }
  }

  &__vertical-scroll {
    position: absolute;
    width: $st-scrollbar-caret-size;
    cursor: pointer;
    background: $st-scrollbar-caret-background;
    border-radius: $st-scrollbar-caret-border-radius;

    &:hover {
      background: $st-scrollbar-caret-background-hover;
    }

    &--active {
      background: $st-scrollbar-caret-background-active;
    }
  }

  &__horizontal-scroll {
    position: absolute;
    height: $st-scrollbar-caret-size;
    cursor: pointer;
    background: $st-scrollbar-caret-background;
    border-radius: $st-scrollbar-caret-border-radius;

    &:hover {
      background: $st-scrollbar-caret-background-hover;
    }

    &--active {
      background: $st-scrollbar-caret-background-active;
    }
  }

  &__vertical-scroll-container {
    position: absolute;
    top: $st-scrollbar-base-margin;
    right: $st-scrollbar-caret-size * -1;
    bottom: $st-scrollbar-base-margin;
    z-index: $st-scrollbar-caret-z-index;
    width: $st-scrollbar-caret-size;
    opacity: $st-scrollbar-base-opacity;
    transition: $st-scrollbar-transition;

    &--hidden {
      visibility: hidden;
    }
  }

  &__horizontal-scroll-container {
    position: absolute;
    right: $st-scrollbar-base-margin;
    bottom: $st-scrollbar-caret-size * -1;
    left: $st-scrollbar-base-margin;
    z-index: $st-scrollbar-caret-z-index;
    height: $st-scrollbar-caret-size;
    opacity: $st-scrollbar-base-opacity;
    transition: $st-scrollbar-transition;

    &--hidden {
      visibility: hidden;
    }
  }

  &--horizontal-scrollable {
    #{$root}__vertical-scroll-container {
      bottom: $st-scrollbar-caret-size + $st-scrollbar-base-margin;
    }
  }

  &--vertical-scrollable {
    #{$root}__horizontal-scroll-container {
      right: $st-scrollbar-caret-size + $st-scrollbar-base-margin;
    }
  }

  &--dragged,
  &:hover {
    #{$root}__vertical-scroll-container {
      right: $st-scrollbar-base-margin;
      opacity: $st-scrollbar-hover-opacity;
    }

    #{$root}__horizontal-scroll-container {
      bottom: $st-scrollbar-base-margin;
      opacity: $st-scrollbar-hover-opacity;
    }
  }
}