// -------------------------
// Variables
// -------------------------

// ==============
// Layout sizes
// ==============
$sidebar-width: 300px;

// ==============
// Colors
// ==============
$color--one: #5b6eff;

$color--attach: #87D7AB;
$color--remove: #FC201F;

$highlight--neutral: #d8eeff;
$highlight--selection: #ffeccc;
$highlight--positive: #cfefdd;
$highlight--negative: #ffd3d3;

// -- Greys -- //
$grey--darkest: #3a3a3a;
$grey--darker: #484848;
$grey: #8b8b8b;
$grey--light:#dedede;
$grey--lighter: #f2f2f2;
$grey--lightest: #fbfbfb;

// -- grey interactive -- //
$grey--link: rgba($grey--darker, 0.8);

// --- border colors --- //
$border-color: $grey--lighter;
$border-color--dark: $grey--light;

// ==============
// Typefaces
// ==============
@mixin fontPrimarySemiBold {
  font-family: 'Montserrat';
  font-weight: 600;
  font-style: normal;
}

@mixin fontPrimarySemiBoldItalic {
  font-family: 'Montserrat';
  font-weight: 600;
  font-style: italic;
}

@mixin fontPrimaryMedium {
  font-family: 'Montserrat';
  font-weight: 500;
  font-style: normal;
}
@mixin fontPrimaryMediumItalic {
  font-family: 'Montserrat';
  font-weight: 500;
  font-style: italic;
}

@mixin fontPrimaryRegular {
  font-family: 'Montserrat';
  font-weight: 400;
  font-style: normal;
}

@mixin fontPrimaryItalic {
  font-family: 'Montserrat';
  font-weight: 400;
  font-style: italic;
}

// ==============
// Border radius
// ==============
$border-radius--s: 3px;
$border-radius--m: 6px;
$border-radius--l: 12px;

// ==============
// Padding
// ==============
$padding--xs: 6px;
$padding--s: 10px;
$padding--m: 22px;
$padding--l: 34px;
$padding--xl: 50px;
$padding--xxl: 74px;

// ==============
// Transition easings
// ==============
$easeOutQuad: all 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
$easeInQuad: all 400ms cubic-bezier(0.55, 0.085, 0.68, 0.53);
$easeOutQuart: all 400ms cubic-bezier(0.165, 0.84, 0.44, 1);
$easeInQuart: all 400ms cubic-bezier(0.895, 0.03, 0.685, 0.22);
