/**
 * vars
 */

// generate class: [false], [true] non responsive only, [sm, md, lg] responsive @breakpoints

@generate-util: sm, md, lg;
@generate-flex: true;
@generate-margin: true;
@generate-padding: true;

// colors
// USAGE: background: @white;

@white: #fff;
@black: #000;

@shade-100: #f0f5ff;
@shade-200: #d0e6fe;
@shade-700: #001439;

@accent: #0078ff;
@accent-dark: darken(@accent, 5%);

@text: #001743;
@text-light: fade(@text, 65%);
@text-inverse: @white;
@text-inverse-light: fade(@text-inverse, 65%);

@success: #179922;
@error: #bc1d1f;

// shadow
// USAGE: box-shadow: @shadow-light;

@shadow-none: 0 .5rem .5rem transparent, 0 1rem 1rem transparent;
@shadow-light: 0 .5rem .5rem fade(@shade-700, 5%), 0 1rem 1rem fade(@shade-700, 5%);
@shadow-dark: 0 .5rem .5rem fade(@shade-700, 20%), 0 1rem 1rem fade(@shade-700, 20%);
@shadow-accent: 0 .5rem .5rem fade(@accent-dark, 20%), 0 1rem 1rem fade(@accent-dark, 20%);

// gradient
// USAGE: background: linear-gradient(135deg, @grad-light);

@grad-light: @shade-100 33%, darken(@shade-100, 2%) 100%;
@grad-dark: @shade-700 33%, darken(@shade-700, 2%) 100%;
@grad-accent: @accent 33%, @accent-dark 100%;

// spacing
// USAGE: .margin(x, small); .margin(y, small); .margin(all, small); .margin-remove(all, small);
// USAGE: .padding(x, small); .padding(y, small); .padding(all, small);

@margins: auto auto, none 0, micro .25rem, mini .5rem, tiny 1rem, small 1.5rem, medium 2rem, large 3rem, big 4rem, giant 6rem, huge 8rem;
@paddings: auto auto, none 0, micro .25rem, mini .5rem, tiny 1rem, small 1.5rem, medium 2rem, large 3rem, big 4rem, giant 6rem, huge 8rem;

// order
// USAGE: .order(1); // eval to -2

@orders: -3, -2, -1, 0, 1, 2, 3;

// z-index
// USAGE: z-index: @index-base;

@index-base: 0;
@index-active: 2;
@index-top: 40;
@index-btn-close: 50;
@index-top: 501;
@index-indicator: 510;
@index-backdrop: 530;
@index-drop: 600;
@index-sticky: 800; // @index-sticky by javascript 800 and decreses with sequential sticky
@index-overlay: 900;
@index-top: 1000;

// breakpoints

@breakpoints: xxs, xs, sm, md, lg, xl; // if you change this change also variables names below
@breakpoint-xxs: 370px;
@breakpoint-xs: 576px;
@breakpoint-sm: 768px;
@breakpoint-md: 992px;
@breakpoint-lg: 1200px;
@breakpoint-xl: 1600px;

// @media queries
// USAGE: @media @min-sm and @max-md {}

@min-xxs: ~'(min-width:'(@breakpoint-xxs)~')';
@max-xxs: ~'(max-width:'(@breakpoint-xxs - 1)~')';
@min-xs: ~'(min-width:'(@breakpoint-xs)~')';
@max-xs: ~'(max-width:'(@breakpoint-xs - 1)~')';
@min-sm: ~'(min-width:'(@breakpoint-sm)~')';
@max-sm: ~'(max-width:'(@breakpoint-sm - 1)~')';
@min-md: ~'(min-width:'(@breakpoint-md)~')';
@max-md: ~'(max-width:'(@breakpoint-md - 1)~')';
@min-lg: ~'(min-width:'(@breakpoint-lg)~')';
@max-lg: ~'(max-width:'(@breakpoint-lg - 1)~')';
@min-xl: ~'(min-width:'(@breakpoint-xl)~')';
@max-xl: ~'(max-width:'(@breakpoint-xl - 1)~')';