$dapper-scrollbars--size: 6px;

.dapper-scrollbars--wrapper {
  margin-right: 0 !important;
  margin-bottom: 10px !important;
  right: 0 !important;
  bottom: 0 !important;
}

.dapper-scrollbars--track-x,
.dapper-scrollbars--track-y {
  border-radius: $dapper-scrollbars--size !important;
  position: absolute !important;
  background-color: rgba($g0-obsidian, 0.4) !important;
  user-select: none !important;
  overflow: hidden !important;
  transition: opacity 0.25s ease !important;
}

.dapper-scrollbars--track-x {
  height: $dapper-scrollbars--size !important;
  width: calc(100% - #{$dapper-scrollbars--size}) !important;
  bottom: $dapper-scrollbars--size / 2 !important;
  left: $dapper-scrollbars--size / 2 !important;
}

.dapper-scrollbars--track-y {
  width: $dapper-scrollbars--size !important;
  height: calc(100% - #{$dapper-scrollbars--size}) !important;
  right: $dapper-scrollbars--size / 2 !important;
  top: $dapper-scrollbars--size / 2 !important;
}

.dapper-scrollbars--thumb-x,
.dapper-scrollbars--thumb-y {
  border-radius: $dapper-scrollbars--size / 2 !important;
}

.dapper-scrollbars--thumb-x {
  height: $dapper-scrollbars--size !important;
}

.dapper-scrollbars--thumb-y {
  width: $dapper-scrollbars--size !important;
}

.dapper-scrollbars--autohide {
  .dapper-scrollbars--track-x,
  .dapper-scrollbars--track-y {
    opacity: 0;
  }

  &:hover {
    .dapper-scrollbars--track-x,
    .dapper-scrollbars--track-y {
      opacity: 1;
    }
  }
}
