// COLORS
// ---------------------------------------------------------------------------
$white:    #fff;
$gray-100: #f8f9fa;
$gray-200: #e9ecef;
$gray-300: #dee2e6;
$gray-400: #ced4da;
$gray-500: #adb5bd;
$gray-600: #6c757d;
$gray-700: #495057;
$gray-800: #343a40;
$gray-900: #212529;
$black:    #000;

$primary:                     #2F4EFF;
$secondary:                   #FF2D54;
$success:                     #B5DB1D;
$info:                        #00DDC7;
$warning:                     #FF9C2C;
$danger:                      #FF293E;
$light:                       #F9F9F9;
$dark:                        #1A1850;

// COMPONENTS
// ---------------------------------------------------------------------------
$border-radius:               0;
// ---------------------------------------------------------------------------

// TYPO
// ---------------------------------------------------------------------------
$body-color:                  $black;

$link-color:                  $primary;
$link-decoration:             underline;
$link-hover-color:            $primary;
$link-hover-decoration:       none;

$font-family-sans-serif:      'Montserrat';

$font-weight-light:           300;
$font-weight-normal:          400;
$font-weight-bold:            700;

$font-size-base:              1.3rem;
$lead-font-size:              1.8rem;
$lead-font-weight:            $font-weight-normal;
$small-font-size:             1.2rem;

$line-height-base:            1.6;

$h1-font-size:                3.4rem;
$h2-font-size:                3.2rem;
$h3-font-size:                2rem;
$h4-font-size:                2rem;
$h5-font-size:                2rem;
$h6-font-size:                1.6rem;

$headings-color:              $black;
$headings-font-family:        $font-family-sans-serif;
$headings-font-weight:        $font-weight-normal;

$display1-size:               5rem;
$display2-size:               4.2rem;
$display3-size:               3.6rem;
$display4-size:               2.8rem;
// ---------------------------------------------------------------------------

// TABLES
// ---------------------------------------------------------------------------
$table-cell-padding:          1rem;

$table-color:                 $body-color;
$table-bg:                    transparent;

$table-border-width:          1px;
$table-border-color:          $gray-300;

$table-dark-bg:               transparent;
$table-dark-border-color:     $gray-800;
// ---------------------------------------------------------------------------

// BUTTONS
// ---------------------------------------------------------------------------
$btn-padding-y:               1.2rem;
$btn-padding-x:               3rem;
$btn-font-size:               1.4rem;
$btn-box-shadow:              none;
$btn-border-width:            0.2rem;
$btn-border-radius:           2.5rem;

$btn-padding-y-sm:            0.65rem;
$btn-padding-x-sm:            2rem;
$btn-font-size-sm:            1.2rem;
$btn-border-radius-sm:        $btn-border-radius;

$btn-padding-y-lg:            1.6rem;
$btn-padding-x-lg:            3rem;
$btn-font-size-lg:            1.6rem;
$btn-border-radius-lg:        3rem;

$btn-disabled-opacity:        0.6;
// ---------------------------------------------------------------------------

// FORM
// ---------------------------------------------------------------------------
$label-margin-bottom:                           0;

$input-bg:                                      $white;
$input-color:                                   $dark;
$input-padding-x:                               1.5rem;
$input-font-size:                               1.3rem;
$input-height:                                  5rem;   // 50px
$input-border-color:                            $gray-400;
$input-border-width:                            0.1rem;
$input-border-radius:                           0;
$input-box-shadow:                              none;
$input-disabled-bg:                             $gray-200;

$input-focus-width:                             $input-border-width;
$input-focus-border-color:                      $dark;
$input-focus-box-shadow:                        0px 3px 6px rgba($primary, 0.3);

$input-placeholder-color:                       $gray-500;

$input-height-inner:                            4rem;

$custom-select-padding-x:                       $input-padding-x;
$custom-select-focus-box-shadow:                $input-focus-box-shadow;
$custom-select-border-radius:                   $input-border-radius;
$custom-select-box-shadow:                      $input-box-shadow;
$custom-select-disabled-bg:                     $input-disabled-bg;

$custom-control-indicator-size:                 2.4rem;
$custom-control-indicator-border-width:         0.1rem;
$custom-control-indicator-border-color:         $input-border-color;

$custom-control-indicator-checked-color:        $primary;
$custom-control-indicator-checked-bg:           $input-bg;
$custom-control-indicator-checked-border-color: $gray-600;

$custom-control-indicator-focus-box-shadow:     none;

$custom-checkbox-indicator-border-radius:       0;
$custom-checkbox-indicator-icon-checked:        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15.364' height='11.908' viewBox='0 0 15.364 11.908'%3E%3Cpath fill='#{$custom-control-indicator-checked-color}' d='M7.222,11.074,0,4.3,6.5,6.85,15.364-.834Z' transform='translate(0 0.834)'/%3E%3C/svg%3E");
$custom-radio-indicator-icon-checked:           none;

$custom-switch-width:                           4.6rem;
$custom-switch-indicator-size:                  1.6rem;
$custom-switch-indicator-border-radius:         3rem;

$form-feedback-margin-top:                      0;
$form-feedback-valid-color:                     $input-border-color;
$form-feedback-icon-valid-color:                $success;
$form-feedback-icon-invalid-color:              $danger;
$form-feedback-icon-valid:                      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='#{$form-feedback-icon-valid-color}' d='M6.345,11.034,0,4.69,1.287,3.4,6.345,8.368,14.713,0,16,1.287Z' transform='translate(0 2)'/%3E%3C/svg%3E%0A");
$form-feedback-icon-invalid:                    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='15.557' height='15.556' viewBox='0 0 15.557 15.556'%3E%3Cpath fill='#{$form-feedback-icon-invalid-color}' d='M7.778,9.192,1.414,15.557,0,14.142,6.364,7.778,0,1.414,1.414,0,7.778,6.364,14.142,0l1.415,1.414L9.192,7.778l6.364,6.364-1.415,1.415Z'/%3E%3C/svg%3E%0A");
// ---------------------------------------------------------------------------

// PAGINATION
// ---------------------------------------------------------------------------
$pagination-padding-x:                          1.2rem;

$pagination-color:                              $gray-600;
$pagination-bg:                                 $white;
$pagination-border-width:                       0.1rem;
$pagination-border-color:                       $gray-200;

$pagination-hover-color:                        $primary;
$pagination-hover-bg:                           $gray-200;
$pagination-hover-border-color:                 $gray-300;

$pagination-active-color:                       $primary;
$pagination-active-bg:                          $pagination-bg;
$pagination-active-border-color:                $pagination-border-color;

$pagination-disabled-color:                     $gray-500;
$pagination-disabled-bg:                        $gray-300;
$pagination-disabled-border-color:              $gray-300;
// ---------------------------------------------------------------------------

// TOOLTIP
// ---------------------------------------------------------------------------
$tooltip-font-size:                             1.3rem;
$tooltip-max-width:                             255px;
$tooltip-color:                                 $black;
$tooltip-bg:                                    $light;
$tooltip-border-radius:                         0;
$tooltip-opacity:                               1;
$tooltip-padding-y:                             2rem;
$tooltip-padding-x:                             1.5rem;

$tooltip-arrow-width:                           2.5rem;
$tooltip-arrow-height:                          1.1rem;
// ---------------------------------------------------------------------------

// BADGE
// ---------------------------------------------------------------------------
$badge-font-size:                               1.2rem;
$badge-font-weight:                             600;
$badge-padding-y:                               .5em;
$badge-padding-x:                               .8em;
// ---------------------------------------------------------------------------

// ALERT
// ---------------------------------------------------------------------------
$alert-padding-y:                               1.3rem;
$alert-padding-x:                               5rem;
$alert-border-radius:                           0;
$alert-border-width:                            2px;
// ---------------------------------------------------------------------------

// PROGRESS BAR
// ---------------------------------------------------------------------------
$progress-height:                               1.4rem;
$progress-font-size:                            1.2rem;
$progress-bg:                                   $gray-300;
$progress-border-radius:                        0.2rem;
$progress-bar-color:                            $white;
$progress-bar-bg:                               $primary;
// ---------------------------------------------------------------------------

// BREADCRUMBS
// ---------------------------------------------------------------------------
$breadcrumb-padding-y:                          1.35rem;
$breadcrumb-padding-x:                          1.6rem;
$breadcrumb-bg:                                 $white;
$breadcrumb-divider-color:                      $gray-500;
$breadcrumb-active-color:                       $dark;
// ---------------------------------------------------------------------------
