/* // basic */
@use "sass:math";

$loading-cublic-bezier: cubic-bezier(0.42, 0, 0.58, 1);
$raw-radius: 9px;
$raw-width: 100px;
$total: 7;
$transform-scale: 0.45;
$max-scale: 1.2;
$duration: 2.1s;
$interval: 1.869s;
$blue: #0096ff !default;
$green: #25c764 !default;
/* FishEye Color Variables and Functions */
// --------------------------- Color mixing functions ----------------

@function tint($color, $percentage) {
  @return mix(white, $color, $percentage);
}

@function shade($color, $percentage) {
  @return mix(black, $color, $percentage);
}

/*
 --------------------------- Primary Color ---------------------------
*/

$blue: #0096ff !default;
$green: #25c764 !default;
$red: #e75a3a !default;
$orange: #ff9100 !default;
$purple: #6150e2 !default;
$black: #000 !default;
$white: #fff !default;

/*
 ---------------------------When necessary to add at any time---------------------------
*/
$blue-t10: tint($blue, 10%);
$blue-t20: tint($blue, 20%);
$blue-t30: tint($blue, 30%);
$blue-t40: tint($blue, 40%);
$blue-t50: tint($blue, 50%);
$blue-t60: tint($blue, 60%);
$blue-t70: tint($blue, 70%);
$blue-t80: tint($blue, 80%);
$blue-t90: tint($blue, 90%);
$blue-s10: shade($blue, 10%);
$blue-s20: shade($blue, 20%);
$blue-s30: shade($blue, 30%);
$blue-s40: shade($blue, 40%);
$blue-s50: shade($blue, 50%);
$red-t20: tint($red, 20%);
$red-t30: tint($red, 30%);
$red-t40: tint($red, 40%);
$red-t70: tint($red, 70%);
$red-t80: tint($red, 80%);
$red-t90: tint($red, 90%);
$red-s10: shade($red, 10%);
$red-s20: shade($red, 20%);
$green-t20: tint($green, 20%);
$green-t40: tint($green, 40%);
$green-t60: tint($green, 60%);
$green-t80: tint($green, 80%);
$green-t90: tint($green, 90%);
$green-s20: shade($green, 20%);
$orange-t20: tint($orange, 20%);
$orange-t40: tint($orange, 40%);
$orange-t80: tint($orange, 80%);
$orange-t90: tint($orange, 90%);
$orange-s10: shade($orange, 10%);
$orange-s20: shade($orange, 20%);
$purple-t20: tint($purple, 20%);
$purple-t40: tint($purple, 40%);
$purple-t60: tint($purple, 60%);
$purple-t90: tint($purple, 90%);
$purple-s20: shade($purple, 20%);

/* computed */
$raw-diameter: 2 * $raw-radius;
$min-scale: 2 - $max-scale;
$radius: $raw-radius * $transform-scale;
$margin: math.div($transform-scale * $raw-width, $total);
$width: ($total - 1) * $margin + $radius;
$diameter: $raw-diameter * $transform-scale;
$height: 2 * $diameter * $max-scale + $radius;
$top: $diameter - $radius * 0.5;
$negative-top: -$diameter - $radius * 0.5;

// new color ----------
$gray-10: #f2f5fa;
$gray-20: #edf0f7;
$gray-30: #e4e9f2;
$gray-40: #d8deeb;
$gray-50: #ccd4e3;
$gray-60: #a3b4cc;
$gray-70: #6b7d99;
$gray-80: #2d3a56;
$gray-90: #172640;
$gray-100: #0d1b36;
$gray-110: #0a1833;
$gray-120: #00122e;

$gray-a60-1: rgba(#edf1fa, 0.6);
$gray-a60-2: rgba(#e1e6f1, 0.6);
$gray-a60-3: rgba(#d3daeb, 0.6);
$gray-a60-4: rgba(#c0cbe0, 0.6);
$gray-a60-5: rgba(#acbad3, 0.6);
$gray-a60-6: rgba(#6b80a7, 0.6);
$gray-a60-7: rgba(#0a2555, 0.6);
$gray-a60-8: rgba(#2c3852, 0.6);
$gray-a80-9: rgba(23, 38, 64, 0.8);

/* blue */
$blue-100: #1d326c;
$blue-80: #005ed1;
$blue-60: #0080ff;
$blue-40: #009dff;

/* green */
$green-100: #18544f;
$green-80: #008f4c;
$green-60: #00ba5d;
$green-40: #23cf6d;

/* yellow */
$yellow-100: #8e671b;
$yellow-80: #e07f00;
$yellow-60: #fea008;
$yellow-40: #feba33;

/* red */
$red-100: #7d2126;
$red-80: #c73d31;
$red-60: #f0483e;
$red-40: #ff5252;

$fills-opaque-primary-light: $white;
$fills-opaque-secondary-light: $gray-20;
$fills-opaque-terdiary-light: $gray-30;
$fills-opaque-quaternary-light: $gray-40;
$fills-opaque-quinary-light: $gray-50;

$fills-trans-primary-light: $gray-a60-1;
$fills-trans-secondary-light: $gray-a60-2;
$fills-trans-terdiary-light: $gray-a60-3;
$fills-trans-quaternary-light: $gray-a60-4;
$fills-trans-quinary-light: $gray-a60-5;

$text-primary-light: $gray-80;
$text-secondary-light: $gray-a60-8;
$text-terdiary-light: $gray-a60-7;
$text-quaternary-light: $gray-a60-6;

$strokes-translucent-1-light: $gray-a60-5;
$strokes-translucent-2-light: $gray-a60-7;

$strokes-light-trans-1: $gray-a60-2;
$strokes-light-trans-2: $gray-a60-3;
$strokes-light-trans-3: $gray-a60-5;
$strokes-light-trans-4: $gray-a60-6;

$separators-translucent-light: $gray-a60-5;
$separators-opaque-light: $gray-40;

$box-shadow-light-onhover: 0px 0px 4px rgba(235, 239, 245, 0.6),
  0px 8px 16px rgba(129, 138, 153, 0.18);
$background-onhover: linear-gradient(
  90deg,
  #ffffff 0%,
  rgba(255, 255, 255, 0.6) 100%
);

$box-shadow-light-selected: 0px 1px 2px rgba(184, 192, 204, 0.6);
$background-selected: linear-gradient(90deg, #0080ff 0%, #005ed1 100%);

// typography
@mixin Inter($weight: normal, $style: normal) {
  font-family: Inter;
  font-style: $style;
  font-weight: $weight;
}

@mixin Uppercase() {
  text-transform: uppercase;
  font-feature-settings: 'cpsp' on;
}

@mixin Monospace() {
  font-feature-settings: 'tnum' on, 'lnum' on, 'case' on;
}

@mixin Slashed {
  font-feature-settings: 'zero' on;
}

@mixin FullScreenContrast {
  background-size: 50%;
  background-repeat: repeat;
  background-image: url('data:image/png;base64, ');
}

@mixin Autofill($background: white) {
  input:-webkit-autofill,
  input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 50px $background inset !important;
  }
}

/*  palette    global token*/
/* color opaque */

/* color transparent */
/* blue transparent  */
$blue-a20: rgba(#0088ff, 0.2);
$blue-a16: rgba(#0088ff, 0.16);
$blue-a10: rgba(#0088ff, 0.1);
$blue-a4: rgba(#0088ff, 0.04);
/* green transparent  */
$green-a20: rgba(#1ec97f, 0.2);
$green-a16: rgba(#1ec97f, 0.16);
$green-a10: rgba(#1ec97f, 0.1);
$green-a4: rgba(#1ec97f, 0.04);
/* yellow transparent  */
$yellow-a20: rgba(#ffbb00, 0.2);
$yellow-a16: rgba(#ffbb00, 0.16);
$yellow-a10: rgba(#ffbb00, 0.1);
$yellow-a4: rgba(#ffbb00, 0.04);
/* red transparent  */
$red-a20: rgba(#ff4a4a, 0.2);
$red-a16: rgba(#ff4a4a, 0.16);
$red-a10: rgba(#ff4a4a, 0.1);
$red-a4: rgba(#ff4a4a, 0.04);

/* gray transparent */

/* white transparent */
$white-a60: rgba($white, 0.6);

/* gradient opaque */
/* blue radial gradient */
$gradient-blue-1-start: #5bcaff;
$gradient-blue-1-last: #0066ff;

$gradient-blue-1: radial-gradient(
  100% 100% at 0% 100%,
  $gradient-blue-1-start 0%,
  $gradient-blue-1-last 100%
);

/* blue linear gradient */
$gradient-blue-2-start: #0080ff;
$gradient-blue-2-last: #005ed1;

$gradient-blue-2: linear-gradient(
  90deg,
  $gradient-blue-2-start 0%,
  $gradient-blue-2-last 100%
);

/* green radial gradient */
$gradient-green-1-start: #36e0a4;
$gradient-green-1-last: #009449;

$gradient-green-1: radial-gradient(
  100% 100% at 0% 100%,
  $gradient-green-1-start 0%,
  $gradient-green-1-last 100%
);

/* yellow radial gradient */
$gradient-yellow-1-start: #ffd505;
$gradient-yellow-1-last: #f39600;

$gradient-yellow-1: radial-gradient(
  100% 100% at 0% 100%,
  $gradient-yellow-1-start 0%,
  $gradient-yellow-1-last 100%
);

/* red radial gradient */
$gradient-red-1-start: #ff5c78;
$gradient-red-1-last: #dc0000;

$gradient-red-1: radial-gradient(
  100% 100% at 0% 100%,
  $gradient-red-1-start 0%,
  $gradient-red-1-last 100%
);

/* gray radial gradient */
$gradient-gray-1-start: #ccd4e3;
$gradient-gray-1-last: #6b7d99;

$gradient-gray-1: radial-gradient(
  100% 100% at 0% 100%,
  $gradient-gray-1-start 0%,
  $gradient-gray-1-last 100%
);

/* white to gray radial gradient */
$gradient-white-to-gray-1-start: $white;
$gradient-white-to-gray-1-last: #edf0f7;

$gradient-white-to-gray-1: radial-gradient(
  50% 100% at 50% 0%,
  $gradient-white-to-gray-1-start 0%,
  $gradient-white-to-gray-1-last 100%
);

/*  white to gray  linear gradient */
$gradient-white-to-gray-2-start: $white;
$gradient-white-to-gray-2-last: #edf0f7;

$gradient-white-to-gray-2: linear-gradient(
  180deg,
  $gradient-white-to-gray-2-start 0%,
  $gradient-white-to-gray-2-last 100%
);

/* gradient transparent */
$gradient-white-l100r60-start: $white;
$gradient-white-l100r60-last: rgba($white, 0.6);

$gradient-white-l100r60: linear-gradient(
  90deg,
  $gradient-white-l100r60-start 0%,
  $gradient-white-l100r60-last 100%
);

$gradient-white-l60r100: linear-gradient(
  90deg,
  $gradient-white-l100r60-last 0%,
  $gradient-white-l100r60-start 100%
);

/* secondary palette */
$chart-01: #41efc5;
$chart-02: #5ed8ff;
$chart-03: #cfec1b;
$chart-04: #8c83ed;
$chart-05: #de83ed;
$chart-06: #ff9eea;
$chart-07: #ffbf00;

/* purple radial gradient */
$gradient-purple-1-start: #c67eff;
$gradient-purple-1-last: #6a38ff;

$gradient-purple-1: radial-gradient(
  100% 100% at 0% 100%,
  $gradient-purple-1-start 0%,
  $gradient-purple-1-last 100%
);

/*  refine alias color   */
/*  text   */

$text-light-primary: $gray-120;
$text-light-secondary: $gray-a60-8;
$text-light-tertiary: rgba(0, 21, 64, 0.3);
$text-light-quaternary: rgba(3, 30, 79, 0.18);
$text-light-on-tint: $white;
$text-light-super: $blue-100;

$text-light-general: $blue-60;
$text-light-serious: $red-60;
$text-light-notice: $yellow-60;
$text-light-positive: $green-60;

/*  link   */
$link-light-primary: $blue-60;
$link-light-secondary: #2c3852;
$link-light-serious: $red-60;

/*  fill   */
$fills-light-trans-1: rgba(#edf1fa, 0.6);
$fills-light-trans-2: rgba(#e1e6f1, 0.6);
$fills-light-trans-3: rgba(#d3daeb, 0.6);
$fills-light-trans-4: rgba(#c0cbe0, 0.6);
$fills-light-trans-5: rgba(#acbad3, 0.6);
$fills-light-light-white: rgba($white, 0.6);
$fills-light-opaque-1: $gray-10;
$fills-light-opaque-2: $gray-20;
$fills-light-opaque-3: $gray-30;
$fills-light-opaque-4: $gray-40;
$fills-light-opaque-5: $gray-50;
$fills-light-white: $white;

$fills-light-general-general-deep: $blue-100;
$fills-light-general-general-dark: $blue-80;
$fills-light-general-general: $blue-60;
$fills-light-general-general-bright: $blue-40;
$fills-light-general-general-deep-active: rgba(#1d326c, 0.4);
$fills-light-general-general-light-active: rgba(#0088ff, 0.2);
$fills-light-general-general-light-hover: rgba(#0088ff, 0.16);
$fills-light-general-general-light: rgba(#0088ff, 0.1);
$fills-light-general-general-thin: rgba(#0088ff, 0.04);

$fills-light-serious-serious-deep: $red-100;
$fills-light-serious-serious-dark: $red-80;
$fills-light-serious-serious: $red-60;
$fills-light-serious-serious-bright: $red-40;
$fills-light-serious-serious-light-active: rgba(#ff4a4a, 0.2);
$fills-light-serious-serious-light-hover: rgba(#ff4a4a, 0.16);
$fills-light-serious-serious-light: rgba(#ff4a4a, 0.1);
$fills-light-serious-serious-thin: rgba(#ff4a4a, 0.04);

$fills-light-notice-notice-deep: $yellow-100;
$fills-light-notice-notice-dark: $yellow-80;
$fills-light-notice-notice: $yellow-60;
$fills-light-notice-notice-bright: $yellow-40;
$fills-light-notice-notice-light-active: rgba(#ffbb00, 0.2);
$fills-light-notice-notice-light-hover: rgba(#ffbb00, 0.16);
$fills-light-notice-notice-light: rgba(#ffbb00, 0.1);
$fills-light-notice-notice-thin: rgba(#ffbb00, 0.04);

$fills-light-positive-positive-deep: $green-100;
$fills-light-positive-positive-dark: $green-80;
$fills-light-positive-positive: $green-60;
$fills-light-positive-positive-bright: $green-60;
$fills-light-positive-positive-light-active: rgba(#1ec97f, 0.2);
$fills-light-positive-positive-light-hover: rgba(#1ec97f, 0.16);
$fills-light-positive-positive-light: rgba(#1ec97f, 0.1);
$fills-light-positive-positive-thin: rgba(#1ec97f, 0.04);

/*  fill  element  */

$fills-element-light-container-general: rgba(#e1e6f1, 0.6);
$fills-element-light-container-outstanding: rgba(#0088ff, 0.1);
$fills-element-light-container-serious: rgba(#ff4a4a, 0.1);
$fills-element-light-container-notice: rgba(#ffbb00, 0.1);
$fills-element-light-container-positive: rgba(#1ec97f, 0.1);

/*  fill  interaction  */

$fills-interaction-light-general-hover: rgba(#d3daeb, 0.6);
$fills-interaction-light-general-active: rgba(#c0cbe0, 0.6);

$fills-interaction-light-outstanding-hover: rgba(#0088ff, 0.16);
$fills-interaction-light-outstanding-active: rgba(#0088ff, 0.2);
$fills-interaction-light-serious-hover: rgba(#ff4a4a, 0.16);
$fills-interaction-light-serious-active: rgba(#ff4a4a, 0.2);
$fills-interaction-light-notice-hover: rgba(#ffbb00, 0.16);
$fills-interaction-light-notice-active: rgba(#ffbb00, 0.2);
$fills-interaction-light-positive-hover: rgba(#1ec97f, 0.16);
$fills-interaction-light-positive-active: rgba(#1ec97f, 0.2);

/*  stroke   */
$strokes-light-trans-1: rgba(#e1e6f1, 0.6);
$strokes-light-trans-2: rgba(#d3daeb, 0.6);
$strokes-light-trans-3: rgba(#acbad3, 0.6);
$strokes-light-trans-4: rgba(#6b80a7, 0.6);
$strokes-light-outstanding-light: rgba(#0088ff, 0.16);
$strokes-light-serious-light: rgba(#ff4a4a, 0.16);

$strokes-light-opaque-1: $gray-20;
$strokes-light-opaque-2: $gray-30;
$strokes-light-opaque-3: $gray-50;
$strokes-light-opaque-4: $gray-60;
$strokes-light-outstanding: $blue-60;
$strokes-light-serious: $red-60;

/*  background   */

$backgrounds-light-primary: $white;
$backgrounds-light-grouped: $gray-20;
$backgrounds-light-focus: radial-gradient(
  50% 100% at 50% 0%,
  $backgrounds-light-primary 0%,
  $backgrounds-light-grouped 100%
);
$backgrounds-light-full-screen-contrast: $white;
$backgrounds-light-natural: linear-gradient(180deg, $white 0%, $gray-20 100%);
/*  dim   */
$dim-light-under-menu: rgba(#3f6394, 0.1);
$dim-light-under-dialog-box: rgba(#101a29, 0.1);

/*  box shadow   */
$shadow-light-hover: 0px 0px 0px 4px rgba(225, 230, 241, 0.6);
$shadow-light-active: 0px 0px 0px 4px rgba(0, 136, 255, 0.16);
$shadow-light-focus: 0px 0px 0px 4px rgba(0, 136, 255, 0.16);
$shadow-light-error: 0px 0px 0px 4px rgba(255, 74, 74, 0.16);

/*  fisheye   */
$fisheye-gray-010: #f7f8fa;
$fisheye-gray-090: #30343a;
$fisheye-gray-060: #8e9aa9;
