.scrollbar-default {
  &::-webkit-scrollbar, &::-webkit-scrollbar-thumb, &::-webkit-scrollbar-track {
    all: initial !important;
  }
  scrollbar-face-color: initial !important;
  scrollbar-track-color: initial !important;
}

@each $color, $value in $theme-colors {
  .scrollbar-#{$color} {
    @include scrollbars(.5em, $value, transparent);
  }
  .scrollbar-#{$color}-on-hover {
    @extend .scrollbar-invisible;
    &:hover {
      @extend .scrollbar-#{$color};
    }
  }
}

.scrollbar-invisible {
  @include scrollbars(0, transparent, transparent);
  -ms-overflow-style: none; /* IE 11 */
  scrollbar-width: none; /* Firefox 64 */
}

.scrollbar-x-auto {
  overflow-x: auto;
  max-width: 100%;
  &.row {
    max-width: initial;
  }
}

.scrollbar-y-auto {
  overflow-y: auto;
  max-height: 100%;
}

.scrollbar-auto {
  @extend .scrollbar-x-auto;
  @extend .scrollbar-y-auto;
}

.scrollbar-x-visible {
  overflow-x: visible;
  max-width: 100%;
  &.row {
    max-width: initial;
  }
}

.scrollbar-y-visible {
  overflow-y: visible;
  max-height: 100%;
}

.scrollbar-visible {
  @extend .scrollbar-x-visible;
  @extend .scrollbar-y-visible;
}


.scrollbar-x-hidden {
  overflow-x: hidden;
}

.scrollbar-y-hidden {
  overflow-y: hidden;
}

.scrollbar-hidden {
  overflow: hidden;
}


.scrollbar-x-scroll {
  overflow-x: scroll;
}

.scrollbar-y-scroll {
  overflow-y: scroll;
}

.scrollbar-scroll {
  overflow: scroll;
}


.flex-scrollbar-y-auto {
  flex-wrap: nowrap;
  white-space: nowrap;
  @extend .scrollbar-y-auto;
}

.flex-scrollbar-x-auto {
  flex-wrap: nowrap;
  white-space: nowrap;
  @extend .scrollbar-x-auto;
}

.flex-scrollbar-auto {
  @extend .flex-scrollbar-x-auto;
  @extend .flex-scrollbar-y-auto;
}

.flex-scrollbar-y-visible {
  flex-wrap: nowrap;
  white-space: nowrap;
  @extend .scrollbar-y-visible;
}

.flex-scrollbar-x-visible {
  flex-wrap: nowrap;
  white-space: nowrap;
  @extend .scrollbar-x-visible;
}


.flex-scrollbar-y-scroll {
  flex-wrap: nowrap;
  white-space: nowrap;
  @extend .scrollbar-y-scroll;
}

.flex-scrollbar-x-scroll {
  flex-wrap: nowrap;
  white-space: nowrap;
  @extend .scrollbar-x-scroll;
}

.flex-scrollbar-scroll {
  @extend .flex-scrollbar-x-scroll;
  @extend .flex-scrollbar-y-scroll;
}