@import '../../settings';

.#{$rkc-prefix}-page-scroll-use-custom {
  overflow: hidden;

  body {
    position: fixed;
    width: 100%;
  }
}

.#{$rkc-prefix}-page-scroll-custom-container {
  &.#{$rkc-prefix}-is-custom {
    position: relative;
    height: calc(100 * var(--vh));

    .v-custom-scroll {
      position: relative;
      width: 100%;
      height: 100%;
      overflow: hidden;

      &__wrapper {
        &.v-custom-scroll_vertical {
          width: 100%;
          height: auto;
        }
    
        &.v-custom-scroll_horizontal {
          width: max-content;
          height: 100%;
        }
      }
    }
  }
}

.#{$rkc-prefix}-page-scroll-scrollbar-parent {
  -ms-overflow-style: none;
  scrollbar-width: none;

  &::-webkit-scrollbar {
    display: none;
    appearance: none;
    width: 0;
    height: 0;
  }
}

.#{$rkc-prefix}-page-scroll-scrollbar {
  &.v-scrollbar {
    position: absolute;
    z-index: 9;

    &.v-scrollbar_in-window {
      position: fixed;
    }

    &.v-scrollbar_is-empty {
      display: none;
    }

    &.v-scrollbar_auto-hide {
      opacity: 0;
      transition: opacity 0.5s;

      &.v-scrollbar_is-hovered,
      &.v-scrollbar_in-action {
        opacity: 1;
      }
    }

    &.v-scrollbar {
      &_x {
        bottom: 3px;
        left: 3px;
        width: calc(100% - 6px);
        height: 10px;
      }
      
      &_y {
        top: 3px;
        right: 3px;
        width: 10px;
        height: calc(100% - 6px);
      }
    }
  
    .v-scrollbar {
      &__thumb {
        position: absolute;
        top: 0;
        left: 0;
        background-color: #babac0;
        border-radius: 5px;
  
        cursor: pointer;
  
        &_x {
          width: 50px;
          height: 100%;
        }
  
        &_y {
          width: 100%;
          height: 50px;
        }
      }
    }
  }
}