/* SCROLLBAR */
// Chrome version fix
%scrollbarAuto,
%scrollbarThin {
  scrollbar-width: unset !important;
  scrollbar-color: unset !important;
}
// NORMAL SCROLLBAR
:is(%scrollbarAuto) {
  &::-webkit-scrollbar {
    width: 14px;
  }
  &::-webkit-scrollbar-thumb,
  &::-webkit-scrollbar-track {
    border: 3px solid transparent;
    border-radius: 7px;
  }
  &::-webkit-scrollbar-thumb {
    background-color: $main-color;
    &:active {
      background-color: $hover-color;
    }
  }
  &::-webkit-scrollbar-track {
    background: transparent;
  }
}
// THIN SCROLLBAR
:is(%scrollbarThin) {
  &::-webkit-scrollbar {
    width: 8px;
  }
  &::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 7px;
    background-color: $main-color;
    &:active {
      background-color: $hover-color;
    }
  }
  &::-webkit-scrollbar-track {
    background: transparent;
    border: 2px solid transparent;
    border-radius: 7px;
  }
}

// NO SCROLLBAR
%scrollbarNone::-webkit-scrollbar {
  width: 0px;
}

textarea {
  &::-webkit-scrollbar {
    display: none;
  }
}
