@use "sass:color";
@use "sass:map";

@use "../utils.scss";
@use "../fonts/montserrat";

// =====
// Theme
// =====
$theme: ();
$theme-light-dark: ();

// ==========
// Fonts/Text
// ==========
$font-family: "Montserrat", sans-serif;
$font-size: 1rem;
$theme: map.merge(
  $theme,
  (
    "font-family": $font-family,
    "font-size": $font-size,
  )
);

$text-color--dark: #ffffff;
$text-color--light: utils.switch-bw($text-color--dark);
$theme-light-dark: map.merge(
  $theme-light-dark,
  (
    "text-color": (
      $text-color--light,
      $text-color--dark,
    ),
  )
);

// ===
// App
// ===
$app-border-radius: 8px;
$app-padding-dimensions: 8px;
$app-button-font-size: 12px;
$theme: map.merge(
  $theme,
  (
    "app-border-radius": $app-border-radius,
    "app-padding-dimensions": $app-padding-dimensions,
    "app-button-font-size": $app-button-font-size,
  )
);

// ==========
// Scroll bar
// ==========
$scrollbar-dimension: 8px;
$scrollbar-thumb-bg-color--dark: #575774;
$scrollbar-thumb-bg-color--light: utils.switch-bw(
  $scrollbar-thumb-bg-color--dark
);
$scrollbar-thumb-border-radius: 16px;
$scrollbar-track-bg-color--dark: #14161c;
$scrollbar-track-bg-color--light: utils.switch-bw(
  $scrollbar-track-bg-color--dark
);
$theme: map.merge(
  $theme,
  (
    "scrollbar-dimension": $scrollbar-dimension,
    "scrollbar-thumb-border-radius": $scrollbar-thumb-border-radius,
  )
);
$theme-light-dark: map.merge(
  $theme-light-dark,
  (
    "scrollbar-thumb-bg-color": (
      $scrollbar-thumb-bg-color--light,
      $scrollbar-thumb-bg-color--dark,
    ),
    "scrollbar-track-bg-color": (
      $scrollbar-track-bg-color--light,
      $scrollbar-track-bg-color--dark,
    ),
  )
);

// ==========
// Background
// ==========
$bg-color--dark: #30304a;
$bg-color--light: utils.switch-bw($bg-color--dark);
$bg-color-inactive--dark: #151530;
$bg-color-inactive--light: utils.switch-bw($bg-color-inactive--dark);
$bg-color-active--dark: #202531;
$bg-color-active--light: utils.switch-bw($bg-color-active--dark);
$theme-light-dark: map.merge(
  $theme-light-dark,
  (
    "bg-color": (
      $bg-color--light,
      $bg-color--dark,
    ),
    "bg-color-inactive": (
      $bg-color-inactive--light,
      $bg-color-inactive--dark,
    ),
    "bg-color-active": (
      $bg-color-active--light,
      $bg-color-active--dark,
    ),
  )
);

// ====
// Container
// ====
// Margin/Padding
$container-margin: 0;
$container-padding: 8px;
$theme: map.merge(
  $theme,
  (
    "container-margin": $container-margin,
    "container-padding": $container-padding,
  )
);

// ====
// Tabs
// ====
$tabs-height: 33px;
$theme: map.merge(
  $theme,
  (
    "tabs-height": $tabs-height,
  )
);

$tabs-bg-color--dark: #000000;
$tabs-bg-color--light: utils.switch-bw($tabs-bg-color--dark);
$theme-light-dark: map.merge(
  $theme-light-dark,
  (
    "tabs-bg-color": (
      $tabs-bg-color--light,
      $tabs-bg-color--dark,
    ),
  )
);

// Margin/Padding
$tab-margin: 0;
$tab-padding: 8px 12px;
$theme: map.merge(
  $theme,
  (
    "tab-margin": $tab-margin,
    "tab-padding": $tab-padding,
  )
);

// Font
$tab-font-style: normal;
$tab-font-weight: bold;
$tab-text-transform: uppercase;
$theme: map.merge(
  $theme,
  (
    "tab-font-style": $tab-font-style,
    "tab-font-weight": $tab-font-weight,
    "tab-text-transform": $tab-text-transform,
  )
);

// Color
$tab-color-active--dark: #ffffff;
$tab-color-active--light: utils.switch-bw($tab-color-active--dark);
$tab-color-inactive--dark: #9a9abf;
$tab-color-inactive--light: utils.switch-bw($tab-color-inactive--dark);
$theme-light-dark: map.merge(
  $theme-light-dark,
  (
    "tab-color-active": (
      $tab-color-active--light,
      $tab-color-active--dark,
    ),
    "tab-color-inactive": (
      $tab-color-inactive--light,
      $tab-color-inactive--dark,
    ),
  )
);

// Text Shadow
$tab-text-shadow-values: 0px 2px 0px;
$tab-text-shadow-color--dark: rgba(0, 0, 0, 0.25);
$tab-text-shadow-color--light: utils.switch-bw($tab-text-shadow-color--dark);
$tab-text-shadow--dark: #{$tab-text-shadow-values} #{$tab-text-shadow-color--dark};
$tab-text-shadow--light: #{$tab-text-shadow-values} #{$tab-text-shadow-color--light};
$theme-light-dark: map.merge(
  $theme-light-dark,
  (
    "tab-text-shadow": (
      $tab-text-shadow--light,
      $tab-text-shadow--dark,
    ),
  )
);

// Tab accent
$tab-accent-color--dark: #30304a;
$tab-accent-color--light: utils.switch-bw($tab-accent-color--dark);
$theme-light-dark: map.merge(
  $theme-light-dark,
  (
    "tab-accent-color": (
      $tab-accent-color--light,
      $tab-accent-color--dark,
    ),
  )
);

// Border
$tab-border-radius: 0 0 0 0;
$theme: map.merge(
  $theme,
  (
    "tab-border-radius": $tab-border-radius,
  )
);

// Gap
$tab-gap: 1px;
$theme: map.merge(
  $theme,
  (
    "tab-gap": $tab-gap,
  )
);

// ====
// Button CTA
// ====
$button-font-size: 12px;
$button-cta-pseudo-height: 2px;
$button-cta-font-weight: 800;
$button-cta-text-transform: uppercase;
$button-cta-bg-color--dark: #ffd500;
$button-cta-bg-color--light: utils.switch-bw($button-cta-bg-color--dark);
$button-cta-text-color--dark: color.scale(
  $button-cta-bg-color--dark,
  $lightness: -75%
);
$button-cta-text-color--light: color.scale(
  $button-cta-bg-color--light,
  $lightness: -75%
);
$button-cta-box-shadow-color--dark: color.scale(
  $button-cta-bg-color--dark,
  $lightness: -50%
);
$button-cta-box-shadow-color--light: color.scale(
  $button-cta-bg-color--light,
  $lightness: -50%
);
$button-cta-box-shadow-dimensions: 0px $button-cta-pseudo-height 0px 0px;
$button-cta-box-shadow--dark: $button-cta-box-shadow-dimensions
  $button-cta-box-shadow-color--dark;
$button-cta-box-shadow--light: $button-cta-box-shadow-dimensions
  $button-cta-box-shadow-color--light;
$theme: map.merge(
  $theme,
  (
    "button-font-size": $button-font-size,
    "button-cta-box-shadow-dimensions": $button-cta-box-shadow-dimensions,
    "button-cta-pseudo-height": $button-cta-pseudo-height,
    "button-cta-font-weight": $button-cta-font-weight,
    "button-cta-text-transform": $button-cta-text-transform,
  )
);
$theme-light-dark: map.merge(
  $theme-light-dark,
  (
    "button-cta-bg-color": (
      $button-cta-bg-color--light,
      $button-cta-bg-color--dark,
    ),
    "button-cta-text-color": (
      $button-cta-text-color--light,
      $button-cta-text-color--dark,
    ),
    "button-cta-box-shadow-color": (
      $button-cta-box-shadow-color--light,
      $button-cta-box-shadow-color--dark,
    ),
    "button-cta-box-shadow": (
      $button-cta-box-shadow--light,
      $button-cta-box-shadow--dark,
    ),
  )
);

$button-cta-disabled-saturation: -50%;
$button-cta-disabled-lightness: +10%;
$button-cta-bg-color-disabled--dark: color.adjust(
  $button-cta-bg-color--dark,
  $saturation: $button-cta-disabled-saturation,
  $lightness: $button-cta-disabled-lightness
);
$button-cta-bg-color-disabled--light: color.adjust(
  $button-cta-bg-color--light,
  $saturation: $button-cta-disabled-saturation,
  $lightness: $button-cta-disabled-lightness
);
$button-cta-box-shadow-color-disabled--dark: color.adjust(
  $button-cta-box-shadow-color--dark,
  $saturation: $button-cta-disabled-saturation,
  $lightness: $button-cta-disabled-lightness
);
$button-cta-box-shadow-color-disabled--light: color.adjust(
  $button-cta-box-shadow-color--light,
  $saturation: $button-cta-disabled-saturation,
  $lightness: $button-cta-disabled-lightness
);
$button-cta-box-shadow-disabled--dark: $button-cta-box-shadow-dimensions
  $button-cta-box-shadow-color-disabled--dark;
$button-cta-box-shadow-disabled--light: $button-cta-box-shadow-dimensions
  $button-cta-box-shadow-color-disabled--light;
$theme-light-dark: map.merge(
  $theme-light-dark,
  (
    "button-cta-bg-color-disabled": (
      $button-cta-bg-color-disabled--light,
      $button-cta-bg-color-disabled--dark,
    ),
    "button-cta-box-shadow-color-disabled": (
      $button-cta-box-shadow-color-disabled--light,
      $button-cta-box-shadow-color-disabled--dark,
    ),
    "button-cta-box-shadow-disabled": (
      $button-cta-box-shadow-disabled--light,
      $button-cta-box-shadow-disabled--dark,
    ),
  )
);

// ====
// Menu
// ====
$menu-font-size: $button-font-size;
$menu-font-weight: normal;
$menu-height: $tabs-height;
$menu-gap: 12px;
$menu-button-gap: 12px;
$theme: map.merge(
  $theme,
  (
    "menu-font-size": $menu-font-size,
    "menu-font-weight": $menu-font-weight,
    "menu-height": $menu-height,
    "menu-gap": $menu-gap,
    "menu-button-gap": $menu-button-gap,
  )
);