@import "~bootstrap/scss/functions";
@import "../../functions";
@import "../variables/dracula_variables";
@import "~bootstrap/scss/variables";
@import "../../flist_derived";
@import "../variables/dracula_derived";

// Apply variables to theme.
@import "../chat";

* {
    &::-webkit-scrollbar-track {
        box-shadow: inset 0 0 2px $card-border-color;
        border-radius: 10px;
    }

    &::-webkit-scrollbar {
        width: 12px;
    }

    &::-webkit-scrollbar-thumb {
        border-radius: 10px;
        box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.8);
        background-color: $gray-300;
        &:hover {
            background-color: $gray-500;
        } 

        &:active {
            background-color: $gray-700;
        }
    }
}

$genders: (
        "shemale": $dracula-purple,
        "herm": lighten(saturate($dracula-purple, 0.36), 10.78),
        "none": $dracula-comment,
        "female": $dracula-pink,
        "male": $dracula-cyan,
        "male-herm": lighten(saturate($dracula-cyan, 0.45), 36.86),
        "transgender": $dracula-orange,
        "cunt-boy": $dracula-green
);

$red-color: $dracula-red;
$green-color: $dracula-green;
$blue-color: darken(saturate($dracula-cyan, 0.45), 36.86);
$yellow-color: $dracula-yellow;
$purple-color: lighten(saturate($dracula-purple, 0.36), 10.78);
$cyan-color: $dracula-cyan;
$white-color: $dracula-foreground;
$black-color: #000;
$brown-color: #8a6d3b;
$pink-color: $dracula-pink;
$gray-color: #ccc;
$orange-color: $dracula-orange;

.btn-primary, .btn-primary:hover, .list-group-item.active {
  color: $dracula-bg;
}

@each $gender, $color in $genders {
  .gender-#{$gender} {
    color: $color;
  }

  .message-event .gender-#{$gender} {
    color: lighten($color, 5%)
  }
}

.colorblindMode {
  @import "../colorblind";
  @import "../../rising";

  @each $varName, $value in $risingVariables {
    --#{$varName}: #{$value};
  }
}