@use "sass:map";

:root {
  --font-size: 13px;
  --font-size-input: 13px;
  --font-size-button: 13px;
}

body {
  font-size: var(--font-size);
}

input {
  font-size: var(--font-size-input);
  padding-top: 2px;
}

button {
  font-size: var(--font-size-button);
}

textarea {
  font-size: var(--font-size-input);
}

// Color
$white: #ffffff !default;
$black: #000000 !default;

$gray-100: #FAFAFA !default;
$gray-200: #EAEAEA !default;
$gray-300: #CCCCCC !default;
$gray-400: #A9A9A9 !default;
$gray-500: #666666 !default;
$gray-600: #555555 !default;
$gray-700: #444444 !default;
$gray-800: #292929 !default;

$primary-100: #EAF1FE !default;
$primary-200: #DDEEFF !default;
$primary-300: #B7D2FA !default;
$primary-400: #A4B4FF !default;
$primary-500: #5672EF !default;
$primary-600: #232E8F !default;

$blue: $primary-500 !default;
$blue-bg: $primary-200 !default;
$red: #EB0000 !default;
$red-bg: #FFE3E2 !default;
$orange: #F99341 !default;
$orange-bg: #FFF8DE !default;
$green: #2FA04D !default;
$green-bg: #E9FEE7 !default;
$purple: #945BD9 !default;
$purple-bg: #EAD8FF !default;
$gray-bg: $gray-200 !default;

$color-text: $gray-600 !default;
$color-text-light: $gray-400 !default;

$color-gray: $gray-500 !default;
$color-gray-border: $gray-300 !default;

$color-icon-light: #D5D5D5 !default;
$border: $gray-300 !default;
$border-light: $gray-200 !default;
$color-hover: #E8EEFC !default;
$color-focus: $primary-500 !default;
$color-error: $red !default;

$primary: $primary-500 !default;
$secondary: $orange !default;
$success: $green !default;
$info: $primary-500 !default;
$warning: $orange !default;
$danger: $red !default;
$light: $gray-100 !default;
$dark: $gray-700 !default;
$gray: $gray-400 !default;

//border
$border-width: 1px !default;
$border-radius: .25rem !default;
$border-radius-lg: .3rem !default;
$border-radius-sm: .2rem !default;
$rounded-pill: 50rem !default;
$rounded-circle: 50% !default;
$border-input: 0.8px solid $border-light;

//icon-font
$icon-font-family: "Material Symbols Outlined", monospace;

:root {
  --white: #{$white};
  --black: #{$black};

  --gray-100: #{$gray-100};
  --gray-200: #{$gray-200};
  --gray-300: #{$gray-300};
  --gray-400: #{$gray-400};
  --gray-500: #{$gray-500};
  --gray-600: #{$gray-600};
  --gray-700: #{$gray-700};
  --gray-800: #{$gray-800};

  --primary-100: #{$primary-100};
  --primary-200: #{$primary-200};
  --primary-300: #{$primary-300};
  --primary-400: #{$primary-400};
  --primary-500: #{$primary-500};
  --primary-600: #{$primary-600};

  --blue: #{$blue};
  --blue-bg: #{$blue-bg};
  --red: #{$red};
  --red-bg: #{$red-bg};
  --orange: #{$orange};
  --orange-bg: #{$orange-bg};
  --green: #{$green};
  --green-bg: #{$green-bg};
  --purple: #{$purple};
  --purple-bg: #{$purple-bg};
  --gray-bg: #{$gray-bg};

  --color-text: #{$color-text};
  --color-text-light: #{$color-text-light};
  --color-gray: #{$color-gray};
  --color-gray-border: #{$color-gray-border};
  --color-icon-light: #{$color-icon-light};
  --border: #{$border};
  --border-light: #{$border-light};
  --color-hover: #{$color-hover};
  --color-focus: #{$color-focus};
  --color-error: #{$color-error};

  --primary: #{$primary};
  --secondary: #{$secondary};
  --success: #{$success};
  --info: #{$info};
  --warning: #{$warning};
  --danger: #{$danger};
  --light: #{$light};
  --dark: #{$dark};
  --gray: #{$gray};

  --border-width: #{$border-width};
  --border-radius: #{$border-radius};
  --border-radius-lg: #{$border-radius-lg};
  --border-radius-sm: #{$border-radius-sm};
  --rounded-pill: #{$rounded-pill};
  --rounded-circle: #{$rounded-circle};
  --border-input: #{$border-input};

  --icon-font-family: #{$icon-font-family};
}

$colors: () !default;
$colors: map.merge(
                (
                        "white": $white,
                        "black": $black,
                        "gray-100": $gray-100,
                        "gray-200": $gray-200,
                        "gray-300": $gray-300,
                        "gray-400": $gray-400,
                        "gray-500": $gray-500,
                        "gray-600": $gray-600,
                        "gray-700": $gray-700,
                        "primary-100": $primary-100,
                        "primary-200": $primary-200,
                        "primary-300": $primary-300,
                        "primary-400": $primary-400,
                        "primary-500": $primary-500,
                        "primary-600": $primary-600,
                        "orange": $orange,
                        "green": $green,
                        "red": $red,
                        "blue": $blue,
                        "primary": $primary,
                        "secondary": $secondary,
                        "success": $success,
                        "info": $info,
                        "warning": $warning,
                        "danger": $danger,
                        "light": $light,
                        "dark": $dark,
                        "gray": $gray,
                        "purple": $purple
                ),
                $colors
);


// Default theme color
$header-bg: $primary;
$header-text: $white;
$body-bg: $white;
$body-text: $black;
$button-default-bg: $white;
$button-default-text: $gray-600;
$header-tab-bg: $primary-400;
$header-tab-selected: $white;
$header-tab-text: $gray-600;
$border: $gray-300;
$border-light: $gray-200;
$border-hover: $black;
$color-hover: #E8EEFC;
$colored-bg: $primary-100;
$radio-group: $gray;
$gray-100: $gray-100;
$gray-200: $gray-200;
$gray-400: $gray-400;
$gray-500: $gray-500;
$primary-100: $primary-100;
$primary-200: $primary-200;
$primary-300: $primary-300;

// Dark theme color
$header-bg-dark: #26282a;
$header-text-dark: $gray-200;
$body-bg-dark: #1c1d1f;
$body-text-dark: $gray-300;
$button-default-bg-dark: tranperant;
$button-default-text-dark: $gray-300;
$header-tab-bg-dark: #3b3d41;
$header-tab-selected-dark: #1c1d1f;
$header-tab-text-dark: $white;
$border-dark: $gray-700;
$border-light-dark: $gray-600;
$border-hover-dark: $gray-600;
$color-hover-dark: $gray-700;
$colored-bg-dark: #414244;
$radio-group-dark: $gray-600;
$gray-100-dark: $gray-800;
$gray-200-dark: $gray-700;
$gray-400-dark: $gray-500;
$gray-500-dark: $gray-400;
$primary-100-dark: $primary-600;
$primary-200-dark: $primary-600;
$primary-300-dark: $primary-500;


// Mixins
@mixin theme(
  $header-bg,
  $header-text,
  $body-bg,
  $body-text,
  $button-default-bg,
  $button-default-text,
  $header-tab-bg,
  $header-tab-selected,
  $header-tab-text,
  $border,
  $border-light,
  $border-hover,
  $color-hover,
  $colored-bg,
  $radio-group,
  $gray-100,
  $gray-200,
  $gray-400,
  $gray-500,
  $primary-100,
  $primary-200,
  $primary-300,
) {
  --header-bg: #{$header-bg};
  --header-text: #{$header-text};
  --body-bg: #{$body-bg};
  --body-text: #{$body-text};
  --button-default-bg: #{$button-default-bg};
  --button-default-text: #{$button-default-text};
  --header-tab-bg: #{$header-tab-bg};
  --header-tab-selected: #{$header-tab-selected};
  --header-tab-text: #{$header-tab-text};
  --border: #{$border};
  --border-light: #{$border-light};
  --border-hover: #{$border-hover};
  --color-hover: #{$color-hover};
  --colored-bg: #{$colored-bg};
  --radio-group: #{$radio-group};
  --gray-100: #{$gray-100};
  --gray-200: #{$gray-200};
  --gray-400: #{$gray-400};
  --gray-500: #{$gray-500};
  --primary-100: #{$primary-100};
  --primary-200: #{$primary-200};
  --primary-300: #{$primary-300};
}

// Default theme
:root {
  @include theme(
                  $header-bg,
                  $header-text,
                  $body-bg,
                  $body-text,
                  $button-default-bg,
                  $button-default-text,
                  $header-tab-bg,
                  $header-tab-selected,
                  $header-tab-text,
                  $border,
                  $border-light,
                  $border-hover,
                  $color-hover,
                  $colored-bg,
                  $radio-group,
                  $gray-100,
                  $gray-200,
                  $gray-400,
                  $gray-500,
                  $primary-100,
                  $primary-200,
                  $primary-300,
  );
}

// Dark theme
[data-theme="dark"] {
  @include theme(
                  $header-bg-dark,
                  $header-text-dark,
                  $body-bg-dark,
                  $body-text-dark,
                  $button-default-bg-dark,
                  $button-default-text-dark,
                  $header-tab-bg-dark,
                  $header-tab-selected-dark,
                  $header-tab-text-dark,
                  $border-dark,
                  $border-light-dark,
                  $border-hover-dark,
                  $color-hover-dark,
                  $colored-bg-dark,
                  $radio-group-dark,
                  $gray-100-dark,
                  $gray-200-dark,
                  $gray-400-dark,
                  $gray-500-dark,
                  $primary-100-dark,
                  $primary-200-dark,
                  $primary-300-dark,
  );
}