@use 'sass:map';

@forward '../design/variables' hide $content-color-map, $bg-color-map, $border-color-map,
  $fill-color-map, $shadow-color-map;

$content-color-map: () !default;
$content-color-map: map.merge(
  (
    primary: rgba(#fff, 0.94),
    base: rgba(#fff, 0.88),
    secondary: rgba(#fff, 0.7),
    disabled: rgba(#fff, 0.4),
    placeholder: rgba(#fff, 0.3),
    humble: rgba(#fff, 0.5),
    reverse: rgba(#fff, 0.1)
  ),
  $content-color-map
);

$bg-color-map: () !default;
$bg-color-map: map.merge(
  (
    base: #181a1b,
    reverse: #fff
  ),
  $bg-color-map
);

$border-color-map: () !default;
$border-color-map: map.merge(
  (
    base: rgba(#fff, 0.25),
    light-1: rgba(#fff, 0.2),
    light-2: rgba(#fff, 0.15),
    dark-1: rgba(#fff, 0.3),
    dark-2: rgba(#fff, 0.35)
  ),
  $border-color-map
);

$fill-color-map: () !default;
$fill-color-map: map.merge(
  (
    base: rgba(#fff, 0.06),
    secondary: rgba(#fff, 0.46),
    third: (
      rgba(#fff, 0.36)
    ),
    disabled: rgba(#fff, 0.28),
    hover: rgba(#fff, 0.16),
    humble: rgba(#fff, 0.12),
    background: rgba(#fff, 0.06),
    reverse: #fff
  ),
  $fill-color-map
);

$shadow-color-map: () !default;
$shadow-color-map: map.merge(
  (
    base: rgba(#000, 0.7),
    light-1: rgba(#000, 0.6),
    light-2: rgba(#000, 0.5),
    dark-1: rgba(#000, 0.8),
    dark-2: rgba(#000, 0.9)
  ),
  $shadow-color-map
);