$screen-sm: 767px;
$screen-md: 1177px;
$screen-lg: 1400px;

$color-blue: #4bb0f8;
$color-cyan: #c3f3ee;
$color-cyan-dark: #5cb7af;
$color-white: #ffffff;
$color-background: #f7f7f7;
$color-primary: #0030d4;
$color-secondary: #10284b;
$color-black: #000000;
$color-hover-dark: #00000008;
$color-red: #F80909;
$color-sup:#ca1010;
$color-light-green:#009c8c;
$color-green: #339D43;
$color-dark-green:#3a9160;
$color-dark:#273d5a;
$color-yellow: #ffb900;
$color-border: #b3bac5;
$color-dark-blue: #152036;
$color-background-primary: #fdf6f3;
$color-background-light:#eff3fd;

$color-text-black: #000000;
$color-text-dark: #091e42;
$color-text: #42526e;
$color-text-light: #7a869a;
$color-text-grey: #8C9AA5;
$color-text-white:#ffffff;

$secondary-color:#10284b;
$white:#ffffff;
$yellow:#fef1e6;
$black:#000000;
$light-blue:#4cb0f8;

$color-greyLight :#f1f1f1;
$color-grey:#8da0b9;

$font-family-sora: 'Sora', sans-serif;
$font-family-hk: 'HkGrotesk', sans-serif;


@mixin scrollbars($size, $foreground-color, $background-color: mix($foreground-color, white, 50%)) {

  // For Google Chrome
  &::-webkit-scrollbar {
    width: $size;
    height: $size;
  }

  &::-webkit-scrollbar-thumb {
    background: $foreground-color;
    border-radius: $size;
  }

  &::-webkit-scrollbar-track {
    background: $background-color;
  }

  // For Internet Explorer
  & {
    scrollbar-face-color: $foreground-color;
    scrollbar-track-color: $background-color;
  }
}