@use 'sass:map';

// dark-mode

// Background
$bg-color: () !default;
$bg-color: map.merge(
  (
    'page': #0a0a0a,
    '': #141414,
    'overlay': #1d1e1f,
  ),
  $bg-color
);

// border
$border-color-base: #f5f8ff;
$border-color: () !default;
$border-color: map.merge(
  (
    'darker': rgba($border-color-base, 0.35),
    'dark': rgba($border-color-base, 0.3),
    '': rgba($border-color-base, 0.25),
    'light': rgba($border-color-base, 0.2),
    'lighter': rgba($border-color-base, 0.15),
    'extra-light': rgba($border-color-base, 0.1),
  ),
  $border-color
);

// fill
$fill-color-base: #fafcff;
$fill-color: () !default;
$fill-color: map.merge(
  (
    'darker': rgba($fill-color-base, 0.2),
    'dark': rgba($fill-color-base, 0.16),
    '': rgba($fill-color-base, 0.12),
    'light': rgba($fill-color-base, 0.08),
    'lighter': rgba($fill-color-base, 0.04),
    'extra-light': rgba($fill-color-base, 0.02),
    'blank': transparent,
  ),
  $fill-color
);

// text
$text-color-base: #f0f5ff;
$text-color: () !default;
$text-color: map.merge(
  (
    'primary': rgba($text-color-base, 0.95),
    'regular': rgba($text-color-base, 0.85),
    'secondary': rgba($text-color-base, 0.65),
    'placeholder': rgba($text-color-base, 0.55),
    'disabled': rgba($text-color-base, 0.4),
  ),
  $text-color
);