@use "../../colors/gray/c-gray-dark";

@mixin _scroll($color) {
  background-color: transparent !important;
  box-shadow: inset 0 0 7em 7em $color;

  border-radius: 0.3em 0.2em 0.2em 0.3em;

  border-top: solid 0.10em transparent;
  border-right: 0;
  border-bottom: solid 0.10em transparent;
  border-left: solid 0.2em transparent;
}

%native-scrollbar {
  &::-webkit-scrollbar:horizontal {
    width: 0.6em;
  }
  &::-webkit-scrollbar {
    width: 0.6em;
  }
  &::-webkit-scrollbar-button {
    background-color: c-gray-dark.$d2;
    display: none !important;
  }
  &::-webkit-scrollbar-track-piece {
    @include _scroll(#{c-gray-dark.$d2-3});
  }
  &::-webkit-scrollbar-thumb {
    @include _scroll(#{c-gray-dark.$d1-8});
  }

  &::-webkit-scrollbar-corner {
    background-color: c-gray-dark.$d !important;
  }
}