@charset "UTF-8";


// ========================================================== //
//                          Screens                           //
// ========================================================== //
$min-width:                             320px !default;

$xsmall-screen:                         0 !default;
$small-screen:                          480px !default;
$medium-screen:                         640px !default;
$large-screen:                          1024px !default;
$xlarge-screen:                         1366px !default;
$xxlarge-screen:                        1920px !default;
$maxwidth-container:                    1200px !default;

$tab-screen: (
    "xs":                               $xsmall-screen,
    "sm":                               $small-screen,
    "md":                               $medium-screen,
    "lg":                               $large-screen,
    "xl":                               $xlarge-screen,
    "xxl":                              $xxlarge-screen,
);

$tab-screen-container : (
    "sm":                               $small-screen,
    "md":                               $medium-screen,
    "lg":                               $large-screen
);

$tab-container-size: (
    "sm":                               95%,
    "md":                               80%,
    "lg":                               75%,
);

$tab-display: (
    "none":                             none,
    "inline":                           inline,
    "block":                            block,
    "flex":                             flex,
    "grid":                             grid,
    "iblock":                           inline-block,
    "iflex":                            inline-flex,
);




// ========================================================== //
//                           Grids                            //
// ========================================================== //
$columns:                               12 !default;
$gutter:                                .75rem !default;

$tab-flex-value-label: (
    "stretch":                          stretch, 
    "baseline":                         baseline, 
    "center":                           center, 
    "start":                            flex-start, 
    "end":                              flex-end, 
    "around":                           space-around, 
    "between":                          space-between
);

$tab-flex-wrap: (
    "wrap":                             wrap,
    "nowrap":                           nowrap,
    "wrapReverse":                      wrap-reverse
);




// ========================================================== //
//                           Texts                            //
// ========================================================== //
$font-size-normal:                      16px !default;
$font-family-normal:                    BlinkMacSystemFont, -apple-system, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Helvetica, Arial, sans-serif !default;

$font-weight-lighter:                   lighter !default;
$font-weight-light:                     300 !default;
$font-weight-normal:                    400 !default;
$font-weight-title:                     500 !default;
$font-weight-semibold:                  600 !default;
$font-weight-bold:                      700 !default;
$font-weight-bolder:                    bolder !default;

$margin-bottom-title:                   .38rem !default;

$line-height-normal:                    1.5 !default;
$line-height-title:                     1.25 !default;

$base-font-size:                        $font-size-normal !default;
$base-font-family:                      $font-family-normal !default;
$base-font-weight:                      $font-weight-normal !default;
$base-line-height:                      $line-height-normal !default;

$h1-font-size:                          2.75rem !default;
$h2-font-size:                          2.3rem !default;
$h3-font-size:                          1.9rem !default;
$h4-font-size:                          1.6rem !default;
$h5-font-size:                          1.4rem !default;
$h6-font-size:                          1.2rem !default;

$heading1-font-size:                    80px !default;
$heading2-font-size:                    70px !default;
$heading3-font-size:                    60px !default;
$heading4-font-size:                    50px !default;
$heading5-font-size:                    40px !default;
$heading6-font-size:                    30px !default;

$tab-title: (
    "h1":                               $h1-font-size,
    "h2":                               $h2-font-size,
    "h3":                               $h3-font-size,
    "h4":                               $h4-font-size,
    "h5":                               $h5-font-size,
    "h6":                               $h6-font-size,
);

$tab-heading: (
    "heading-1":                        ($h1-font-size, $heading1-font-size),
    "heading-2":                        ($h2-font-size, $heading2-font-size),
    "heading-3":                        ($h3-font-size, $heading3-font-size),
    "heading-4":                        ($h4-font-size, $heading4-font-size),
    "heading-5":                        ($h5-font-size, $heading5-font-size),
    "heading-6":                        ($h6-font-size, $heading6-font-size),
);

$tab-text-align: (
    "left":                             left,
    "center":                           center,
    "right":                            right,
    "justify":                          justify
);

$tab-text-transform: (
    "capital":                          capitalize,
    "lower":                            lowercase,
    "upper":                            uppercase
);

$tab-font-weight: (
    "lighter":                          $font-weight-lighter,
    "light":                            $font-weight-light,
    "semibold":                         $font-weight-semibold,
    "bold":                             $font-weight-bold,
    "bolder":                           $font-weight-bolder
);




// ========================================================== //
//                          Colors                            //
// ========================================================== //

// Neutral Colors
$white-color:                           #ffffff !default;
$black-color:                           hsl(0, 0%, 0%) !default;
$overlay-color:                         hsla(0, 0%, 0%, 0.5) !default;
$transparent-color:                     transparent !default;

// Gray Colors
$gray-50-color:                         hsl(210, 20%, 98%) !default;
$gray-100-color:                        hsl(210, 38%, 95%) !default;
$gray-200-color:                        hsl(214, 30%, 91%) !default;
$gray-300-color:                        hsl(211, 25%, 84%) !default;
$gray-400-color:                        hsl(214, 20%, 69%) !default;
$gray-500-color:                        hsl(216, 15%, 52%) !default;
$gray-600-color:                        hsl(218, 17%, 35%) !default;
$gray-700-color:                        hsl(218, 23%, 23%) !default;
$gray-800-color:                        hsl(220, 26%, 14%) !default;
$gray-900-color:                        hsl(230, 21%, 11%) !default;


// Basics Colors
$primary-color:                         hsl(209, 100%, 16%) !default;
$secondary-color:                       hsl(18, 38%, 34%) !default;
$info-color:                            hsl(211, 77%, 50%) !default;
$success-color:                         hsl(134, 77%, 38%) !default;
$warning-color:                         hsl(42, 100%, 46%) !default;
$danger-color:                          hsl(348, 83%, 47%) !default;




// ========================================================== //
//                  Spacings and positions                    //
// ========================================================== //
$spacer:                                1rem !default;
$fixing-label:                          "f" !default;
$position-label:                        "pos" !default;

$tab-spacers: (
    0:                                  0,
    1:                                  $spacer / 4,
    2:                                  $spacer / 2,
    3:                                  $spacer,
    4:                                  $spacer * 1.5,
    5:                                  $spacer * 3,
);

$tab-spacing-name: (
    "m":                                margin,
    "p":                                padding,
);

$tab-position-name: (
    "abs":                              absolute,
    "rel":                              relative,
    "fix":                              fixed,
    "sty":                              sticky,
    "sta":                              static,
);

$tab-direction-name: (
    "t":                                top,
    "l":                                left,
    "b":                                bottom,
    "r":                                right
);




// ========================================================== //
//                         Spacings                           //
// ========================================================== //
$tab-sizing-px:                         (16, 24, 32, 48, 64, 96, 128);
$tab-sizing-per:                        (25, 50, 75, 100, auto);




// ========================================================== //
//                          Globals                           //
// ========================================================== //
$base-border-radius:                    5px !default;
$base-border-radius-round:              40px !default;
$base-transition:                       all .2s ease-in-out !default;
$period-animation:                      .3s;
$base-shadow-default:                   0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
$gutter-card-fill:                      calc(-100% + 5px);
$responsive-factor:                     calc(.01 * 10vmin);




// ========================================================== //
//                          Z-index                           //
// ========================================================== //
$z-index-dropdown:                      1000 !default;
$z-index-sticky:                        1020 !default;
$z-index-fixed:                         1030 !default;
$z-index-modal-backdrop:                1040 !default;
$z-index-modal:                         1050 !default;
$z-index-popover:                       1060 !default;
$z-index-tooltip:                       1070 !default;
$z-index-sidebar:                       2000 !default;




// ========================================================== //
//                           Shadow                           //
// ========================================================== //
$shadow-0:                              none;
$shadow-1:                              rgba(17, 17, 26, 0.05) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px;
$shadow-2:                              rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px;
$shadow-3:                              rgba(17, 17, 26, 0.1) 0px 1px 0px, rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 48px;
$shadow-4:                              rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 56px;
$shadow-5:                              rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 56px, rgba(17, 17, 26, 0.1) 0px 24px 80px;

$tab-shadow: (
    0:                                  $shadow-0,
    1:                                  $shadow-1,
    2:                                  $shadow-2,
    3:                                  $shadow-3,
    4:                                  $shadow-4,
    5:                                  $shadow-5,
);