@use "./flex" as *;

@mixin scroll-style(
  $size: 10px,
  $thumb: none,
  $thumb-color: grey,
  $thumb-radius: 10px,
  $track-color: transparent,
  $track-radius: 10px
) {
  // Respaldo para Firefox
  @supports not (selector(::-webkit-scrollbar-thumb)) {
    scrollbar-color: $thumb-color $track-color;
    scrollbar-width: thin;
  }

  // Navegadores basados en webkit
  &::-webkit-scrollbar {
    width: $size;
    height: $size;
    &-track {
      background-color: $track-color;
      border-radius: $track-radius;
    }
    &-thumb {
      background-color: $thumb-color;
      background-image: $thumb;
      border-radius: $thumb-radius;
    }
  }
}