/* ==========================================================================
   Breakpoints
   ========================================================================== */

/* Add breakpoints and tweakpoints here*/

/* To add custom breakpoints directly inside of a component,*/

/* see https://github.com/guardian/sass-mq#adding-custom-breakpoints*/

/* Name your breakpoints in a way that creates a ubiquitous language*/

/* across team members. It will improve communication between*/

/* stakeholders, designers, developers, and testers.*/

$mq-breakpoints: (
  mobile: 320px,
  mobileBig: 480px,
  phablet: 660px,
  tablet: 768px,
  desktop: 1024px,
  wide: 1366px,
);

/* Show the current breakpoint in the top right corner of the viewport:*/

/* see https://github.com/guardian/sass-mq#seeing-the-currently-active-breakpoint*/

/* Uncomment to activate during development*/

/*$mq-show-breakpoints: (mobile, mobileLandscape, phablet, tablet, desktop, wide);*/

/* ==========================================================================
   Colours
   ========================================================================== */

$black: #000000;
$nearly-black: #444444;

$white: #ffffff;

$primary-color: #00bcd4; /*cyan*/
$primary-color-light: #ccf2f6; /*cyan light*/
$secondary-color: #ffc107; /*yellow*/
$tertiary-color: #4caf50; /*green*/

$warning: #f44336; /*red*/
$success: #8bc34a; /*green light*/

/*UI colours*/
$red: #f44336;
$pink: #e91e63;
$pink-800: #ad1457;
$purple: #9c27b0;
$purple-300: #ba68c8;
$purple-800: #6a1b9a;
$deep-purple: #673ab7;
$indigo: #3f51b5;
$blue: #2962ff;
$light-blue: #03a9f4;
$cyan: #00bcd4;
$teal: #009688;
$green: #4caf50;
$light-green: #8bc34a;
$lime: #cddc39;
$yellow: #ffeb3b;
$amber: #ffc107;
$orange: #ff9800;
$deep-orange: #ff5722;
$brown: #795548;
$red-800: #ff6f00;

/*Greyscale colours*/
$grey: #bdbdbd;
$grey-lightest: #f4f5f5;
$grey-light: #e2e9ea;
$grey-medium: #9e9e9e;
$grey-dark: #616161;
$grey-darkest: #424242;

$grey-50: #fafafa;
$grey-100: #f5f5f5;
$grey-200: #eeeeee;
$grey-400: #bdbdbd;
$blue-grey-50: #eceff1;
$blue-grey-100: #cfd8dc;
$blue-grey-200: #b0bec5;
$blue-grey-400: #78909c;
$blue-grey-500: #607d8b;
$blue-grey-700: #455a64;
$blue-grey-900: #263238;

/* COLOR VARIABLES */
$shadow: rgba(18, 23, 28, 0.14);
$white-opacity: rgba(255, 255, 255, 0.94);
$white-translucent: rgba(255, 255, 255, 0.2);

$link-color: #00bcd4; /*cyan*/

$primary-button-color: #00bcd4; /*cyan*/
$cta-button-color: #4caf50; /*green*/
$alert-button-color: #f44336; /*red*/
$light-button-color: #9e9e9e; /*grey medium*/
$dark-button-color: #424242; /*grey darkest*/

$primary-badge-color: #2962ff; /*blue*/
$secondary-badge-color: #9c27b0; /*purple*/
$alert-badge-color: #f44336; /*red*/
$success-badge-color: #4caf50; /*green*/
$info-badge-color: #00bcd4; /*cyan*/
$light-badge-color: #eeeeee; /*grey light*/
$dark-badge-color: #666666; /*grey dark*/

$primary-alert-color: #bbdefb; /*pale blue*/
$secondary-alert-color: #ffecb3; /*pale yellow*/
$warning-alert-color: #ffcdd2; /*pale red*/
$success-alert-color: #c8e6c9; /*pale green*/
$info-alert-color: #b2ebf2; /*pale cyan*/
$light-alert-color: #e0e0e0; /*grey light*/
$dark-alert-color: #bdbdbd; /*grey*/

$plugin-border-color: #b3e6fc; /*light blue*/

/* ==========================================================================
  BUTTONS
   ========================================================================== */

$button-padding: 5px 20px;
$button-padding-small: 3px 10px;
$button-border-rounded: 20px;
$button-font-size: 0.75rem;
$button-font-size-small: 0.625rem;
$button-text-style: uppercase;
$button-height: 40px;
$button-height-small: 26px;
$button-max-width: 160px;

/* ==========================================================================
  ANIMATION
   ========================================================================== */

$animate-default: all 0.5s ease;

/* ==========================================================================
  MISC
   ========================================================================== */

$box-shadow: 0 4px 8px rgba(0, 0, 0, 0.19);
$box-shadow-small: 1px 2px 4px 0 rgba(0, 0, 0, 0.06);
$box-shadow-button: 0 2px 3px rgba(0, 0, 0, 0.16);
$box-shadow-hover: 1px 2px 3px 0 rgba(0, 0, 0, 0.5);
$box-shadow-solid: 5px 5px 0 0 rgba(97, 97, 97, 0.1);
$breadcrumb-divider: "\003e";

/* ==========================================================================
   Fonts
   ========================================================================== */

$primary-font: "Open Sans", Helvetica, Arial, sans-serif;

$x-small-space: 0.03rem;
$small-space: 0.05rem;
$med-space: 0.1rem;
$space: 0.25rem;

$font-bold: 700;
$font-semi-bold: 600;
$font-regular: 400;
$font-light: 300;

$size-xx-small: 0.688rem;
$size-x-small: 0.813rem;

/* PROJECT PATHS */

$project-path: "..";

/*$project-path: '/project';*/

/* USE EXAMPLE: background: url('#{$project-path}/images/sprites.png') -459px -396px no-repeat; */