// sendgrid style-guide variables

$font-path: '../fonts' !default;
$border-radius: 2px;

// modular scale base
// modularscale.com/?12,20&px&1.5
$scale-base: 12px;

// modular scale up
$scale-base-up-01: 13px;
$scale-base-up-02: 15px;
$scale-base-up-03: 18px;
$scale-base-up-04: 20px;
$scale-base-up-05: 27px;
$scale-base-up-06: 30px;
$scale-base-up-07: 40px;
$scale-base-up-08: 45px;
$scale-base-up-09: 60px;
$scale-base-up-10: 90px;

// modular scale down
$scale-base-down-01: 9px;
$scale-base-down-02: 6px;
$scale-base-down-03: 3px;

// colors - primary
$sg-blue: #1a82e2;
$slate: #294661;

// colors - primary shades
$sg-blue-80: #489be8;
$sg-blue-60: #76b4ee;
$sg-blue-40: #a3cdf3;
$sg-blue-20: #d1e6f9;
$sg-blue-10: #e8f2fc;
$sg-blue-05: #f3f9fd;
$sg-blue-02: #fbfdff;

$slate-80: #546b81;
$slate-60: #7f90a0;
$slate-40: #a9b5c0;
$slate-20: #d4dadf;
$slate-10: #e9ecef;
$slate-05: #f4f6f7;
$slate-02: #fbfbfc;

// colors - primary darkend
$slate-dark-05: darken($slate, 5%);

// colors - logo accents
$logo-accent-light: #99e1f4;
$logo-accent-medium: #00b3e3;
$logo-accent-dark: #009dd9;

// colors - charting
$ron-burgundy: #b71c1c;
$burnt-orange: #ff5722;
$carrot: #f90;
$mango: #fdd835;
$mantis: #18c96e;
$spruce: #4cb04f;
$grass-stain: #8ac24a;
$lime: #cbdb39;
$cobalt: #303f9f;
$bluebird: #2196f3;
$seafoam: #00bcd4;
$caribbean: #00e5ff;
$crown: #7b1fa2;
$screample: #7c4dff;
$sangria: #880e4f;
$lavender: #dea7e8;
$wild-strawberry: #ff4081;
$steel: #9e9e9e;
$white: #fff;
$black: #000;

// colors - highlight
$color-highlighter: rgba($mango, 0.6);

// colors - ace editor with dark background
$sg-blue-dark: #71ade4;
$slate-40-dark: #9aa6b1;
$ron-burgundy-dark: #ff5c5c;
$burnt-orange-dark: #e87a5a;
$carrot-dark: #e8a644;
$mango-dark: #e3cc64;
$light-gray-dark: #7c8b98;
$steel-dark: #b9b9b9;
$caribbean-dark: #00cee6;
$color-highlighter-dark: #3b4958;
$active-line-dark: #1f2b39;
$copy-button-dark: #284462;

// animations
$animations-skeleton-loader: skeleton-loader;

// alerts
$alert-success: #f1f7e9;
$alert-success-text: #2e6b30;
$alert-warning: #fefae6;
$alert-warning-text: #8c6c15;
$alert-danger: #f4dddd;
$alert-danger-text: #b71c1c;
$alert-verification: $mantis;
$alert-trial: $slate;

// buttons
$btn-primary-bg: $sg-blue-80;
$btn-primary-bg-hover: $sg-blue;
$btn-primary-border: $sg-blue;
$btn-primary-color: $white;
$btn-primary-badge-bg: $white;
$btn-primary-badge-color: $sg-blue;

$btn-secondary-bg: $white;
$btn-secondary-bg-hover: $sg-blue-10;
$btn-secondary-border: $sg-blue-80;
$btn-secondary-color: $sg-blue;
$btn-secondary-badge-bg: $sg-blue;
$btn-secondary-badge-color: $white;

$btn-tertiary-bg: $white;
$btn-tertiary-color: $slate-80;
$btn-tertiary-color-hover: $slate;
$btn-tertiary-badge-bg: $slate-80;

$btn-danger-bg: rgba($ron-burgundy, 0.8);
$btn-danger-bg-hover: $ron-burgundy;
$btn-danger-border: $ron-burgundy;
$btn-danger-color: $white;
$btn-danger-badge-bg: $white;
$btn-danger-badge-color: $ron-burgundy;

$btn-dark-bg: transparent;
$btn-dark-bg-hover: rgba($white, 0.1);
$btn-dark-border: rgba($white, 0.6);
$btn-dark-color: $white;
$btn-dark-badge-bg: $white;
$btn-dark-badge-color: $slate;

$btn-disabled-bg: $steel;
$btn-disabled-border: $steel;
$btn-disabled-color: $white;
$btn-disabled-secondary-bg: $white;
$btn-disabled-secondary-border: $steel;
$btn-disabled-secondary-color: $steel;

$btn-gear-color: $slate-60;
$btn-gear-primary-color: $white;

$btn-group-bg: $white;
$btn-group-bg-hover: rgba($sg-blue, 0.1);
$btn-group-bg-active: $sg-blue-80;
$btn-group-border: rgba($sg-blue, 0.8);
$btn-group-border-active: $sg-blue;
$btn-group-color: $sg-blue;
$btn-group-color-active: $white;

$btn-selectable-border: $slate-20;
$btn-selectable-border-hover: $sg-blue-40;
$btn-selectable-border-active: $sg-blue;
$btn-selectable-color: $slate-80;

// header tabs
$header-tabs-border-color: rgba($black, 0.2);
$header-tabs-hover: #394f64;

// center modals
$center-modal-bg: $white;
$center-modal-width: 600px;
$center-modal-position: -($center-modal-width / 2);

// dropzones
$dropzone-bg: $slate-02;
$dropzone-border: $slate-20;
$dropzone-bg-active: $slate-05;
$dropzone-border-active: $slate-60;
$dropzone-hovered-bg: #e7f9f0;
$dropzone-hovered-border: $mantis;
$dropzone-invalid-bg: rgba(183, 28, 28, 0.1);
$dropzone-invalid-border: $ron-burgundy;
$dropzone-invalid-color: $ron-burgundy;

// filters
$segment-term-max-width: 768px;

// icons
$icon-ab-testing: '\e963';
$icon-ad-campaign: '\e962';
$icon-ads: '\e966';
$icon-airplane-fill: '\e912';
$icon-airplane: '\e90b';
$icon-align-center: '\e927';
$icon-align-left: '\e928';
$icon-align-right: '\e929';
$icon-analytics: '\e915';
$icon-automation: '\e939';
$icon-briefcase: '\e95d';
$icon-builder: '\e914';
$icon-button: '\e920';
$icon-calendar: '\e917';
$icon-caret: '\e900';
$icon-chat: '\e95b';
$icon-check-circle: '\e907';
$icon-check-shield: '\e93f';
$icon-check-thin: '\e938';
$icon-check: '\e905';
$icon-clean-ui: '\e916';
$icon-clear-formatting: '\e956';
$icon-click: '\e93b';
$icon-clock: '\e90d';
$icon-cloud-question: '\e93c';
$icon-code: '\e919';
$icon-column-four: '\e950';
$icon-column-one: '\e953';
$icon-column-three: '\e951';
$icon-column-two: '\e952';
$icon-columns: '\e923';
$icon-connection: '\e961';
$icon-contacts-alt: '\e92c';
$icon-contacts: '\e913';
$icon-copy: '\e902';
$icon-create: '\e901';
$icon-csv: '\e92a';
$icon-desktop-view: '\e627';
$icon-divider: '\e91a';
$icon-download: '\e93e';
$icon-drag: '\e91b';
$icon-dual-flags: '\e95c';
$icon-editor-code: '\e934';
$icon-editor-design: '\e935';
$icon-editor-old: '\e933';
$icon-ellipsis-vertical: '\e93a';
$icon-ellipsis: '\e90e';
$icon-export: '\e931';
$icon-filter: '\e955';
$icon-forms: '\e94f';
$icon-frequency-optimization: '\e959';
$icon-gear: '\e608';
$icon-hash: '\e957';
$icon-help-error: '\e93d';
$icon-help: '\e932';
$icon-image-text: '\e922';
$icon-image: '\e91e';
$icon-images: '\e924';
$icon-info-circle: '\e903';
$icon-key: '\e918';
$icon-list: '\e92b';
$icon-locked: '\e91d';
$icon-mail-multi: '\e954';
$icon-mail-search: '\e92d';
$icon-mail: '\e61d';
$icon-mc-code: '\e942';
$icon-mc-design: '\e629';
$icon-mc-preview: '\e602';
$icon-mc-return: '\e615';
$icon-mc-test-data: '\e943';
$icon-mobile-view: '\e61c';
$icon-move-left: '\e941';
$icon-move-right: '\e940';
$icon-pencil: '\e624';
$icon-people: '\e601';
$icon-pie-chart: '\e606';
$icon-plus: '\e617';
$icon-push-notifications: '\e958';
$icon-recipient-cpm: '\e95f';
$icon-reload: '\e926';
$icon-save-draft: '\e911';
$icon-search: '\e906';
$icon-segment: '\e609';
$icon-send-optimization: '\e960';
$icon-sequence-optimization: '\e95e';
$icon-settings: '\e95a';
$icon-social: '\e925';
$icon-sort-asc: '\e910';
$icon-sort-desc: '\e90f';
$icon-space: '\e944';
$icon-spacer: '\e91f';
$icon-status-caution: '\e92f';
$icon-status-negative: '\e930';
$icon-status-positive: '\e92e';
$icon-teammate: '\e90c';
$icon-test-data: '\e937';
$icon-text-only: '\e603';
$icon-text: '\e921';
$icon-trash: '\e62b';
$icon-unlocked: '\e91c';
$icon-unsubscribe: '\e936';
$icon-upload: '\e931';
$icon-user-security: '\e90a';
$icon-view: '\e600';
$icon-warning-triangle: '\e904';
$icon-warning: '\e909';
$icon-x-legacy: '\e62e';
$icon-x: '\e908';

// loaders
$loader-dark-light: rgba($white, 0.35);
$loader-dark-medium: rgba($white, 0.75);
$loader-dark-medium-solid: rgba($white, 0.9);
$loader-dark-solid: $white;

// modals
$modal-bg: rgba($black, 0.5);
$modal-width: 525px;
$modal-height: 665px;
$modal-footer-height: 71px;
$modal-body-height: $modal-height - $modal-footer-height;
$modal-z-index: 20000;
$side-modal-shadow: -2px 0 6px rgba($slate, 0.1);

// selects
$select-disabled-color: rgba($steel, 0.4);
$select2-disabled-border: rgba($steel, 0.4);
$select2-disabled-placeholder: rgba($steel, 0.4);
$select2-disabled-arrow: rgba($steel, 0.4);

// switches
$switch-background-z-index: 10;
$switch-selector-z-index: 11;
$switch-option-z-index: 12;

// statistics tables
$stats-delivered: $grass-stain;
$stats-opens: $cobalt;
$stats-unique-opens: $bluebird;
$stats-clicks: $crown;
$stats-unique-clicks: $screample;
$stats-unsubscribes: $sangria;
$stats-spam-reports: $ron-burgundy;
$stats-validation-valid: $grass-stain;
$stats-validation-risky: $carrot;
$stats-validation-invalid: $ron-burgundy;

// tables
$compare-border-color: $slate-10;

// text inputs
$text-input-disabled-border: rgba($steel, 0.4);
$text-input-disabled-color: rgba($steel, 0.4);
$text-input-search-title-bg: rgba($sg-blue, 0.1);
$text-area-disabled-border: rgba($steel, 0.4);
$text-area-disabled-color: rgba($steel, 0.4);

// tooltips
$tooltip-bg: $slate;
$tooltip-font-size: 12px;
$tooltip-line-height: 18px;
$tooltip-arrow-height: 6px;

// z-index
$dropdown-menu-z-index: 1000;
$spotlight-circle-z-index: 10000;
$spotlight-tooltip-z-index: 10010;

$info-popup-z-index: 19000;

:export {
  font-path: $font-path;
  border-radius: $border-radius;
  scale-base: $scale-base;
  scale-base-up-01: $scale-base-up-01;
  scale-base-up-02: $scale-base-up-02;
  scale-base-up-03: $scale-base-up-03;
  scale-base-up-04: $scale-base-up-04;
  scale-base-up-05: $scale-base-up-05;
  scale-base-up-06: $scale-base-up-06;
  scale-base-up-07: $scale-base-up-07;
  scale-base-up-08: $scale-base-up-08;
  scale-base-up-09: $scale-base-up-09;
  scale-base-up-10: $scale-base-up-10;
  scale-base-down-01: $scale-base-down-01;
  scale-base-down-02: $scale-base-down-02;
  scale-base-down-03: $scale-base-down-03;
  sg-blue: $sg-blue;
  slate: $slate;
  sg-blue-80: $sg-blue-80;
  sg-blue-60: $sg-blue-60;
  sg-blue-40: $sg-blue-40;
  sg-blue-20: $sg-blue-20;
  sg-blue-10: $sg-blue-10;
  sg-blue-05: $sg-blue-05;
  sg-blue-02: $sg-blue-02;
  slate-80: $slate-80;
  slate-60: $slate-60;
  slate-40: $slate-40;
  slate-20: $slate-20;
  slate-10: $slate-10;
  slate-05: $slate-05;
  slate-02: $slate-02;
  logo-accent-light: $logo-accent-light;
  logo-accent-medium: $logo-accent-medium;
  logo-accent-dark: $logo-accent-dark;
  ron-burgundy: $ron-burgundy;
  burnt-orange: $burnt-orange;
  carrot: $carrot;
  mango: $mango;
  mantis: $mantis;
  spruce: $spruce;
  grass-stain: $grass-stain;
  lime: $lime;
  cobalt: $cobalt;
  bluebird: $bluebird;
  seafoam: $seafoam;
  caribbean: $caribbean;
  crown: $crown;
  screample: $screample;
  sangria: $sangria;
  lavender: $lavender;
  wild-strawberry: $wild-strawberry;
  steel: $steel;
  white: $white;
  black: $black;
  color-highlighter: $color-highlighter;
  sg-blue-dark: $sg-blue-dark;
  slate-40-dark: $slate-40-dark;
  ron-burgundy-dark: $ron-burgundy-dark;
  burnt-orange-dark: $burnt-orange-dark;
  carrot-dark: $carrot-dark;
  mango-dark: $mango-dark;
  light-gray-dark: $light-gray-dark;
  steel-dark: $steel-dark;
  caribbean-dark: $caribbean-dark;
  color-highlighter-dark: $color-highlighter-dark;
  active-line-dark: $active-line-dark;
  copy-button-dark: $copy-button-dark;
  alert-success: $alert-success;
  alert-success-text: $alert-success-text;
  alert-warning: $alert-warning;
  alert-warning-text: $alert-warning-text;
  alert-danger: $alert-danger;
  alert-danger-text: $alert-danger-text;
  alert-verification: $alert-verification;
  alert-trial: $alert-trial;
  btn-primary-bg: $btn-primary-bg;
  btn-primary-bg-hover: $btn-primary-bg-hover;
  btn-primary-border: $btn-primary-border;
  btn-primary-color: $btn-primary-color;
  btn-primary-badge-bg: $btn-primary-badge-bg;
  btn-primary-badge-color: $btn-primary-badge-color;
  btn-secondary-bg: $btn-secondary-bg;
  btn-secondary-bg-hover: $btn-secondary-bg-hover;
  btn-secondary-border: $btn-secondary-border;
  btn-secondary-color: $btn-secondary-color;
  btn-secondary-badge-bg: $btn-secondary-badge-bg;
  btn-secondary-badge-color: $btn-secondary-badge-color;
  btn-danger-bg: $btn-danger-bg;
  btn-danger-bg-hover: $btn-danger-bg-hover;
  btn-danger-border: $btn-danger-border;
  btn-danger-color: $btn-danger-color;
  btn-danger-badge-bg: $btn-danger-badge-bg;
  btn-danger-badge-color: $btn-danger-badge-color;
  btn-dark-bg: $btn-dark-bg;
  btn-dark-bg-hover: $btn-dark-bg-hover;
  btn-dark-border: $btn-dark-border;
  btn-dark-color: $btn-dark-color;
  btn-dark-badge-bg: $btn-dark-badge-bg;
  btn-dark-badge-color: $btn-dark-badge-color;
  btn-disabled-bg: $btn-disabled-bg;
  btn-disabled-border: $btn-disabled-border;
  btn-disabled-color: $btn-disabled-color;
  btn-disabled-secondary-bg: $btn-disabled-secondary-bg;
  btn-disabled-secondary-border: $btn-disabled-secondary-border;
  btn-disabled-secondary-color: $btn-disabled-secondary-color;
  btn-gear-color: $btn-gear-color;
  btn-gear-primary-color: $btn-gear-primary-color;
  btn-group-bg: $btn-group-bg;
  btn-group-bg-hover: $btn-group-bg-hover;
  btn-group-bg-active: $btn-group-bg-active;
  btn-group-border: $btn-group-border;
  btn-group-border-active: $btn-group-border-active;
  btn-group-color: $btn-group-color;
  btn-group-color-active: $btn-group-color-active;
  btn-selectable-border: $btn-selectable-border;
  btn-selectable-border-hover: $btn-selectable-border-hover;
  btn-selectable-border-active: $btn-selectable-border-active;
  btn-selectable-color: $btn-selectable-color;
  center-modal-bg: $center-modal-bg;
  center-modal-width: $center-modal-width;
  center-modal-position: $center-modal-position;
  dropzone-bg: $dropzone-bg;
  dropzone-border: $dropzone-border;
  dropzone-bg-active: $dropzone-bg-active;
  dropzone-border-active: $dropzone-border-active;
  dropzone-hovered-bg: $dropzone-hovered-bg;
  dropzone-hovered-border: $dropzone-hovered-border;
  segment-term-max-width: $segment-term-max-width;
  icon-ab-testing: $icon-ab-testing;
  icon-ad-campaign: $icon-ad-campaign;
  icon-airplane-fill: $icon-airplane-fill;
  icon-airplane: $icon-airplane;
  icon-align-center: $icon-align-center;
  icon-align-left: $icon-align-left;
  icon-align-right: $icon-align-right;
  icon-analytics: $icon-analytics;
  icon-automation: $icon-automation;
  icon-briefcase: $icon-briefcase;
  icon-builder: $icon-builder;
  icon-button: $icon-button;
  icon-calendar: $icon-calendar;
  icon-caret: $icon-caret;
  icon-chat: $icon-chat;
  icon-check-circle: $icon-check-circle;
  icon-check-shield: $icon-check-shield;
  icon-check-thin: $icon-check-thin;
  icon-check: $icon-check;
  icon-clean-ui: $icon-clean-ui;
  icon-clear-formatting: $icon-clear-formatting;
  icon-click: $icon-click;
  icon-clock: $icon-clock;
  icon-code: $icon-code;
  icon-columns: $icon-columns;
  icon-connection: $icon-connection;
  icon-contacts-alt: $icon-contacts-alt;
  icon-contacts: $icon-contacts;
  icon-copy: $icon-copy;
  icon-create: $icon-create;
  icon-csv: $icon-csv;
  icon-desktop-view: $icon-desktop-view;
  icon-divider: $icon-divider;
  icon-download: $icon-download;
  icon-drag: $icon-drag;
  icon-dual-flags: $icon-dual-flags;
  icon-editor-code: $icon-editor-code;
  icon-editor-design: $icon-editor-design;
  icon-editor-old: $icon-editor-old;
  icon-ellipsis-vertical: $icon-ellipsis-vertical;
  icon-ellipsis: $icon-ellipsis;
  icon-export: $icon-export;
  icon-filter: $icon-filter;
  icon-forms: $icon-forms;
  icon-frequency-optimization: $icon-frequency-optimization;
  icon-gear: $icon-gear;
  icon-hash: $icon-hash;
  icon-help: $icon-help;
  icon-image-text: $icon-image-text;
  icon-image: $icon-image;
  icon-images: $icon-images;
  icon-info-circle: $icon-info-circle;
  icon-key: $icon-key;
  icon-list: $icon-list;
  icon-locked: $icon-locked;
  icon-mail-multi: $icon-mail-multi;
  icon-mail-search: $icon-mail-search;
  icon-mail: $icon-mail;
  icon-mobile-view: $icon-mobile-view;
  icon-pencil: $icon-pencil;
  icon-people: $icon-people;
  icon-pie-chart: $icon-pie-chart;
  icon-plus: $icon-plus;
  icon-push-notifications: $icon-push-notifications;
  icon-recipient-cpm: $icon-recipient-cpm;
  icon-reload: $icon-reload;
  icon-save-draft: $icon-save-draft;
  icon-search: $icon-search;
  icon-segment: $icon-segment;
  icon-send-optimization: $icon-send-optimization;
  icon-sequence-optimization: $icon-sequence-optimization;
  icon-settings: $icon-settings;
  icon-social: $icon-social;
  icon-sort-asc: $icon-sort-asc;
  icon-sort-desc: $icon-sort-desc;
  icon-spacer: $icon-spacer;
  icon-status-caution: $icon-status-caution;
  icon-status-negative: $icon-status-negative;
  icon-status-positive: $icon-status-positive;
  icon-teammate: $icon-teammate;
  icon-test-data: $icon-test-data;
  icon-text-only: $icon-text-only;
  icon-text: $icon-text;
  icon-trash: $icon-trash;
  icon-unlocked: $icon-unlocked;
  icon-unsubscribe: $icon-unsubscribe;
  icon-user-security: $icon-user-security;
  icon-view: $icon-view;
  icon-warning-triangle: $icon-warning-triangle;
  icon-warning: $icon-warning;
  icon-x-legacy: $icon-x-legacy;
  icon-x: $icon-x;
  loader-dark-light: $loader-dark-light;
  loader-dark-medium: $loader-dark-medium;
  loader-dark-medium-solid: $loader-dark-medium-solid;
  loader-dark-solid: $loader-dark-solid;
  modal-bg: $modal-bg;
  modal-width: $modal-width;
  modal-height: $modal-height;
  modal-footer-height: $modal-footer-height;
  modal-body-height: $modal-body-height;
  modal-z-index: $modal-z-index;
  side-modal-shadow: $side-modal-shadow;
  select-disabled-color: $select-disabled-color;
  select2-disabled-border: $select2-disabled-border;
  select2-disabled-placeholder: $select2-disabled-placeholder;
  select2-disabled-arrow: $select2-disabled-arrow;
  switch-background-z-index: $switch-background-z-index;
  switch-selector-z-index: $switch-selector-z-index;
  switch-option-z-index: $switch-option-z-index;
  stats-delivered: $stats-delivered;
  stats-opens: $stats-opens;
  stats-unique-opens: $stats-unique-opens;
  stats-clicks: $stats-clicks;
  stats-unique-clicks: $stats-unique-clicks;
  stats-unsubscribes: $stats-unsubscribes;
  stats-spam-reports: $stats-spam-reports;
  compare-border-color: $compare-border-color;
  text-input-disabled-border: $text-input-disabled-border;
  text-input-disabled-color: $text-input-disabled-color;
  text-input-search-title-bg: $text-input-search-title-bg;
  text-area-disabled-border: $text-area-disabled-border;
  text-area-disabled-color: $text-area-disabled-color;
  tooltip-bg: $tooltip-bg;
  tooltip-font-size: $tooltip-font-size;
  tooltip-line-height: $tooltip-line-height;
  tooltip-arrow-height: $tooltip-arrow-height;
  dropdown-menu-z-index: $dropdown-menu-z-index;
  spotlight-circle-z-index: $spotlight-circle-z-index;
  spotlight-tooltip-z-index: $spotlight-tooltip-z-index;
  info-popup-z-index: $info-popup-z-index;
}