$background-primary-color: #fff;
$background-secondary-color: #fcfcfc;

$text-primary-color: #333;
$text-secondary-color: rgba($text-primary-color, 0.5);

$primary-color: #B11D33;
$primary-text-color: #fff;

$error-color: #F00;
$error-text-color: #fff;
$error-background-color: rgba($error-color, 0.5);

$input-border-color: #888;
$table-border-color: rgba($text-primary-color, 0.1);
$table-header-color: rgba($text-primary-color, 0.06);

$shadow-color: rgba($text-primary-color, 0.8);

$icon-color-focused: rgba($text-primary-color, 0.87);
$icon-color: rgba($text-primary-color, 0.54);
$icon-color-inactive: rgba($text-primary-color, 0.38);

$bg-disabled-color: rgba($text-primary-color, .26);
$bg-enabled-color: rgba($primary-color, .5);
$lever-disabled-color: $background-primary-color;
$lever-enabled-color: $primary-color;

@mixin color-setting {
  :root {
    --background-primary-color: $background-primary-color;
    --background-secondary-color: $background-secondary-color;

    --text-primary-color: $text-primary-color;
    --text-secondary-color: $text-secondary-color;

    --primary-color: $primary-color;
    --primary-text-color: $primary-text-color;

    --error-color: $error-color;
    --error-text-color: $error-text-color;
    --error-background-color: $error-background-color;

    --input-border-color: $input-border-color;
    --table-border-color: $table-border-color;
    --table-header-color: $table-header-color;

    --shadow-color: $shadow-color;

    --icon-color-focused: $icon-color-focused;
    --icon-color: $icon-color;
    --icon-color-inactive: $icon-color-inactive;

    --bg-disabled-color: $bg-disabled-color;
    --bg-enabled-color: $bg-enabled-color;
    --lever-disabled-color: $lever-disabled-color;
    --lever-enabled-color: $lever-enabled-color;
  }
}