/*------------------------------------*\
    #VARIABLES
\*------------------------------------*/

/**
* These variables are specific to the Pattern Lab shell and exist
* indepenedently of any project-specific styles
*/

// Colors
$pl-color-white: #fff;
$pl-color-gray-02: #fafafa;
$pl-color-gray-07: #eee;
$pl-color-gray-13: #ddd;
$pl-color-gray-20: #ccc;
$pl-color-gray-50: #808080;
$pl-color-gray-55: #737373;
$pl-color-gray-70: #4d4c4c;
$pl-color-gray-87: #222;
$pl-color-black: #000;

$pl-color-trans-white-25: rgba(255, 255, 255, 0.25);

$pl-color-state-info: #02a4d5;
$pl-color-state-complete: #03790f;
$pl-color-state-inreview: #c7a118;
$pl-color-state-inprogress: #b00b02;
$pl-color-state-deprecated: #b00b02;

// Font Family
$pl-font: 'Open Sans', 'HelveticaNeue', 'Helvetica', 'Arial', sans-serif !default;

// Font sizes
$pl-font-size-sm: 0.9rem;
$pl-font-size-sm-2: 0.85rem;
$pl-font-size-norm: 1rem;
$pl-font-size-large: 1.2rem;

// Spacing & Padding
$pl-space: 1rem;
$pl-doublespace: $pl-space * 2;
$pl-pad: 1rem;
$pl-pad-half: $pl-pad * 0.5;
$offset-top: 2rem;

// Breakpoints
$pl-bp-med: 42em;
$pl-bp-large: 53em;
$pl-bp-xl: 62em;

// Animations
$pl-animate-quick: 0.1s;
$pl-animate-normal: 0.3s;

// Borders
$pl-border-radius: 3px;
$pl-border-radius-med: 6px;


$pl-sidebar-width: 16rem; //Define sidebar width for calculating dimensions