$scrollable-scroll-bg: getCustomVar(("$scrollable-scroll-bg")) !default;
$scrollable-scrollbar-active-bg: getCustomVar(("$scrollable-scrollbar-active-bg")) !default;

@use "sass:color";
@use "../sizes" as *;
@use "../colors" as *;

// adduse

$scrollable-bg: $base-bg !default;
$scrollable-scroll-bg: null !default;
$scrollable-scroll-active-bg: null !default;
$scrollable-scrollbar-bg: null !default;
$scrollable-scrollbar-active-bg: null !default;

@if $color == "carmine" {
  $scrollable-scroll-bg: color.change(darken($base-accent, 15%), $alpha: 0.8) !default;
  $scrollable-scroll-active-bg: darken($base-accent, 15%) !default;
  $scrollable-scrollbar-bg: transparent !default;
  $scrollable-scrollbar-active-bg: color.change(darken($scrollable-bg, 25%), $alpha: 0.2) !default;
}

@if $color == "contrast" {
  $scrollable-scroll-bg: $base-inverted-bg !default;
  $scrollable-scroll-active-bg: $base-inverted-bg !default;
  $scrollable-scrollbar-bg: color.change($base-inverted-bg, $alpha: 0) !default;
  $scrollable-scrollbar-active-bg: color.change($base-accent, $alpha: 0.8) !default;
}

@if $color == "dark" {
  $scrollable-scroll-bg: color.change(lighten($scrollable-bg, 25%), $alpha: 0.7) !default;
  $scrollable-scroll-active-bg: lighten($scrollable-bg, 25%) !default;
  $scrollable-scrollbar-bg: transparent !default;
  $scrollable-scrollbar-active-bg: color.change(lighten($scrollable-bg, 25%), $alpha: 0.2) !default;
}

@if $color == "darkmoon" {
  $scrollable-scroll-bg: color.change(darken($base-accent, 15%), $alpha: 0.8) !default;
  $scrollable-scroll-active-bg: darken($base-accent, 15%) !default;
  $scrollable-scrollbar-bg: transparent !default;
  $scrollable-scrollbar-active-bg: color.change(lighten($base-bg, 25%), $alpha: 0.2) !default;
}

@if $color == "darkviolet" {
  $scrollable-scroll-bg: color.change(darken($base-accent, 15%), $alpha: 0.8) !default;
  $scrollable-scroll-active-bg: darken($base-accent, 15%) !default;
  $scrollable-scrollbar-bg: transparent !default;
  $scrollable-scrollbar-active-bg: color.change(#4d4d68, $alpha: 0.5) !default;
}

@if $color == "greenmist" {
  $scrollable-scroll-bg: color.change(darken($base-accent, 15%), $alpha: 0.8) !default;
  $scrollable-scroll-active-bg: darken($base-accent, 15%) !default;
  $scrollable-scrollbar-bg: transparent !default;
  $scrollable-scrollbar-active-bg: color.change(darken($base-bg, 9%), $alpha: 0.7) !default;
}

@if $color == "light" {
  $scrollable-scroll-bg: color.change(darken($scrollable-bg, 25%), $alpha: 0.7) !default;
  $scrollable-scroll-active-bg: darken($scrollable-bg, 25%) !default;
  $scrollable-scrollbar-bg: transparent !default;
  $scrollable-scrollbar-active-bg: color.change(darken($scrollable-bg, 25%), $alpha: 0.2) !default;
}

@if $color == "softblue" {
  $scrollable-scroll-bg: color.change(darken($base-accent, 15%), $alpha: 0.8) !default;
  $scrollable-scroll-active-bg: darken($base-accent, 15%) !default;
  $scrollable-scrollbar-bg: transparent !default;
  $scrollable-scrollbar-active-bg: color.change(darken($scrollable-bg, 25%), $alpha: 0.2) !default;
}

$never-used: collector((
"$scrollable-scroll-bg": $scrollable-scroll-bg,
"$scrollable-scrollbar-active-bg": $scrollable-scrollbar-active-bg,
));