// -------- Variables --------







// -------- Layout variables --------

// ********** IMPORTANT!! **********
// DON'T OVERWRITE THESE VARIABLES.
// YOU DON'T NEED TO USE THEM, they are used
// to generate our grid system.

// Grid breakpoints
$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 1024px,
  xl: 1440px
);

// Breakpoint widths
$width-xs: 0;       // breakpoint for small smartphone devices (from 0px to 575px)
$width-sm: 576px;   // breakpoint for big smartphone devices (from 576px to 767px)
$width-md: 768px;   // breakpoint for tablet devices (from 768px to 1023px)
$width-lg: 1024px;  // breakpoint for small screens (from 1024px to 1439px)
$width-xl: 1440px;  // breakpoint for big screens (from 1440px onwards)

// Container max widths
$container-max-widths: (
  xs: 100%,    // max-width for small smartphone devices (100%)
  sm: 575px,   // max-width for big smartphone devices (from 100% to 575px)
  md: 767px,   // max-width for tablet devices (from 576px to 767px)
  lg: 1023px,  // max-width for small screens (from 768px to 1023px)
  xl: 1200px,  // max-width for big screens (from 1024px to 1200px)
);

// Grid columns/gutter
// Set the number of columns and specify the width of the gutters.
$grid-columns: 12;
$grid-gutter-width: 24px;
$grid-gutter-width-mobile: 16px;
// -------- Colors --------


// -------- Color variables --------

// Generic colors




// Component colors




// -------- Brand colors variables --------

// We use this variables in every element that need a color.
// We use these colors in the main components.
// We have three ranges of colors:
// - Primary colors: used for interactions.
// - Brand colors: Bipi branding colors, their use in components and interactions is very restricted.
// - Greyscale colors: range of greys that will be applied to the neutral elements of the components of the DSL.

// DON'T ADD MORE COLORS in this file without talking to UX.

/* --------------How to use---------------- */
//     color: $text-color;
//     background-color: $primary-color-100;
//     border: 1px solid $greyscale-color-70;
/* ---------------------------------------- */

// BRAND COLORS

// Primary colors
$primary-color-5: #F0F3FF;  // Lighten-5
$primary-color-20: #D6E2FF;  // Lighten-20
$primary-color-30: #B2CCFF;  // Lighten-30
$primary-color-100: #0B5FFF;  // Main color
$primary-color-110: #093EAA;  // Darken-110
$primary-color-130: #00298A;  // Darken-130
$primary-color-140: #001B61;  // Darken-140

// Brand secondary colors
$brand-secondary-color-5: #EAEFF7;  // Lighten-5
$brand-secondary-color-20: #C0CADE;  // Lighten-20
$brand-secondary-color-30: #7A8CAC;  // Lighten-30
$brand-secondary-color-100: #4C5E79;  // Main color
$brand-secondary-color-110: #2B3647;  // Darken-110
$brand-secondary-color-130: #1F293F;  // Darken-130
$brand-secondary-color-140: #151D36;  // Darken-140

// Greyscale colors
$greyscale-color-0: #FFF;
$greyscale-color-5: #F6F6F6;
$greyscale-color-10: #EAEAEA;
$greyscale-color-20: #D6D6D6;
$greyscale-color-30: #BCBCBC;
$greyscale-color-70: #767676;
$greyscale-color-80: #4F4F4F;
$greyscale-color-90: #262626;
$greyscale-color-100: #000;

// SOME GENERAL USE OF COLORS

// Text colors
$text-color: $greyscale-color-90;               // Text base color
$text-light-color: $greyscale-color-70;         // Text light color
$text-negative-color: $greyscale-color-0;       // Text negative color. On dark backgrounds
$text-link-color: $primary-color-100;           // Text link color
$text-link-hover-color: $primary-color-110;     // Text link hover color

// Disabled colors
$disabled-color: $greyscale-color-20;          // Disabled elements
$disabled-light-color: $greyscale-color-5;     // Disabled lighten elements
$disabled-dark-color: $greyscale-color-30;     // Disabled darken elements
// -------- Semantic colors variables --------

// We use these variables for interactions or states of a component.
// We have five ranges of colors:
// - Error colors: to highlight a failure in the interaction or a system error. This red is different from Bipi red.
// - Success colors: to indicate a visual positive reinforcement of something done correctly.
// - Warning colors: to highlight a caution or highlight an interaction in progress.
// - Info colors: to highlight interactions that are not the main ones, but that should be highlighted compared to the already pre-established ones.
// - Support colors: for cases not included in the four previous cases.

// DON'T ADD MORE COLORS in this file without talking to UX.

/* --------------How to use---------------- */
//     color: $success-color-100;
//     background-color: $success-color-5;
//     border: 1px solid $success-color-140;
/* ---------------------------------------- */

// SEMANTIC COLORS

// Error colors
$error-color-5: #FFF2F2;  // Lighten-5
$error-color-20: #FBC9CD;  // Lighten-20
$error-color-30: #F6A2AC;  // Lighten-30
$error-color-100: #D3003D;  // Main color
$error-color-110: #B20023;  // Darken-110
$error-color-130: #7B000D;  // Darken-130
$error-color-140: #590006;  // Darken-140

// Success colors
$success-color-5: #F2FFF8;  // Lighten-5
$success-color-20: #CBFAE4;  // Lighten-20
$success-color-30: #A6F4D2;  // Lighten-30
$success-color-100: #0BCE92;  // Main color
$success-color-110: #087D59;  // Darken-110
$success-color-130: #056245;  // Darken-130
$success-color-140: #03402D;  // Darken-140

// Warning colors
$warning-color-5: #FFFAF2;  // Lighten-5
$warning-color-20: #FFF2D8;  // Lighten-20
$warning-color-30: #FFE4AD;  // Lighten-30
$warning-color-100: #FF9E00;  // Main color
$warning-color-110: #CF8600;  // Darken-110
$warning-color-130: #8A5F00;  // Darken-130
$warning-color-140: #604500;  // Darken-140

// Info colors
$info-color-5: #F2F9FF;  // Lighten-5
$info-color-20: #DCF1FF;  // Lighten-20
$info-color-30: #C7E8FF;  // Lighten-30
$info-color-100: #42A5F5;  // Main color
$info-color-110: #097EC9;  // Darken-110
$info-color-130: #035D87;  // Darken-130
$info-color-140: #01455F;  // Darken-140

// Support colors
$support-color-5: #FBF2FF;  // Lighten-5
$support-color-20: #EFD8F8;  // Lighten-20
$support-color-30: #E4C0F0;  // Lighten-30
$support-color-100: #AE45C5;  // Main color
$support-color-110: #9010A9;  // Darken-110
$support-color-130: #690677;  // Darken-130
$support-color-140: #4E0257;  // Darken-140

// SOME GENERAL USE OF COLORS

// Text colors
$text-error-color: $error-color-100;  // Text error color
// -------- Miscellaneous colors variables --------

// We use these variables to incorporate more colors to the platform.
// These colors are not associated with any particular state.
// They bring us greater flexibility when generating components.
// It will be applied in cases of use in which the semantic color palette is insufficient.
// Nine new colors have been included: Amber, Orange, Red, Pink, Purple, Blue, Turquoise, Green and Lime.

// DON'T ADD MORE COLORS in this file without talking to UX.

/* --------------How to use---------------- */
//     color: $amber-color-100;
//     background-color: $amber-color-20;
//     border: 1px solid $$amber-color-140;
/* ---------------------------------------- */

// MISCELLANEOUS COLORS

// Amber colors
$amber-color-5: #FFF8F0;  // Lighten-5
$amber-color-20: #FFEEC4;  // Lighten-20
$amber-color-30: #FFE295;  // Lighten-30
$amber-color-100: #FFD542;  // Main color
$amber-color-110: #D2A626;  // Darken-110
$amber-color-130: #906F17;  // Darken-130
$amber-color-140: #40310B;  // Darken-140

// Orange colors
$orange-color-5:   #FFF2EC;  // Lighten-5
$orange-color-20:  #FFDBD0;  // Lighten-20
$orange-color-30: #FFB6A5;   // Lighten-30
$orange-color-100: #FF852D;  // Main color
$orange-color-110: #E1612F;  // Darken-110
$orange-color-130: #8E1F0C;  // Darken-130
$orange-color-140: #66140E;  // Darken-140

// Red colors
$red-color-5: #FFF2F2;  // Lighten-5
$red-color-20: #FBC9CD;  // Lighten-20
$red-color-30: #F6A2AC;  // Lighten-30
$red-color-100: #D3003D;  // Main color
$red-color-110: #B20023;  // Darken-110
$red-color-130: #7B000D;  // Darken-130
$red-color-140: #590006;  // Darken-140

// Pink colors
$pink-color-5: #FFEBF8;  // Lighten-5
$pink-color-20: #FFD0EF;  // Lighten-20
$pink-color-30: #FFB4E3;  // Lighten-30
$pink-color-100: #FF217A;  // Main color
$pink-color-110: #D10057;  // Darken-110
$pink-color-130: #8E003A;  // Darken-130
$pink-color-140: #660029;  // Darken-140

// Purple colors
$purple-color-5: #FBF2FF;  // Lighten-5
$purple-color-20: #EFD8F8;  // Lighten-20
$purple-color-30: #E4C0F0;  // Lighten-30
$purple-color-100: #AE45C5;  // Main color
$purple-color-110: #9010A9;  // Darken-110
$purple-color-130: #690677;  // Darken-130
$purple-color-140: #4E0257;  // Darken-140

// Blue colors
$blue-color-5: #F2F9FF;  // Lighten-5
$blue-color-20: #DCF1FF;  // Lighten-20
$blue-color-30: #C7E8FF;  // Lighten-30
$blue-color-100: #42A5F5;  // Main color
$blue-color-110: #097EC9;  // Darken-110
$blue-color-130: #035D87;  // Darken-130
$blue-color-140: #01455F;  // Darken-140

// Turquoise colors
$turquoise-color-5: #EBFEFF;  // Lighten-5
$turquoise-color-20: #C7FCFF;  // Lighten-20
$turquoise-color-30: #A3FBFF;  // Lighten-30
$turquoise-color-100: #00DCEF;  // Main color
$turquoise-color-110: #00B1C7;  // Darken-110
$turquoise-color-130: #007489;  // Darken-130
$turquoise-color-140: #005264;  // Darken-140

// Green colors
$green-color-5: #F0FFF8;  // Lighten-5
$green-color-20: #CBFAE4;  // Lighten-20
$green-color-30: #A6F4D2;  // Lighten-30
$green-color-100: #0BCE92;  // Main color
$green-color-110: #087D59;  // Darken-110
$green-color-130: #056245;  // Darken-130
$green-color-140: #03402D;  // Darken-140

// Lime colors
$lime-color-5: #EBFFF1;  // Lighten-5
$lime-color-20: #DBFFE3;  // Lighten-20
$lime-color-30: #CBFED1;  // Lighten-30
$lime-color-100: #7DE861;  // Main color
$lime-color-110: #25A519;  // Darken-110
$lime-color-130: #077E0A;  // Darken-130
$lime-color-140: #025B09;  // Darken-140
// -------- Button component color variables --------

// Theses variables are ONLY USED in Button component.
// DON'T USE THEM IN OTHER COMPONENTS OR VIEWS.

/* --------------How to use---------------- */
//     color: $button-primary-text;
//     background-color: $button-primary-background;
/* ---------------------------------------- */

// Primary Button colors
$button-primary-background: $primary-color-100;
$button-primary-background-disabled: $disabled-color;
$button-primary-background-hover: $primary-color-110;
$button-primary-text: $greyscale-color-0;
$button-primary-text-disabled: $greyscale-color-0;
$button-primary-text-hover: $greyscale-color-0;

// Secondary Button colors
$button-secondary-background: $greyscale-color-0;
$button-secondary-background-disabled: $greyscale-color-0;
$button-secondary-background-hover: $greyscale-color-10;
$button-secondary-text: $primary-color-100;
$button-secondary-text-disabled: $disabled-color;
$button-secondary-text-hover: $primary-color-110;
$button-secondary-border: $primary-color-100;
$button-secondary-border-disabled: $disabled-color;
$button-secondary-border-hover: $primary-color-110;

// Secondary transparent Button colors
$button-secondary-transparent-background: transparent;
$button-secondary-transparent-background-disabled: transparent;
$button-secondary-transparent-background-hover: $greyscale-color-10;
$button-secondary-transparent-text: $primary-color-100;
$button-secondary-transparent-text-disabled: $disabled-color;
$button-secondary-transparent-text-hover: $primary-color-110;

// Tertiary Button colors
$button-tertiary-background: $greyscale-color-0;
$button-tertiary-background-disabled: $greyscale-color-0;
$button-tertiary-background-hover: $greyscale-color-10;
$button-tertiary-text: $greyscale-color-90;
$button-tertiary-text-disabled: $disabled-color;
$button-tertiary-text-hover: $greyscale-color-90;
$button-tertiary-border: $greyscale-color-90;
$button-tertiary-border-disabled: $disabled-color;
$button-tertiary-border-hover: $greyscale-color-90;

// Tertiary transparent Button colors
$button-tertiary-transparent-background: transparent;
$button-tertiary-transparent-background-disabled: transparent;
$button-tertiary-transparent-background-hover: $greyscale-color-10;
$button-tertiary-transparent-text: $greyscale-color-90;
$button-tertiary-transparent-text-disabled: $disabled-color;
$button-tertiary-transparent-text-hover: $greyscale-color-90;

// Approve Button colors
$button-approve-background: $success-color-100;
$button-approve-background-disabled: $disabled-color;
$button-approve-background-hover: $success-color-110;
$button-approve-text: $greyscale-color-0;
$button-approve-text-disabled: $greyscale-color-0;
$button-approve-text-hover: $greyscale-color-0;

// Reject Button colors
$button-reject-background: $greyscale-color-0;
$button-reject-background-disabled: $greyscale-color-0;
$button-reject-background-hover: $greyscale-color-10;
$button-reject-text: $error-color-100;
$button-reject-text-disabled: $disabled-color;
$button-reject-text-hover: $error-color-110;
$button-reject-border: $error-color-100;
$button-reject-border-disabled: $disabled-color;
$button-reject-border-hover: $error-color-110;
// -------- Input component color variables --------

// Theses variables are ONLY USED in Input component.
// DON'T USE THEM IN OTHER COMPONENTS OR VIEWS.

/* --------------How to use---------------- */
//     color: $input-text;
/* ---------------------------------------- */

// Input Default
$input-text: $text-color;
$input-placeholder: $greyscale-color-30;
$input-background: $greyscale-color-0;
$input-border: $greyscale-color-30;
$input-icon: $greyscale-color-30;

// Input Hover
$input-background-hover: $primary-color-5;

// Input Active
$input-border-active: $primary-color-100;
$input-background-active: $primary-color-100;
$input-icon-active: $primary-color-100;
$input-icon-negative-active: $greyscale-color-0;

// Input Error
$input-text-error: $error-color-100;
$input-border-error: $error-color-100;
$input-icon-error: $error-color-100;

// Input Disabled
$input-text-disabled: $disabled-dark-color;
$input-label-disabled: $disabled-color;
$input-placeholder-disabled: $disabled-dark-color;
$input-background-disabled: $disabled-light-color;
$input-background-active-disabled: $disabled-color;
$input-border-disabled: $disabled-color;
$input-icon-disabled: $disabled-color;

// Step Manager
$step-manager-active-bg-color: $red-color-110;
// -------- Map colors variables --------

$colors: (
  primary-color-5:   $primary-color-5,
  primary-color-20:  $primary-color-20,
  primary-color-30:  $primary-color-30,
  primary-color-100: $primary-color-100,
  primary-color-110: $primary-color-110,
  primary-color-130: $primary-color-130,
  primary-color-140: $primary-color-140,
  brand-secondary-color-5:   $brand-secondary-color-5,
  brand-secondary-color-20:  $brand-secondary-color-20,
  brand-secondary-color-30:  $brand-secondary-color-30,
  brand-secondary-color-100: $brand-secondary-color-100,
  brand-secondary-color-110: $brand-secondary-color-110,
  brand-secondary-color-130: $brand-secondary-color-130,
  brand-secondary-color-140: $brand-secondary-color-140,
  greyscale-color-0:   $greyscale-color-0,
  greyscale-color-5:   $greyscale-color-5,
  greyscale-color-10:  $greyscale-color-10,
  greyscale-color-20:  $greyscale-color-20,
  greyscale-color-30:  $greyscale-color-30,
  greyscale-color-70:  $greyscale-color-70,
  greyscale-color-80:  $greyscale-color-80,
  greyscale-color-90:  $greyscale-color-90,
  greyscale-color-100: $greyscale-color-100,
  error-color-5:   $error-color-5,
  error-color-20:  $error-color-20,
  error-color-30:  $error-color-30,
  error-color-100: $error-color-100,
  error-color-110: $error-color-110,
  error-color-130: $error-color-130,
  error-color-140: $error-color-140,
  success-color-5:   $success-color-5,
  success-color-20:  $success-color-20,
  success-color-30:  $success-color-30,
  success-color-100: $success-color-100,
  success-color-110: $success-color-110,
  success-color-130: $success-color-130,
  success-color-140: $success-color-140,
  warning-color-5:   $warning-color-5,
  warning-color-20:  $warning-color-20,
  warning-color-30:  $warning-color-30,
  warning-color-100: $warning-color-100,
  warning-color-110: $warning-color-110,
  warning-color-130: $warning-color-130,
  warning-color-140: $warning-color-140,
  info-color-5:   $info-color-5,
  info-color-20:  $info-color-20,
  info-color-30:  $info-color-30,
  info-color-100: $info-color-100,
  info-color-110: $info-color-110,
  info-color-130: $info-color-130,
  info-color-140: $info-color-140,
  support-color-5:   $support-color-5,
  support-color-20:  $support-color-20,
  support-color-30:  $support-color-30,
  support-color-100: $support-color-100,
  support-color-110: $support-color-110,
  support-color-130: $support-color-130,
  support-color-140: $support-color-140,
  amber-color-5:   $amber-color-5,
  amber-color-20:  $amber-color-20,
  amber-color-30:  $amber-color-30,
  amber-color-100: $amber-color-100,
  amber-color-110: $amber-color-110,
  amber-color-130: $amber-color-130,
  amber-color-140: $amber-color-140,
  orange-color-5:   $orange-color-5,
  orange-color-20:  $orange-color-20,
  orange-color-30:  $orange-color-30,
  orange-color-100: $orange-color-100,
  orange-color-110: $orange-color-110,
  orange-color-130: $orange-color-130,
  orange-color-140: $orange-color-140,
  red-color-5:   $red-color-5,
  red-color-20:  $red-color-20,
  red-color-30:  $red-color-30,
  red-color-100: $red-color-100,
  red-color-110: $red-color-110,
  red-color-130: $red-color-130,
  red-color-140: $red-color-140,
  pink-color-5:   $pink-color-5,
  pink-color-20:  $pink-color-20,
  pink-color-30:  $pink-color-30,
  pink-color-100: $pink-color-100,
  pink-color-110: $pink-color-110,
  pink-color-130: $pink-color-130,
  pink-color-140: $pink-color-140,
  purple-color-5:   $purple-color-5,
  purple-color-20:  $purple-color-20,
  purple-color-30:  $purple-color-30,
  purple-color-100: $purple-color-100,
  purple-color-110: $purple-color-110,
  purple-color-130: $purple-color-130,
  purple-color-140: $purple-color-140,
  blue-color-5:   $blue-color-5,
  blue-color-20:  $blue-color-20,
  blue-color-30:  $blue-color-30,
  blue-color-100: $blue-color-100,
  blue-color-110: $blue-color-110,
  blue-color-130: $blue-color-130,
  blue-color-140: $blue-color-140,
  turquoise-color-5:   $turquoise-color-5,
  turquoise-color-20:  $turquoise-color-20,
  turquoise-color-30:  $turquoise-color-30,
  turquoise-color-100: $turquoise-color-100,
  turquoise-color-110: $turquoise-color-110,
  turquoise-color-130: $turquoise-color-130,
  turquoise-color-140: $turquoise-color-140,
  green-color-5:   $green-color-5,
  green-color-20:  $green-color-20,
  green-color-30:  $green-color-30,
  green-color-100: $green-color-100,
  green-color-110: $green-color-110,
  green-color-130: $green-color-130,
  green-color-140: $green-color-140,
  lime-color-5:   $lime-color-5,
  lime-color-20:  $lime-color-20,
  lime-color-30:  $lime-color-30,
  lime-color-100: $lime-color-100,
  lime-color-110: $lime-color-110,
  lime-color-130: $lime-color-130,
  lime-color-140: $lime-color-140
) !default;
// -------- Typography variables --------
// We use this variables in every element that need a
// font-size, font-weight or line-height.

// We are using unplugin-font now
// $google-font: 'https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap';
// @import url($google-font);

// Typography base variables
// DON'T USE THEM IN COMPONENTS OR VIEWS.
// They are needed in resets.

$base-size: 16;
$font-size-base: 16px;

// Font-family variables

/* --------------How to use---------------- */
//     font-family: $font-family-base;
/* ---------------------------------------- */

$font-family-base: "Open Sans", sans-serif;
$font-family-secondary: "Roboto Slab", sans-serif;

// Font-size variables

/* --------------How to use---------------- */
//     font-size: $font-size-14;
/* ---------------------------------------- */

$font-size-9: rem(9);   // 0.563rem - Legals font-size
$font-size-10: rem(10); // 0.625rem - Caption font-size
$font-size-12: rem(12); // 0.75rem  - Body smaller font-size (body-3) and Icons size XS
$font-size-14: rem(14); // 0.875rem - Body default font-size (body-2)
$font-size-16: rem(16); // 1rem     - Body bigger font-size (body-1), H6 font-size and Icons size S
$font-size-18: rem(18); // 1.125rem - H5 font-size
$font-size-20: rem(20); // 1.25rem  - H4 font-size
$font-size-22: rem(22); // 1.375rem - H3 font-size
$font-size-24: rem(24); // 1.5rem   - Icons size M
$font-size-26: rem(26); // 1.625rem - H2 font-size
$font-size-28: rem(28); // 1.75rem  - H1 font-size
$font-size-32: rem(32); // 2rem     - Icons size L

// Font-weight variables

/* --------------How to use---------------- */
//     font-weight: $fw-bold;
/* ---------------------------------------- */

$fw-light: 300;         // light font-weight
$fw-regular: 400;       // regular font-weight
$fw-semibold: 600;      // semibold font-weight
$fw-bold: 700;          // bold font-weight

// Line-height variables

/* --------------How to use---------------- */
//     line-height: $line-height-normal;
/* ---------------------------------------- */

$line-height-small: 1;    // Smallest line-height
$line-height-normal: 1.2; // Base line-height
$line-height-big: 1.5;    // Biggest line-height

// Fonts mixins

/* --------------How to use---------------- */
//     @include
/* ---------------------------------------- */

// Variants
$roboto-variants: (
    light: 300,
    regular: 400,
    semibold: 600,
    bold: 700
);

$open-sans-variants: (
    light: 300,
    regular: 400,
    semibold: 600,
    bold: 700
);

@mixin roboto-slab($variant, $size: 'inherit') {
    @if map-has-key($roboto-variants, $variant) {
        $weight: map-get($roboto-variants, $variant);

        font-family: $roboto-slab-font;
        font-weight: $weight;
        font-style: normal;
        font-size: $size;
    } @else {
        @warn 'Invalid Roboto variant: #{$variant}.';
    }
}

@mixin open-sans($variant, $size: 'inherit') {
    @if map-has-key($open-sans-variants, $variant) {
        $weight: map-get($open-sans-variants, $variant);
    
        font-family: $open-sans-font;
        font-weight: $weight;
        font-style: normal;
        font-size: $size;
    } @else {
        @warn 'Invalid Open Sans variant: #{$variant}.';
    }
}
// -------- Spacing variables --------
// We use this variables in every element that need a MARGIN or PADDING.

// ********** IMPORTANT!! **********
// We only use this variables in paddings and margins,
// not in widths, heights or borders.
// We use REM function to define spacing sizes.
// In borders, widths and heights we use PX always.

/* --------------How to use---------------- */
//     margin-top: $space-4;
//     padding: $space-8;
/* ---------------------------------------- */

$space-1: rem($base-size * 0.25);  // 4px
$space-2: rem($base-size * 0.5);   // 8px
$space-3: rem($base-size * 0.75);  // 12px
$space-4: rem($base-size * 1);     // 16px
$space-5: rem($base-size * 1.25);  // 20px
$space-6: rem($base-size * 1.5);   // 24px
$space-7: rem($base-size * 1.75);  // 28px
$space-8: rem($base-size * 2);     // 32px
$space-9: rem($base-size * 2.25);  // 36px
$space-10: rem($base-size * 2.5);  // 40px
$space-12: rem($base-size * 3);    // 48px
$space-14: rem($base-size * 3.5);  // 56px
$space-15: rem($base-size * 3.75); // 60px
$space-16: rem($base-size * 4);    // 64px
$space-24: rem($base-size * 6);    // 96px
$space-34: rem($base-size * 8.5);  // 136px

$spaces: (
  0: 0,
  1: $space-1,
  2: $space-2,
  3: $space-3,
  4: $space-4,
  5: $space-5,
  6: $space-6,
  7: $space-7,
  8: $space-8,
  9: $space-9,
  10: $space-10,
  12: $space-12,
  14: $space-14,
  15: $space-15,
  16: $space-16,
  24: $space-24,
  34: $space-34
);
// -------- Shadows variables --------

// We use this variables in every element that need a box-shadow.

/* --------------How to use---------------- */
//     box-shadow: $box-shadow-1;
/* ---------------------------------------- */

$box-shadow-0: 0 0 0 0;
$box-shadow-1: 0 rem(2) rem(8) rgba($greyscale-color-90, 0.1);
$box-shadow-2: 0 rem(2) rem(8) rgba($greyscale-color-90, 0.2);
$box-shadow-3: 0 rem(2) rem(8) rgba($greyscale-color-90, 0.3);
$box-shadow-4: 0 rem(2) rem(8) rgba($greyscale-color-90, 0.4);
$box-shadow-5: 0 rem(2) rem(8) rgba($greyscale-color-90, 0.5);
$box-shadow-6: 0 rem(4) rem(12) rgba($greyscale-color-90, 0.6);
$box-shadow-7: 0 rem(4) rem(12) rgba($greyscale-color-90, 0.7);
$box-shadow-8: 0 rem(6) rem(16) rgba($greyscale-color-90, 0.75);

$box-shadow-1-bottom: 0 rem(8) rem(8) rgba($greyscale-color-90, 0.1);

$box-shadows: (
    box-shadow-0: $box-shadow-0,
    box-shadow-1: $box-shadow-1,
    box-shadow-2: $box-shadow-2,
    box-shadow-3: $box-shadow-3,
    box-shadow-4: $box-shadow-4,
    box-shadow-5: $box-shadow-5,
    box-shadow-6: $box-shadow-6,
    box-shadow-7: $box-shadow-7,
    box-shadow-8: $box-shadow-8
) !default;
// -------- Miscellaneous variables --------

$button-border-radius: rem(4);
$input-border-radius: rem(4);
$modal-border-radius: rem(8);
/**
Aux function for ::after and ::before
*/
@mixin pseudo($display: block, $pos: absolute, $content: '') {
    content: $content;
    display: $display;
    position: $pos;
}

/**
We use this for creating scalable elements (usually images / background images) that maintain a ratio. 

div {
    @include responsive-ratio(16,9);
}
*/
@mixin responsive-ratio($x, $y, $pseudo: false) {
    $padding: unquote( ( $y / $x ) * 100 + '%' );
    @if $pseudo {
        &:before {
            @include pseudo($pos: relative);
            width: 100%;
            padding-top: $padding;
        }
    } @else {
        padding-top: $padding;
    }
}

/**
This mixin takes all the hassle out of creating that triangle you'll see coming out of most traditional tooltips,
all without images, you just specify it's colour, how big you want it, the direction it's going to come out of
your element and you're done
**/
@mixin triangle ($size, $color, $direction) {
    height: 0;
    width: 0;

    $width: nth($size, 1);
    $height: nth($size, length($size));

    $foreground-color: nth($color, 1);
    $background-color: if(length($color) == 2, nth($color, 2), transparent);

    @if ($direction == up) or ($direction == down) or ($direction == right) or ($direction == left) {
        $width: math.div($width, 2);
        $height: if(length($size) > 1, $height, math.div($height, 2));

        @if $direction == up {
            border-bottom: $height solid $foreground-color;
            border-left: $width solid $background-color;
            border-right: $width solid $background-color;
        } @else if $direction == right {
            border-bottom: $width solid $background-color;
            border-left: $height solid $foreground-color;
            border-top: $width solid $background-color;
        } @else if $direction == down {
            border-left: $width solid $background-color;
            border-right: $width solid $background-color;
            border-top: $height solid $foreground-color;
        } @else if $direction == left {
            border-bottom: $width solid $background-color;
            border-right: $height solid $foreground-color;
            border-top: $width solid $background-color;
        }
    } @else if ($direction == up-right) or ($direction == up-left) {
        border-top: $height solid $foreground-color;
        @if $direction == up-right {
            border-left:  $width solid $background-color;
        } @else if $direction == up-left {
            border-right: $width solid $background-color;
        }
    } @else if ($direction == down-right) or ($direction == down-left) {
        border-bottom: $height solid $foreground-color;
        @if $direction == down-right {
            border-left:  $width solid $background-color;
        } @else if $direction == down-left {
            border-right: $width solid $background-color;
        }
    } @else if ($direction == inset-up) {
        border-color: $background-color $background-color $foreground-color;
        border-style: solid;
        border-width: $height $width;
    } @else if ($direction == inset-down) {
        border-color: $foreground-color $background-color $background-color;
        border-style: solid;
        border-width: $height $width;
    } @else if ($direction == inset-right) {
        border-color: $background-color $background-color $background-color $foreground-color;
        border-style: solid;
        border-width: $width $height;
    } @else if ($direction == inset-left) {
        border-color: $background-color $foreground-color $background-color $background-color;
        border-style: solid;
        border-width: $width $height;
    }
}

/**
Simple and effective for when you need to trigger hardware acceleration for some animation, keeping everything fast, slick and flicker-free.
*/
@mixin hardware-acceleration($backface: true, $perspective: 1000) {
    @if $backface {
        backface-visibility: hidden;
    }
    perspective: $perspective;
}

/**
This mixin lets you achieve a concept commonly known as fluid-type,
the concept is to linearly increase (or decrease) font-size between 2 breakpoints.

.example {
    @fluid(16px, 24px, 320px, 1200px)
}

That would scale font-size from a minimum of 16px (at a 320px viewport) to a maximum of 24px (at a 1200px viewport).
*/
@mixin fluid-typography ($min-font-size, $max-font-size, $min-vw, $max-vw) {
    font-size: $min-font-size;

    @media screen and (min-width: #{$min-vw}) {
        font-size: calc(#{$min-font-size} + #{stripUnit($max-font-size - $min-font-size)} * (100vw - #{$min-vw}) / #{stripUnit($max-vw - $min-vw)});
    }

    @media screen and (min-width: #{$max-vw}) {
        font-size: $max-font-size;
    }
}

/**
This mixin is the same as the previous but it lets you increase any property,
not just font-size.
*/
@mixin fluid-properties ($min-value, $max-value, $min-vw, $max-vw, $properties...) {
    @each $property in $properties {
        #{$property}: $min-value;
    }

    @media only screen and (min-width: #{$min-vw}) {
        @each $property in $properties {
            #{$property}: calc(#{$min-value} + #{stripUnit($max-value - $min-value)} * (100vw - #{$min-vw}) / #{stripUnit($max-vw - $min-vw)});
        }
    }

    @media only screen and (min-width: #{$max-vw}) {
        @each $property in $properties {
            #{$property}: $max-value;
        }
    }
}
// -------- Mixins --------





// -------- Breakpoint viewport sizes and media queries --------

// ********** IMPORTANT!! **********
// YOU DON´T NEED TO USE THESE FUNTIONS OR MIXINS.
// They are used and included in `grid_template` file.

// THE ONLY MIXIN YOU MUST USE IS @include media($media-size)
// documented below.


// Minimum breakpoint width. Null for the smallest (first) breakpoint.

//    >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 1024px, xl: 1440px))
//    576px
@function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
  @if map-has-key($grid-breakpoints, $name) {
    $min: map-get($breakpoints, $name);
    @return if($min != 0, $min, null);
  } @else {
    @error "Invalid breakpoint: #{$media-size}.";
  }
}


// Returns a blank string if smallest breakpoint, otherwise returns the name with a dash in front.
// Useful for making responsive utilities.

//    >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 1024px, xl: 1440px))
//    ""  (Returns a blank string)
//    >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 1024px, xl: 1440px))
//    "-sm"
@function breakpoint-infix($name, $breakpoints: $grid-breakpoints) {
  @return if(breakpoint-min($name, $breakpoints) == null, "", "-#{$name}");
}


// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
// Makes the @content apply to the given breakpoint and wider.
@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {
  $min: breakpoint-min($name, $breakpoints);
  @if $min {
    @media (min-width: $min) {
      @content;
    }
  } @else {
    @content;
  }
}

// ********** IMPORTANT!! **********
// THIS IS THE MIXIN YOU MUST USE

// Mixin for easy to use mediaqueries
/* --------------How to use---------------- */
//    You can use these media query:
//      @include media(xs)
//      @include media(sm)
//      @include media(md)
//      @include media(lg)
//      @include media(xl)

//    e.g:
//      @include media(md) {
//        property: value;
//     }
/* ---------------------------------------- */

@mixin media($media-size) {
  @if map-has-key($grid-breakpoints, $media-size) {
    $breakpoint-width: map-get($grid-breakpoints, $media-size);
    $breakpoint-index: index(map-keys($grid-breakpoints), $media-size);

    @if ($breakpoint-index == 1) { // First - SCSS indexes starts at 1
      $next-breakpoint-width: nth(map-values($grid-breakpoints), 2);
      @media (max-width: #{$next-breakpoint-width - 1}) { @content; }
    } @else {
      @media (min-width: $breakpoint-width) { @content; }
    }
  } @else {
    @error "Invalid breakpoint: #{$media-size}.";
  }
}

// -------- Grid template --------

// ********** IMPORTANT!! **********
// YOU DON´T NEED TO USE THESE MIXINS.
// They are used and included in `grid` file.


// Generate the correct number of grid classes given
// Any value of `$grid-columns`
@mixin make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) {
  // Common properties for all breakpoints
  %grid-column {
    position: relative;
    width: 100%;
    min-height: 1px; // Prevent columns from collapsing when empty
    padding-right: calc($grid-gutter-width-mobile / 2);
    padding-left: calc($grid-gutter-width-mobile / 2);
    @media (min-width: $width-lg) {
      padding-right: calc($gutter / 2);
      padding-left: calc($gutter / 2);
    }
  }

  @each $breakpoint in map-keys($breakpoints) {
    $infix: breakpoint-infix($breakpoint, $breakpoints);

    // Allow columns to stretch full width below their breakpoints
    @for $i from 1 through $columns {
      .col#{$infix}-#{$i} {
        @extend %grid-column;
      }
    }

    .col#{$infix},
    .col#{$infix}-auto {
      @extend %grid-column;
    }

    @include media-breakpoint-up($breakpoint, $breakpoints) {
      // Provide basic `.col-{bp}` classes for equal-width flexbox columns
      .col#{$infix} {
        flex-basis: 0;
        flex-grow: 1;
        max-width: 100%;
      }

      .col#{$infix}-auto {
        flex: 0 0 auto;
        width: auto;
        max-width: none; // Reset earlier grid tiers
      }

      @for $i from 1 through $columns {
        .col#{$infix}-#{$i} {
          @include make-col($i, $columns);
        }
      }

      .order#{$infix}-first { order: -1; }

      .order#{$infix}-last { order: $columns + 1; }

      @for $i from 0 through $columns {
        .order#{$infix}-#{$i} { order: $i; }
      }

      // `$columns - 1` because offsetting by the width of an entire row isn't possible
      @for $i from 0 through ($columns - 1) {
        @if not ($infix == "" and $i == 0) { // Avoid emitting useless .offset-0
          .offset#{$infix}-#{$i} {
            @include make-col-offset($i, $columns);
          }
        }
      }
    }
  }
}


// Make container
@mixin make-container() {
  width: 100%;
  padding-right: calc($grid-gutter-width-mobile / 2);
  padding-left: calc($grid-gutter-width-mobile / 2);
  @media (min-width: $width-lg) {
    padding-right: calc($grid-gutter-width / 2);
    padding-left: calc($grid-gutter-width / 2);
  }
  margin-right: auto;
  margin-left: auto;
}


// For each breakpoint, define the maximum width of the container in a media query
@mixin make-container-max-widths($max-widths: $container-max-widths, $breakpoints: $grid-breakpoints) {
  @each $breakpoint, $container-max-width in $max-widths {
    @include media-breakpoint-up($breakpoint, $breakpoints) {
      max-width: $container-max-width;
    }
  }
}


// Make row
@mixin make-row() {
  display: flex;
  flex-wrap: wrap;
  margin-right: calc($grid-gutter-width-mobile / -2);
  margin-left: calc($grid-gutter-width-mobile / -2);

  @media (min-width: $width-lg) {
    margin-right: calc($grid-gutter-width / -2);
    margin-left: calc($grid-gutter-width / -2);
  }
}


// Make col
// Add a `max-width` to ensure content within each column does not blow out
// the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
// do not appear to require this.
@mixin make-col($size, $columns: $grid-columns) {
  flex: 0 0 percentage(calc($size / $columns));
  max-width: percentage(calc($size / $columns));
}


// Make col offset
// Add offset to cols
@mixin make-col-offset($size, $columns: $grid-columns) {
  $num: calc($size / $columns);
  margin-left: if($num == 0, 0, percentage($num));
}
// -------- Icons --------

// ********** IMPORTANT!! **********
// YOU DON´T NEED TO USE THIS MIXIN IN ICONS,
// it's included in Icon.vue component.

/* --------------How to use---------------- */
//    @include vuersatile-icons;
/* ---------------------------------------- */

@mixin vuersatile-icons {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: $font-size-16;
  font-style: normal;
  font-weight: $fw-light;
  font-variant: normal;
  flex-shrink: 0;
  line-height: $line-height-normal;
  speak: never;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
// -------- Miscellaneous --------

// Text-overflow-ellipsis

/* --------------How to use---------------- */
//    @include text-overflow-ellipsis;
/* ---------------------------------------- */

@mixin text-overflow-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// Transitions

/* --------------How to use---------------- */
//    @include transition-height;
/* ---------------------------------------- */

@mixin transition-height {
  overflow: hidden;
  position: relative;
  transition: height .25s linear, opacity 0.25s ease;
  @include hardware-acceleration;
  will-change: height, opacity; // animation optimization // it doesn't work in CollapsableBox component with outer elements (like InputSelect)
}

// Overrides

/* --------------How to use---------------- */
//    @include button-reset-browser-tap-styles;
/* ---------------------------------------- */

@mixin button-reset-browser-tap-styles {
  -webkit-tap-highlight-color: transparent;
  outline: none;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
}

/* --------------How to use---------------- */
//    @include button-reset-styles;
/* ---------------------------------------- */

@mixin button-reset-styles {
  background-color: transparent;
  border: none;
  cursor: pointer;
}

/* --------------How to use---------------- */
//    @include disable-user-select;
/* ---------------------------------------- */

@mixin disable-user-select {
  -ms-user-select: none;
  -webkit-user-select: none;
  /* -kthml-user-select: none; // Konkeror */
  -moz-user-select: none;
  -webkit-touch-callout: none; // Safair iOS
  user-select: none;
}
// -------- Functions --------



// -------- Functions --------

// Aux function to remove the unit of a length

@function strip-unit($number) {
  @if type-of($number) == 'number' and not unitless($number) {
    @return $number / ($number * 0 + 1);
  }

  @return $number;
}

// Rem function (transform px in rems)
// We only use this function to define font-size or spacings (defined in variables file)
// For the moment, YOU DON´T NEED TO USE IT IN YOUR CODE.

/* --------------How to use---------------- */
//    font-size: rem(12);
/* ---------------------------------------- */

@function rem($size) {
  $remSize: calc(strip-unit($size) / $base-size);
  @return #{$remSize}rem;
}

/* --------------How to use---------------- */
//    text-shadow: longshadow($orange-color-100);
/* ---------------------------------------- */

@function longshadow($color) {
  $val: 0px 0px $color;
  @for $i from 1 through 200 {
      $val: #{$val}, #{$i}px #{$i}px #{$color};
  }
  @return $val;
}

// Spin-ac function (spin animation)

/* --------------How to use---------------- */
//    animation: spin-ac 2s linear infinite;
/* ---------------------------------------- */

@keyframes spin-ac {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(-360deg);
  }
}// -------- Support --------