@font-face {
  font-family: "Inter";
  src: url("~@/env/assets/fonts/Inter/Inter-ExtraLight.woff2") format("woff2");
  font-weight: 200;
}
@font-face {
  font-family: "Inter";
  src: url("~@/env/assets/fonts/Inter/Inter-ExtraLightItalic.woff2")
    format("woff2");
  font-weight: 200;
  font-style: italic;
}
@font-face {
  font-family: "Inter";
  src: url("~@/env/assets/fonts/Inter/Inter-Light.woff2") format("woff2");
  font-weight: 300;
}
@font-face {
  font-family: "Inter";
  src: url("~@/env/assets/fonts/Inter/Inter-Regular.woff2") format("woff2");
  font-weight: 400;
}
@font-face {
  font-family: "Inter";
  src: url("~@/env/assets/fonts/Inter/Inter-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
}
@font-face {
  font-family: "Inter";
  src: url("~@/env/assets/fonts/Inter/Inter-Medium.woff2") format("woff2");
  font-weight: 500;
}
@font-face {
  font-family: "Inter";
  src: url("~@/env/assets/fonts/Inter/Inter-Bold.woff2") format("woff2");
  font-weight: 700;
}
@font-face {
  font-family: "Inter";
  src: url("~@/env/assets/fonts/Inter/Inter-BoldItalic.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
}

// IBS uses Inter https://github.com/rsms/inter

$font-family-base: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;

$dark: #2c405a;

$blue: #0070ff;
$red: #e11717;
$green: #34b233;
$yellow: #f5bd1f;

$primary: $red;
$danger: $red;
$success: $green;
$warning: $yellow;

$dark-hover: #3c506a;
$login-page-description-color: rgba(12, 28, 41, 0.6);

$border-radius: 8px;
$loading-color: #c11d1d;
$navbar-color: $dark;
$header-height: 56px;
$navigation-width: 280px;

// Light theme
$red-hover: #fc2a2a; /* Red Brand Primary Hover */
$red-active: #df2323; /* Red Brand Primary Active */
$red-disabled: rgb(225, 113, 113); /* Red Brand Primary Disabled */
$red-click: #c71414; /* Red Brand Primary Click */

$red-5: rgba(225, 23, 23, 0.05); /* Faint Brand Primary/5% */
$red-40: rgba(225, 23, 23, 0.4); /* Faint Brand Primary/40% */
$red-50: rgba(225, 23, 23, 0.5); /* Faint Brand Primary/50% */

$gray-2: rgb(251, 251, 252); /* Faint Secondary Primary/2% */
$gray-5-hover: rgba(20, 39, 53, 0.1); /* Faint Secondary Primary Hover/5% */
$gray-5: rgba(26, 62, 91, 0.05); /* Faint Secondary Primary/5% */
$gray-10: rgba(26, 62, 91, 0.1); /* Faint Secondary Primary/10% */
$gray-20: rgba(26, 62, 91, 0.2); /* Faint Secondary Primary/20% */
$gray-30: rgba(26, 62, 91, 0.3); /* Faint Secondary Primary/30% */
$gray-light: rgb(232, 235, 238);
$gray-passwordfield: rgb(243 245 247);

$blue-10: rgb(235 240 253);
$green-10: rgb(236 248 235);
$yellow-10: rgb(254 249 233);

$surface-primary: #ffffff;
$surface-secondary: #f3f4f5;

$on-surface-primary: #040a0f;
$on-surface-secondary: rgba(4, 10, 15, 0.6);
$on-surface-tretiatry: rgba(4, 10, 15, 0.3);

$text-primary: rgba(12, 28, 41, 0.9);
$text-secondary: rgba(12, 28, 41, 0.8);
$text-tretiatry: rgba(12, 28, 41, 0.6);
$text-quaternary: rgba(12, 28, 41, 0.3);

$select-bg-size:  18px;
$select-bg : url("~@/assets/images/_sila/chevron-down.svg");

// Dark theme
$red-5-dark: rgba(225, 23, 23, 0.1); /* Faint Brand Primary/5% */
$red-40-dark: rgba(225, 23, 23, 0.5); /* Faint Brand Primary/40% */
$red-50-dark: rgba(225, 23, 23, 0.6); /* Faint Brand Primary/50% */

$gray-5-hover-dark: rgba(26, 62, 91, 0.7);
$gray-5-dark: rgba(26, 62, 91, 0.2); /* Faint Secondary Primary/5% */
$gray-10-dark: rgba(26, 62, 91, 0.3); /* Faint Secondary Primary/10% */
$gray-20-dark: rgba(26, 62, 91, 0.4); /* Faint Secondary Primary/20% */
$gray-30-dark: rgba(26, 62, 91, 0.5); /* Faint Secondary Primary/30% */
$gray-passwordfield-dark: rgb(19 32 43);

$blue-10-dark: rgba(45, 96, 229, 0.1);
$green-10-dark: rgba(52, 178, 51, 0.1);
$yellow-10-dark: rgba(245, 189, 31, 0.1);

$surface-primary-dark: #12191f;
$surface-secondary-dark: #0c1c29;

$on-surface-primary-dark: #f5f5f5;
$on-surface-secondary-dark: rgba(245, 245, 245, 0.6);
$on-surface-tretiatry-dark: rgba(245, 245, 245, 0.3);

$text-primary-dark: #e6e6e6;
$text-secondary-dark: rgba(255, 255, 255, 0.9);
$text-tretiatry-dark: rgba(255, 255, 255, 0.6);
$text-quaternary-dark: rgba(255, 255, 255, 0.3);

$select-bg-dark: url("~@/assets/images/_sila/chevron-down-dark.svg");
$select-bg-size-dark: 15px 7px;

$themes: (
  light: (
    surface-primary: $surface-primary,
    surface-secondary: $surface-secondary,
    on-surface-primary: $on-surface-primary,
    on-surface-secondary: $on-surface-secondary,
    on-surface-tretiatry-dark: $on-surface-tretiatry,
    text-primary: $text-primary,
    text-secondary: $text-secondary,
    text-tretiatry: $text-tretiatry,
    text-quaternary: $text-quaternary,
    back-light: $gray-100,
    nav-hover: #dde0e5,
    nav-focus: #f4f4f4,
    gray-5-hover: $gray-5-hover,
    gray-5: $gray-5,
    gray-10: $gray-10,
    gray-20: $gray-20,
    gray-30: $gray-30,
    gray-passwordfield: $gray-passwordfield,
    red-5: $red-5,
    red-40: $red-40,
    red-50: $red-50,
    blue-10: $blue-10,
    green-10: $green-10,
    yellow-10: $yellow-10,
    custom-switch-back: $white,
    select-bg: $select-bg,
    select-bg-size: $select-bg-size,
  ),
  dark: (
    surface-primary: $surface-primary-dark,
    surface-secondary: $surface-secondary-dark,
    on-surface-primary: $on-surface-primary-dark,
    on-surface-secondary: $on-surface-secondary-dark,
    on-surface-tretiatry-dark: $on-surface-tretiatry-dark,
    text-primary: $text-primary-dark,
    text-secondary: $text-secondary-dark,
    text-tretiatry: $text-tretiatry-dark,
    text-quaternary: $text-quaternary-dark,
    back-light: $gray-30-dark,
    nav-hover: $gray-30-dark,
    nav-focus: $gray-30-dark,
    gray-5-hover: $gray-5-hover-dark,
    gray-5: $gray-5-dark,
    gray-10: $gray-10-dark,
    gray-20: $gray-20-dark,
    gray-30: $gray-30-dark,
    gray-passwordfield: $gray-passwordfield-dark,
    red-5: $red-5-dark,
    red-40: $red-40-dark,
    red-50: $red-50-dark,
    blue-10: $blue-10-dark,
    green-10: $green-10-dark,
    yellow-10: $yellow-10-dark,
    custom-switch-back: $text-primary-dark,
    select-bg: $select-bg-dark,
    select-bg-size: $select-bg-size-dark,
  ),
);

@mixin themify($themes) {
  @each $theme, $map in $themes {
    .#{$theme}-theme & {
      $theme-map: () !global;
      @each $key, $submap in $map {
        $value: map-get(map-get($themes, $theme), "#{$key}");
        $theme-map: map-merge(
          $theme-map,
          (
            $key: $value,
          )
        ) !global;
      }
      @content;
      $theme-map: null !global;
    }
  }
}

@function themed($key) {
  @return map-get($theme-map, $key);
}