@use "../abstracts/" as *;

.scroll {
  @include scroll-style(
    $size: var(--scroll-size, 10px),
    $thumb: var(--scroll-thumb, none),
    $thumb-color: var(--scroll-thumb-color, grey),
    $thumb-radius: var(--scroll-thumb-radius, var(--scroll-radius)),
    $track-color: var(--scroll-track, transparent),
    $track-radius: var(--scroll-track-radius, var(--scroll-radius))
  );

  // Ejemplo 1
  &-1 {
    --scroll-size: 10px;
    --scroll-radius: 10px;
    --scroll-track: rgb(0 0 0 / 40%);
    --scroll-thumb-color: #dfdfdf;
  }

  // Ejemplo 2
  &-2 {
    --scroll-size: 8px;
    --scroll-radius: 10px;
    --scroll-track: rgb(255 255 255 / 10%);
    --scroll-thumb-color: rgb(0 0 0 / 80%);
  }

  // Ejemplo 3
  &-3 {
    --scroll-size: 5px;
    --scroll-radius: 10px;
    --scroll-track: rgb(255 255 255 / 10%);
    --scroll-thumb-color: #b8b8b8;
  }

  // Ejemplo 4
  &-4 {
    $bg-mask: rgb(255 255 255 / 25%);
    --scroll-size: 12px;
    --scroll-radius: 20px;
    --scroll-track: rgb(0 0 0 / 40%);
    --scroll-thumb: linear-gradient(
      45deg,
      #{$bg-mask} 20%,
      transparent 20%,
      transparent 40%,
      #{$bg-mask} 40%,
      #{$bg-mask} 60%,
      transparent 60%,
      transparent 80%,
      #{$bg-mask} 80%
    );
    --scroll-thumb-color: #f97316;
  }

  // Ejemplo 5
  &-5 {
    --scroll-size: 15px;
    --scroll-radius: 20px;
    --scroll-track: rgb(255 255 255 / 10%);
    --scroll-thumb: linear-gradient(45deg, #00aeff, #a68eff);
  }

  // Ejemplo 6
  &-6 {
    $bg-mask: rgb(255 255 255 / 30%);
    --scroll-size: 12px;
    --scroll-radius: 20px;
    --scroll-track: rgb(0 0 0 / 40%);
    --scroll-thumb: linear-gradient(
      #{$bg-mask} 20%,
      transparent 20%,
      transparent 40%,
      #{$bg-mask} 40%,
      #{$bg-mask} 60%,
      transparent 60%,
      transparent 80%,
      #{$bg-mask} 80%
    );
    --scroll-thumb-color: #10b981;
  }
}