@use "sass:map";
$black: var(--fwe-black) !default;
$white: var(--fwe-white) !default;
$caerul: var(--fwe-caerul) !default;
$sucaerul: var(--fwe-sucaerul) !default;
$sucanul: var(--fwe-sucanul) !default;

$gray-100: var(--fwe-gray-100) !default;
$gray-200: var(--fwe-gray-200) !default;
$gray-300: var(--fwe-gray-300) !default;
$gray-400: var(--fwe-gray-400) !default;

$hero-gray: var(--fwe-hero-gray) !default;

$green: var(--fwe-green) !default;
$yellow: var(--fwe-yellow) !default;
$orange: var(--fwe-orange) !default;
$red: var(--fwe-red) !default;
$green-hover: var(--fwe-green-hover) !default;
$yellow-hover: var(--fwe-yellow-hover) !default;
$orange-hover: var(--fwe-orange-hover) !default;
$red-hover: var(--fwe-red-hover) !default;
$orange-active: var(--fwe-orange-active) !default;
$red-active: var(--fwe-red-active) !default;

$text: var(--fwe-text) !default;
$text-light: var(--fwe-text-light) !default;
$text-disabled: var(--fwe-text-disabled) !default;

$hero: var(--fwe-hero) !default;
$hero-hover: var(--fwe-hero-hover) !default;
$hero-active: var(--fwe-hero-active) !default;

// control colors
$control: var(--fwe-control) !default;
$control-hover: var(--fwe-control-hover) !default;
$control-active: var(--fwe-control-active) !default;
$control-disabled: var(--fwe-control-disabled) !default;
$control-box-shadow: 0px 1px 8px rgba(black, 0.3) !default;
$control-scrollbar: var(--fwe-control-scrollbar) !default;
$control-border: var(--fwe-control-border) !default;
$control-border-hover: var(--fwe-control-border-hover) !default;
$control-border-active: var(--fwe-control-border-active) !default;

$background: var(--fwe-background) !default;
$background-modal: rgba(black, 0.7) !default;

$border: var(--fwe-border) !default;
$border-disabled: var(--fwe-border-disabled) !default;

$hero-bg: var(--fwe-hero-bg) !default;
$orange-bg: var(--fwe-orange-bg) !default;
$red-bg: var(--fwe-red-bg) !default;

$white-hover: var(--fwe-white-hover) !default;

// color map
$colors: () !default;
$colors: map.merge(
  (
    "black": $black,
    "white": $white,
    "caerul": $caerul,
    "sucaerul": $sucaerul,
    "sucanul": $sucanul,
    "gray-100": $gray-100,
    "gray-200": $gray-200,
    "gray-300": $gray-300,
    "gray-400": $gray-400,
    "hero-gray": $hero-gray,
    "green": $green,
    "yellow": $yellow,
    "orange": $orange,
    "red": $red,
    "green-hover": $green-hover,
    "yellow-hover": $yellow-hover,
    "orange-hover": $orange-hover,
    "red-hover": $red-hover,
    "orange-active": $orange-active,
    "red-active": $red-active,
    "text": $text,
    "text-light": $text-light,
    "text-disabled": $text-disabled,
    "hero": $hero,
    "hero-hover": $hero-hover,
    "hero-active": $hero-active,
    "control": $control,
    "control-hover": $control-hover,
    "control-active": $control-active,
    "control-disabled": $control-disabled,
    "control-border": $control,
    "control-border-hover": $control-hover,
    "control-border-active": $control-active,
    "control-border-disabled": $control-disabled,
    "background": $background,
    "background-modal": $background-modal,
    "border": $border,
    "border-disabled": $border-disabled,
    "white-hover": $white-hover
  ),
  $colors
);

$badge-colors: () !default;
$badge-colors: map.merge(
  (
    "caerul": $caerul,
    "dark": $text,
    "green": $green,
    "yellow": $yellow,
    "orange": $orange,
    "red": $red,
    "hero": $hero,
    "hero-hover": $hero-hover,
    "hero-active": $hero-active,
    "control": $control,
    "control-hover": $control-hover,
    "control-active": $control-active
  ),
  $badge-colors
);

$font-family-sans-serif: var(--fwe-font-family-sans-serif) !default;
$font-family-monospace: var(--fwe-font-family-monospace) !default;

$font-family-base: $font-family-sans-serif !default;

$font-size-small: var(--fwe-font-size-small) !default;
$font-size-md: var(--fwe-font-size-md) !default;
$font-size-base: var(--fwe-font-size-base) !default;
$font-size-xl: var(--fwe-font-size-xl) !default;
$font-size-xxl: var(--fwe-font-size-xxl) !default;

$font-weight-normal: var(--fwe-font-weight-normal) !default;
$font-weight-bold: var(--fwe-font-weight-bold) !default;

$font-weight-base: $font-weight-normal !default;
$line-height-base: var(--fwe-line-height-base) !default;
$font-feature-settings: var(--fwe-font-feature-settings) !default;
$font-variant-numeric: var(--fwe-font-variant-numeric) !default;

$container-padding: 0 8px 0 8px;
$container-paddings: (
  xs: 0 16px 0 16px,
  md: 0 24px 0 24px,
  lg: 0 60px 0 60px,
  xxl: 0 86px 0 86px
) !default;

$grid-columns: 12 !default;
$grid-gap: 24px !default;
$grid-breakpoint-xxs: 375px;
$grid-breakpoint-xs: 600px;
$grid-breakpoint-sm: 769px;
$grid-breakpoint-md: 1025px;
$grid-breakpoint-lg: 1281px;
$grid-breakpoint-xl: 1441px;
$grid-breakpoint-xxl: 1921px;
$grid-breakpoints: (
  unset: 0,
  xxs: $grid-breakpoint-xxs,
  xs: $grid-breakpoint-xs,
  sm: $grid-breakpoint-sm,
  md: $grid-breakpoint-md,
  lg: $grid-breakpoint-lg,
  xl: $grid-breakpoint-xl,
  xxl: $grid-breakpoint-xxl
) !default;

$breakpoint-xxs-min: $grid-breakpoint-xxs - 1;
$breakpoint-xs-min: $grid-breakpoint-xs - 1;
$breakpoint-sm-min: $grid-breakpoint-sm - 1;
$breakpoint-md-min: $grid-breakpoint-md - 1;
$breakpoint-lg-min: $grid-breakpoint-lg - 1;
$breakpoint-xl-min: $grid-breakpoint-xl - 1;
$breakpoint-xxl-min: $grid-breakpoint-xxl - 1;

$grid-breakpoints-min: (
  xxs-min: $breakpoint-xxs-min,
  xs-min: $breakpoint-xs-min,
  sm-min: $breakpoint-sm-min,
  md-min: $breakpoint-md-min,
  lg-min: $breakpoint-lg-min,
  xl-min: $breakpoint-xl-min,
  xxl-min: $breakpoint-xxl-min
) !default;

$navbar-height: 64px;
$navbar-bottom-box-height: 48px;

$toolbar-width: 60px;

$borders: (
  0: $border,
  disabled: $border-disabled
) !default;

$border-radius-s: 4px;
$border-radius-m: 8px;
$border-radius-l: 12px;
$border-radius-xl: 16px;
$control-border-radius: 4px;

$spacer: 16px !default;
$spacer-0: 0px;
$spacer-1: $spacer * 0.25;
$spacer-2: $spacer * 0.5;
$spacer-3: $spacer;
$spacer-4: $spacer * 1.5;
$spacer-5: $spacer * 2;
$spacer-6: $spacer * 3;
$spacer-xxxs: 4px;
$spacer-xxs: 8px;
$spacer-xs: 12px;
$spacer-s: 16px;
$spacer-m: 24px;
$spacer-l: 32px;
$spacer-xl: 48px;
$spacer-xxl: 64px;

$spacers: (
  0: $spacer-0,
  1: $spacer-1,
  2: $spacer-2,
  3: $spacer-3,
  4: $spacer-4,
  5: $spacer-5,
  6: $spacer-6,
  xxxs: $spacer-xxxs,
  xxs: $spacer-xxs,
  xs: $spacer-xs,
  s: $spacer-s,
  m: $spacer-m,
  l: $spacer-l,
  xl: $spacer-xl,
  xxl: $spacer-xxl
) !default;

$zindex-sticky: var(--fwe-z-index-sticky) !default;
$zindex-fixed: var(--fwe-z-index-fixed) !default;
$zindex-modal-backdrop: var(--fwe-z-index-modal-backdrop) !default;
$zindex-modal: var(--fwe-z-index-modal) !default;
$zindex-dropdown: var(--fwe-z-index-dropdown) !default;
$zindex-popover: var(--fwe-z-index-popover) !default;
$zindex-tooltip: var(--fwe-z-index-tooltip) !default;
$zindex-snackbar: var(--fwe-z-index-snackbar) !default;

$textarea-row-const: var(--fwe-textarea-row-const) !default;