//------------------------------------\
//  VARIABLES
//------------------------------------/

// Colors
$blue-lighter: #E3F7FF;
$blue-light: #CFF0FF;
$blue: #008FD6; // Because of contrast, the blue primary color changed from #1EAEF7 to #008FD6 in January 2021. 
$oldblue: #1EAEF7; // Old primary blue should still be used on modal backgrounds and buttons with black text. 
$blue-dark: #0062BA;
$blue-darker: #022F51;
$blue-styleguide-header: #BCE4F7;
$blue-styleguide-header-hover: #B0DCF1;

$green: #17C96B;
$green-light: #D4F9E4;

$red-dark: #BF0032;
$red: #E23B53;
$red-light: #F9CAD3;

$purple: #3F3161;
$purple-light: #E0DAF7;

$yellow: #FFDA06;
$yellow-light: #FBF6BD;

$black: #000000;
$grey: #6A6A6A;
$grey-medium: #BCC7CC;
$grey-light: #EFEFEF;
$grey-lighter: #F5F5F5;
$white: #FFFFFF;

// Colors with alpha
$transparent: rgba(255, 255, 255, 0);

$white-opacity-005: rgba($white, 0.05);
$white-opacity-01: rgba($white, 0.1);
$white-opacity-02: rgba($white, 0.2);
$white-opacity-03: rgba($white, 0.3);
$white-opacity-04: rgba($white, 0.4);
$white-opacity-05: rgba($white, 0.5);
$white-opacity-07: rgba($white, 0.7);
$white-opacity-09: rgba($white, 0.9);

$black-opacity-005: rgba($black, 0.05);
$black-opacity-01: rgba($black, 0.1);
$black-opacity-03: rgba($black, 0.3);
$black-opacity-04: rgba($black, 0.4);
$black-opacity-07: rgba($black, 0.7);

$blue-opacity: rgba($blue, 0.2);
$blue-opacity-06: rgba($blue, 0.6);
$blue-light-opacity-04: rgba($blue-light, 0.4);
$blue-light-opacity-09: rgba($blue-light, 0.9);
$blue-darker-opacity: rgba($blue-darker, 0.1);
$purple-opacity: rgba($purple, 0.2);
$green-hover-color: rgba($green, 0.8);

// Lighten and darken colors
$blue-light-hover-color-dark: darken($blue-light, 3%);
$blue-hover-color: lighten($blue, 5%);
$blue-light-hover-color: lighten($blue-light, 9%);

$purple-hover-color: lighten($purple, 5%);
$red-hover-color: lighten($red, 5%);
$yellow-hover-color: lighten($yellow, 5%);
$green-lighten: lighten($green, 35%);

// Focus
$focus-color: inset rgba($blue, 0.125) 0 -1000px 0;

// Shadow
$shadow-color: #898989;
$shadow: 1px 1px 4px 0 rgba($shadow-color, 0.5);
$shadow-left: -1px 0 5px 0 rgba($shadow-color, 0.5);
$shadow2: 0 1px 5px -2px $black; // Used for collapse panels an more? TODO: Check if this can be removed
$mobileMenu-shadow: 2px 2px 9px 1px rgba($shadow-color, 0.5);

//Borders
$border-med: 3px;
$border-thick: 7px;
$blue-line: #A5BCC4;

// Improved link underline
$link-textShadow: 0.05em 0 0 $white, -0.05em 0 0 $white, 0 0.05em 0 $white, -0.05em 0 $white, 0.1em 0 0 $white, -0.1em 0 0 $white, 0 0.1em 0 $white, 0 -0.1em 0 $white;
$link-background: linear-gradient(to right, currentColor 0%, currentColor 100%);

// Dotted border with gradient (to avoid double dots in start and end)
$dotted-border-white: linear-gradient(to right, $white 50%, transparent 0%);
$dotted-border-blue: linear-gradient(to right, $blue 50%, transparent 0%);
$dotted-border-black: linear-gradient(to right, $black 50%, transparent 0%);

// Accordion image sizes
$header-img-size-lg: 90px;
$header-img-size-md: 72px;
$header-img-size-sm: 48px;
$header-img-size-xs: 48px;

//Typography
$font-url-start: 'https://tt02.altinn.no/ui/fonts/' !default;
$font: 'DIN-reg';
$font-light: 'DIN-light';
$font-weight-light: normal;
$font-reg: 'DIN-reg';
$font-weight-reg: normal;
$font-medium: 'DIN-medium';
$font-weight-medium: normal;
$font-bold: 'DIN-bold';
$font-weight-bold: normal;
$font-letter-spacing: normal;

$b0: rgba($blue-dark, 0);
$g0: rgba($grey-medium, 0);
$b1: rgba($blue-dark, 1);
$g1: rgba($grey-medium, 1);

// Icons
$icon-reg-em: 2.25em;
$icon-sm-em: 1.8em;
$icon-xs-em: 1.5em;
$icon-md-em: 3.2em;
$icon-lg-em: 4em;

// Grid
$onecol: 8.33333%;

// Images
$images-base-url: '../images/' !default;

// Height based on padding with large letter vertical centered
$height42: 10px 12px 8px 12px;