$cf-font-weight--regular: 400;
$cf-font-weight--medium: 600;
$cf-font-weight--bold: 700;

$cf-code-font: 'Roboto Mono', monospace;
$cf-text-font: 'Proxima Nova', Helvetica, Arial, Tahoma, Verdana, sans-serif;

$cf-time-quick: 200ms;
$cf-ease-snappy: cubic-bezier(0.18, 0.16, 0.2, 1);
$cf-transition-default: $cf-time-quick $cf-ease-snappy;

$cf-hover-active-opacity: 0.08;

$cf-radius: 2px;
$cf-border: 2px;

$cf-space-3xs: 4px;
$cf-space-2xs: 8px;
$cf-space-xs: 12px;
$cf-space-s: 16px;
$cf-space-m: 24px;
$cf-form-xs-padding: $cf-space-xs;
$cf-form-sm-padding: $cf-space-xs;
$cf-form-md-padding: $cf-space-s;
$cf-form-lg-padding: $cf-space-m;
$cf-form-xs-height: 33px;
$cf-form-sm-height: 40px;
$cf-form-md-height: 44px;
$cf-form-lg-height: 52px;

$cf-grey-5: #07070e;
$cf-grey-15: #1a1a2a;
$cf-grey-25: #333346;
$cf-grey-45: #68687b;
$cf-grey-55: #828294;
$cf-grey-65: #9e9ead;
$cf-grey-75: #b9b9c5;
$cf-grey-95: #f1f1f3;

$c-amethyst: #8e1fc3;
$c-dreamsicle: #ff8564;
$c-emerald: #006f49;
$c-fire: #dc4e58;
$c-ocean: #066fc5;
$c-pineapple: #ffb94a;
$c-pool: #00a3ff;
$c-pulsar: #513cc6;
$c-rainforest: #2fa74d;
$c-ruby: #bf3d5e;
$c-sapphire: #0b3a8d;
$c-star: #be2ee4;
$c-thunder: #ffd255;
$c-tiger: #f48d38;
$c-topaz: #e85b1c;
$c-void: #5c10a0;
$c-viridian: #009f5f;
$cf-white: #ffffff;
$g0-obsidian: #0f0e15;
$g3-castle: $cf-grey-15;
$g5-pepper: $cf-grey-25;
$g13-mist: #bec2cc;
$g17-whisper: $cf-grey-95;
$g20-white: $cf-white;

$cf-button-default-bg: $cf-grey-25;
$cf-pagination--border-color: $g5-pepper;

$cf-disabled-opacity: 0.5;

@mixin createOverlayBase() {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: '';
  border-radius: $cf-radius;
  transition: opacity $cf-transition-default;
  opacity: 0;
  background-color: #ffffff;
  pointer-events: none;
}

@mixin gradient-diag-up($startColor, $endColor) {
  background: $startColor;
  background: -moz-linear-gradient(45deg, $startColor 0%, $endColor 100%);
  background: -webkit-linear-gradient(45deg, $startColor 0%, $endColor 100%);
  background: linear-gradient(45deg, $startColor 0%, $endColor 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$startColor', endColorstr='$endColor',GradientType=1 );
}

@mixin focus-shadow($color: $c-pool) {
  box-shadow: inset 0 0 0 $cf-border rgba($color, 0.75),
    0px 0px ($cf-border * 2) $color;
}

:root {
  --giraffe-fluid-min-width: 320;
  --giraffe-fluid-max-width: 1372;

  --fluid-screen: 100vw;
  --giraffe-fluid-bp: calc(
    (var(--fluid-screen) - var(--giraffe-fluid-min-width) / 16 * 1rem) /
      (var(--giraffe-fluid-max-width) - var(--giraffe-fluid-min-width))
  );

  --giraffe-f--1-min: 12.44;
  --giraffe-f--1-max: 11.67;
  --giraffe-step--1: calc(
    ((var(--giraffe-f--1-min) / 16) * 1rem) +
      (var(--giraffe-f--1-max) - var(--giraffe-f--1-min)) *
      var(--giraffe-fluid-bp)
  );

  --giraffe-f-0-min: 14;
  --giraffe-f-0-max: 14;
  --giraffe-step-0: calc(
    ((var(--giraffe-f-0-min) / 16) * 1rem) +
      (var(--giraffe-f-0-max) - var(--giraffe-f-0-min)) *
      var(--giraffe-fluid-bp)
  );

  --girafe-f-1-min: 15.75;
  --giraffe-f-1-max: 16.8;
  --giraffe-step-1: calc(
    ((var(--girafe-f-1-min) / 16) * 1rem) +
      (var(--giraffe-f-1-max) - var(--girafe-f-1-min)) * var(--giraffe-fluid-bp)
  );

  --giraffe-f-2-min: 17.72;
  --giraffe-f-2-max: 20.16;
  --giraffe-step-2: calc(
    ((var(--giraffe-f-2-min) / 16) * 1rem) +
      (var(--giraffe-f-2-max) - var(--giraffe-f-2-min)) * var(--fluid-bp)
  );
}

$cf-text-tiny: #{var(--giraffe-step--1)};
$cf-form-xs-font: #{var(--giraffe-step-0)};
$cf-form-sm-font: #{var(--giraffe-step-0)};
$cf-form-md-font: #{var(--giraffe-step-1)};
$cf-form-lg-font: #{var(--giraffe-step-1)};
$cf-text-base: #{var(--giraffe-step-0)};

$cf-text-base--1: $cf-text-tiny;
$cf-text-base-0: $cf-text-base;
$cf-text-base-1: #{var(--giraffe-step-1)};
$cf-text-base-2: #{var(--giraffe-step-2)};

%type-uppercase {
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

// Block user select
%no-user-select {
  user-select: none !important;
  -moz-user-select: none !important;
  -webkit-user-select: none !important;
  -ms-user-select: none !important;
  -o-user-select: none !important;
  &,
  &:hover {
    cursor: default;
  }
}

$table-graph--border: #292933;
$table-graph--cell-highlight: #202028;
$table-graph--cell: #0f0e15;
$table-graph--font: 12px;
$table-graph--heading-bg--active: #292933;
$table-graph--heading-bg: #181820;
$table-graph--heading-sort: #00a3ff;
$table-graph--heading-text-corner: #f6f6f8;
$table-graph--heading-text: #c6cad3;
$table-graph--text-color: #999dab;
$table-graph--text-highlight: #ffffff;

$table-light-graph--border: #e7e8eb;
$table-light-graph--cell-highlight: #f6f6f8;
$table-light-graph--cell: #ffffff;
$table-light-graph--heading-bg--active: #e7e8eb;
$table-light-graph--heading-bg: #eeeff2;
$table-light-graph--heading-sort: #00a3ff;
$table-light-graph--heading-text-corner: #434453;
$table-light-graph--heading-text: #757888;
$table-light-graph--text-color: #676978;
$table-light-graph--text-highlight: #383846;