// Variables

// Primary Colors
$primary: #0275d8;
$white: #ffffff;
$black: #000000;
$brand-primary: #360061;

$gray-darkest: #2C2C2C;
$gray-darker: #373a3c;
$gray-dark: #55595c;
$gray: #818a91;
$gray-light: #D4D4D4;
$gray-lighter: #eceeef;
$gray-lightest: #f7f7f7;
$gray-mouse: #CCD6DF;

$blue: #0275d8;
$blue-flat: #1b607f;
$blue-light: #5bc0de;
$green: #5cb85c;
$green-light: #2ecc71;
$orange: #f0ad4e;
$red: #d9534f;
$purple: #9C7AC1;

// Info
$info: #2296FA;
$info-text: #31708f;
$info-bg: #d9edf7;
$info-border: darken($info-bg, 7%);

// Success
$success: #00a33e;
$success-text: #3c763d;
$success-bg: #dff0d8;
$success-border: darken($success-bg, 7%);

// Warning
$warning: #ffcd3f;
$warning-text: #8a6d3b;
$warning-bg: #fcf8e3;
$warning-border: darken($warning-bg, 7%);

// Danger
$danger: #f7423d;
$danger-text: #a94442;
$danger-bg: #f2dede;
$danger-border: darken($danger-bg, 7%);

// Progress Bar
$progress-bg: #eeeeee;
$progress-text: #ffffff;

// Editor colors
$editor-darkest: #23282d;
$editor-darker: #2d2d2d;
$editor-dark: #444;

$editor-light: #a0a5aa;
$editor-lighter: #A7A7AA;
$editor-lightest: #ddd;

$editor-accent: #0085ba;
$editor-background: #EBEBEB;
$editor-background-light: #f1f3f5;

$editor-danger: #000;
$editor-warning: #b01b1b;
$editor-success: #39b54a;
$editor-info: #008EFF;

$editor-orange: #fcb92c;

$editor-font: 'Noto Sans', Helvetica, Arial, Verdana, sans-serif;
$editor-font-weight: 400;

// Panel style
$panel-top-shadow: -2px -5px 8px rgba(0, 0, 0, 0.1);
$panel-bottom-shadow: 0 0 8px rgba(0, 0, 0, 0.1);

// Panel Transition
$transition-hover: all 0.5s;

// Layers (Z-indexes)
$under-layer: -1;
$ground-layer: 0;
$ground-layer-overlay: 1;
$first-layer: 80;
$second-layer: 90;
$third-layer: 100;
$fourth-layer: 110;

$element-overlay: 999;
$editor-layer: 9999;
$qazana-modal: 10001;

// Grid Columns
$column-sizes: ( 10: 10%, 11: 11.111%, 12: 12.5%, 14: 14.285%, 16: 16.666%, 20: 20%, 25: 25%, 30: 30%, 33: 33.333%, 40: 40%, 50: 50%, 60: 60%, 66: 66.666%, 70: 70%, 75: 75%, 80: 80%, 83: 83.333%, 90: 90%, 100: 100% );

// Panel
$panel-width: 280px;
$panel-xl-width: 300px;

// Grid Breakpoints
$breakpoints: ( sm: 480px, /* Mobile landscape */ md: 768px, /* Tablet*/ lg: 1025px, /* Desktop*/ xl: 1440px /* Largest devices*/ );

// Media Queries
$screen-xs-max: map_get($breakpoints, sm) - 1;
$screen-sm-min: map_get($breakpoints, sm);
$screen-sm-max: map_get($breakpoints, md) - 1;
$screen-md-min: map_get($breakpoints, md);
$screen-md-max: map_get($breakpoints, lg) - 1;
$screen-lg-min: map_get($breakpoints, lg);
$screen-lg-max: map_get($breakpoints, xl) - 1;
$screen-xl-min: map_get($breakpoints, xl);