//CODEPEN: VARIABLES  SCSS
// Defines all of the scss variables used in all _partials scss.
// @copyright   Copyright (c) 2019
// @version     3.5.2


$font-root:
                              -apple-system,
                              BlinkMacSystemFont,
                              "Segoe UI",
                              Roboto,
                              Oxygen,
                              Ubuntu,
                              Cantarell,
                              "Fira Sans",
                              "Helvetica Neue",
                              sans-serif;

$font-abeezee:                "ABeeZee";
$font-corben:                 "Corben";
$font-encode-sans-condensed:  "Encode Sans Condensed";
$font-niramit:                "Niramit";

// SIZES IN PIXELS
$size-5px:                    5px;
$size-10px:                   10px;
$size-12px:                   12px;
$size-14px:                   14px;
$size-16px:                   16px;
$size-18px:                   18px;
$size-21px:                   21px;
$size-24px:                   24px;
$size-28px:                   28px;
$size-32px:                   32px;


// SIZES IN REM
$size-063rem:                 0.063rem; // 1px
$size-125rem:                 0.125rem; // 2px
$size-188rem:                 0.188rem; // 3px
$size-250rem:                 0.250rem; // 4px
$size-313rem:                 0.313rem; // 5px
$size-375rem:                 0.375rem; // 6px
$size-500rem:                 0.500rem; // 8px
$size-625rem:                 0.625rem; // 10px
$size-750rem:                 0.750rem; // 12px
$size-875rem:                 0.875rem; // 14px
$size-baserem:                1rem;
$size-1125rem:                1.125rem; // 18px
$size-1250rem:                1.250rem; // 20px
$size-1375rem:                1.375rem; // 22px
$size-1500rem:                1.500rem; // 24px
$size-1750rem:                1.750rem; // 28px
$size-1875rem:								1.875rem; // 30px
$size-2rem:                   2rem;     // 32px
$size-2500rem:                2.500rem; // 40px
$size-3rem:                   3rem;     // 48px
$size-3125rem:								3.125rem; // 50px
$size-4rem:         					4rem;
$size-3750rem:								3.750rem; // 60px
$size-4688rem:								4.688rem; // 75px
$size-6250rem:								6.250rem; // 100px
$size-12500rem:								12.500rem; // 200px
$size-40rem:									40rem; // 640px
$size-43750rem:								43.750rem; // 700px

// WEIGHTS
$weight-300:                  300;
$weight-400:                  400;
$weight-500:                  500;
$weight-600:                  600;
$weight-700:                  700;

// LETTER SPACING
$spacing--015em:              -.015em;
$spacing-1em:                 .1em;
$spacing-25em:                .25em;

// LINE HEIGHT
$line-height-sm:              1;
$line-height-title:           1.125;
$line-height-copy:            1.250;
$line-height-std:              1.5;
$line-height-gr:              1.618;

$zero1:                       0;
$zero2:                       0 0;
$zero3:                       0 0 0;
$zero4:                       0 0 0 0;

// DIMENSIONS
$dim-25:                      25;
$dim-33:                      33.3333;
$dim-50:                      50;
$dim-67:                      66.6667;
$dim-75:                      75;

// UD COLORS
$colors-primary-blue:         #00539F;
$colors-primary-yellow:       #FFD200;
$colors-secondary-blue2:      #003C71;
$colors-secondary-blue3:      #00A0DF;
$colors-component-blue:       #00497A;
$colors-component-blue2:      #337AB7;
$colors-secondary-gray:       #BDBDBD;
$colors-secondary-khaki:      #EEE8C5;

// OPACITY COLORS
$colors-rgba-white14:         rgba(255, 255, 255, .14);
$colors-rgba-white12:         rgba(255, 255, 255, .12);
$colors-rgba-white2:          rgba(255, 255, 255, .2);
$colors-rgba-white3:          rgba(255, 255, 255, .3);
$colors-rgba-white4:          rgba(255, 255, 255, .4);

$colors-rgba-gray14:          rgba(26, 26, 26, .14);
$colors-rgba-gray12:          rgba(26, 26, 26, .12);
$colors-rgba-gray2:           rgba(26, 26, 26, .2);
$colors-rgba-gray3:           rgba(26, 26, 26, .3);
$colors-rgba-gray4:           rgba(26, 26, 26, .4);

$colors-rgba-black14:         rgba(0, 0, 0, .14);
$colors-rgba-black12:         rgba(0, 0, 0, .12);
$colors-rgba-black2:          rgba(0, 0, 0, .2);
$colors-rgba-black3:          rgba(0, 0, 0, .3);
$colors-rgba-black4:          rgba(0, 0, 0, .4);
$colors-rgba-black5:          rgba(0, 0, 0, .5);
$colors-rgba-black7:          rgba(0, 0, 0, .7);


// GENERAL COLORS
$colors-black2:               lighten( #000000, 7% ); // 121212
$colors-black3:               lighten( #000000, 13% ); // 212121
$colors-gray3:                lighten( #000000, 20% ); // 333
$colors-gray6:                lighten( #000000, 40% ); // 666
$colors-gray7:                lighten( #000000, 48% ); // 7A7A7A
$colors-gray9:                lighten( #000000, 60% ); // 999
$colors-grayC:                lighten( #000000, 80% ); // CCC
$colors-whiteE:               lighten( #000000, 93% ); // EEE
$colors-whiteF5:              lighten( #000000, 96% ); // F5F5F5
$colors-orange:               #FFA83D;


// ELEMENTS
$colors-focus:                #2094F3;
$colors-cr-hover:							#DAE7FB;
$colors-field-border:         #D6D6D6;
$colors-field-text:           #767676;
$colors-valid:                #008545;
$colors-invalid:              #B11031;
$colors-error2:               #D90000;
$colors-error3:               #DC3545;

// EASING

$cb1:                         cubic-bezier(0.17, 0.67, 0.93, 0.61);
$cb2:                         cubic-bezier(0.55, 0, 0.1, 1);
$cb3:                         cubic-bezier(0.54, 0.58, 0.265, 1);
$cb4:                         cubic-bezier(0.68, 1.25, 0.265, 1);
$cb-google:										cubic-bezier(0, 0, 0.31, 1);
$cb-fields:										cubic-bezier(0.25, 0.8, 0.25, 1); 
$cb-focus:			 							cubic-bezier(0.43, 0.41, 0.22, 0.91); // active, valid, focus
$cb-vert:											cubic-bezier(0.17, 0.04, 0.03, 0.94);

// BOX SHADOW MD

$box-shadow-2dp: 							0 2px 2px 0 $colors-rgba-black14, 
  														0 3px 1px -2px $colors-rgba-black2, 
  														0 1px 5px 0 $colors-rgba-black12;

$box-shadow-3dp: 							0 3px 4px 0 $colors-rgba-black14, 
  														0 3px 3px -2px $colors-rgba-black2, 
  														0 1px 8px 0 $colors-rgba-black12;

$box-shadow-4dp: 							0 4px 5px 0 $colors-rgba-black14, 
  														0 1px 10px 0 $colors-rgba-black12, 
  														0 2px 4px -1px $colors-rgba-black2;

$box-shadow-6dp: 							0 6px 10px 0 $colors-rgba-black14, 
  														0 1px 18px 0 $colors-rgba-black12, 
  														0 3px 5px -1px $colors-rgba-black2;

$box-shadow-8dp: 							0 8px 10px 1px $colors-rgba-black14, 
  														0 3px 14px 2px $colors-rgba-black12, 
  														0 5px 5px -3px $colors-rgba-black2;

$box-shadow-8dp: 							0 8px 16px rgba(0, 0, 0, 0.19), 
  														0px 6px 6px rgba(0, 0, 0, 0.23);

$box-shadow-16dp:  						0 16px 24px 2px $colors-rgba-black14, 
  														0 6px 30px 5px $colors-rgba-black12, 
  														0 8px 10px -5px $colors-rgba-black2;

// SIZES
$size-field-px:   50px;
$size-field-rem:  3.125rem;

// BOX SHADOW
$mdc-elv-0:       
                0px 0px 0px 0px $colors-rgba-black2,
                0px 0px 0px 0px $colors-rgba-black14, 
                0px 0px 0px 0px $colors-rgba-black12;

$mdc-elv-1:       
                0px 2px 1px -1px $colors-rgba-black2,
                0px 1px 1px 0px $colors-rgba-black14, 
                0px 1px 3px 0px $colors-rgba-black12;

$mdc-elv-2:       
                0px 3px 1px -2px $colors-rgba-black2,
                0px 2px 2px 0px $colors-rgba-black14, 
                0px 1px 5px 0px $colors-rgba-black12;

$mdc-elv-3:       
                0 3px 3px -2px $colors-rgba-black2,
                0 3px 4px 0 $colors-rgba-black14,
                0 1px 8px 0 $colors-rgba-black12;

$mdc-elv-4:       
                0px 2px 4px -1px $colors-rgba-black2,
                0px 4px 5px 0px $colors-rgba-black14, 
                0px 1px 10px 0px $colors-rgba-black12;

$mdc-elv-6:     0px 3px 5px -1px $colors-rgba-black2,
                0px 6px 10px 0px $colors-rgba-black14, 
                0px 1px 18px 0px $colors-rgba-black12;

$mdc-elv-8:     0px 5px 5px -3px $colors-rgba-black2,
                0px 8px 10px 1px $colors-rgba-black14, 
                0px 3px 14px 2px $colors-rgba-black12;

$mdc-elv-12:        
                0px 7px 8px -4px $colors-rgba-black2,
                0px 12px 17px 2px $colors-rgba-black14, 
                0px 5px 22px 4px $colors-rgba-black12;

$mdc-elv-16:        
                0px 8px 10px -5px $colors-rgba-black2,
                0px 16px 24px 2px $colors-rgba-black14, 
                0px 6px 30px 5px $colors-rgba-black12;

$mdc-elv-24:
                0px 11px 15px -7px $colors-rgba-black2,
                0px 24px 38px 3px $colors-rgba-black14, 
                0px 9px 46px 8px $colors-rgba-black12;