@import "functions";

/* ==========================================================================
   Colors
   ========================================================================== */

$white:                                                     #fff !default;
$gray-100:                                                  #f8f9fa !default;
$gray-150:                                                  #d9d9d9 !default;
$gray-200:                                                  #e9ecef !default;
$gray-300:                                                  #dee2e6 !default;
$gray-400:                                                  #ced4da !default;
$gray-500:                                                  #adb5bd !default;
$gray-600:                                                  #6c757d !default;
$gray-700:                                                  #495057 !default;
$gray-800:                                                  #343a40 !default;
$gray-900:                                                  #212529 !default;
$black:                                                     #000 !default;
$blue:                                                      #007bff !default;
$indigo:                                                    #6610f2 !default;
$purple:                                                    #6f42c1 !default;
$pink:                                                      #e83e8c !default;
$red:                                                       #FF181D !default;
$orange:                                                    #fd7e14 !default;
$yellow:                                                    #ffc107 !default;
$green:                                                     #28a745 !default;
$teal:                                                      #20c997 !default;
$cyan:                                                      #17a2b8 !default;
$emerald:                                                   #55CE63;
$primary:                                                   #1699df !default;
$secondary:                                                 #0a1a5d !default;
$success:                                                   #f287b7 !default;
$info:                                                      $cyan !default;
$info-green:                                                #0abf72 !default;
$warning:                                                   $yellow !default;
$danger:                                                    $red !default;
$light:                                                     $gray-400 !default;
$light-extra:                                               $gray-300 !default;
$medium:                                                    $gray-600 !default;
$dark:                                                      #071241 !default;
$important:                                                 #FFFFC9 !default;
$amp:                                                       #0abf72;
$upgrade:                                                   #8988e2;
$fpp:                                                       $primary;
$order-note-box-color:                                      #FFFFC9;
$downy:                                                     #6DC7BE;
$cold-purple:                                               #8988e2;
$viking:                                                    #56BDDE;
$salmon:                                                    #FF9966;
$caribbean-green:                                           #06C6AE;
$rank-director-color:                                       #04946c;
$rank-diamond-color:                                        #24a4dc;
$rank-president-color:                                      #d4144c;
$rank-crown-color:                                          #5c64bc;

$grays: () !default;
$grays: map-merge((
        "100":                                              $gray-100,
        "150":                                              $gray-150,
        "200":                                              $gray-200,
        "300":                                              $gray-300,
        "400":                                              $gray-400,
        "500":                                              $gray-500,
        "600":                                              $gray-600,
        "700":                                              $gray-700,
        "800":                                              $gray-800,
        "900":                                              $gray-900
), $grays) !default;

$colors: () !default;
$colors: map-merge((
        "blue":                                             $blue,
        "indigo":                                           $indigo,
        "purple":                                           $purple,
        "pink":                                             $pink,
        "red":                                              $red,
        "orange":                                           $orange,
        "yellow":                                           $yellow,
        "green":                                            $green,
        "teal":                                             $teal,
        "cyan":                                             $cyan,
        "white":                                            $white,
        "gray":                                             $gray-600,
        "gray-dark":                                        $gray-800,
        "gray-light":                                       $gray-500,
        "gray-light-extra":                                 $gray-150,
        "amp":                                              $amp,
        "upgrade":                                          $upgrade,
        "fpp":                                              $fpp,
        "order-note-box-color":                             $order-note-box-color,
        "downy":                                            $downy,
        "cold-purple":                                      $cold-purple,
        "viking":                                           $viking,
        "salmon":                                           $salmon,
        "caribbean-green":                                  $caribbean-green,
        "rank-director":                                    $rank-director-color,
        "rank-diamond":                                     $rank-diamond-color,
        "rank-president":                                   $rank-president-color,
        "rank-crown":                                       $rank-crown-color,
), $colors);

$theme-colors: () !default;

$theme-colors: map-merge((
        "primary":                                          $primary,
        "secondary":                                        $secondary,
        "success":                                          $success,
        "info":                                             $info,
        "warning":                                          $warning,
        "info-green":                                       $info-green,
        "info-orange":                                      $orange,
        "danger":                                           $danger,
        "light":                                            $light,
        "light-extra":                                      $light-extra,
        "dark":                                             $dark,
        "medium":                                           $medium,
        "black":                                            $black,
        "chart-color-one":                                  rgba($primary, 1),
        "chart-color-two":                                  rgba($emerald, 1),
        "input-light":                                      $gray-400,
        "important":                                        $important,
        "gray-200":                                         $gray-200,
        "gray-100":                                         $gray-100,
        "amp":                                              $amp,
        "upgrade":                                          $upgrade,
        "fpp":                                              $fpp,
        "note":                                             $order-note-box-color,
        "downy":                                            $downy,
        "cold-purple":                                      $cold-purple,
        "viking":                                           $viking,
        "salmon":                                           $salmon,
        "white":                                            $white,
        "caribbean-green":                                  $caribbean-green,
        "rank-director":                                    $rank-director-color,
        "rank-diamond":                                     $rank-diamond-color,
        "rank-president":                                   $rank-president-color,
        "rank-crown":                                       $rank-crown-color,
        "green":                                            $green,
), $theme-colors);
$input-placeholder-color:                                   $gray-400;

$headings-color:                                            $primary !default;
$font-family-sans-serif:                                    -apple-system, BlinkMacSystemFont, "Nunito Sans", "Roboto", "RobotoLocal", Segoe UI, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default !default;
$font-family-buttons:                                       -apple-system, BlinkMacSystemFont, "Roboto", "RobotoLocal", Segoe UI, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default !default;
$font-weight-bold-semi:                                     500 !default;
$font-weight-bold:                                          600 !default;
$font-weight-bold-extra:                                    800 !default;
$line-height-base:                                          1.4 !default;

$grid-breakpoints: (
        xs:                                                 0px,
        xs0:                                                320px,
        xs1:                                                375px,
        xs2:                                                425px,
        sm:                                                 576px,
        md:                                                 768px,
        lg:                                                 992px,
        xl:                                                 1200px,
        xxl:                                                1440px,
        xl1:                                                1600px,
        xxxl:                                               2560px,
) !default;

$headings-font-weight:                                      600 !default;

$size-levels: (1, 2, 3, 4, 5, 6) !default;

$viewport-sizes: () !default;
$viewport-sizes: map-merge((
        25: 25vh,
        50: 50vh,
        75: 75vh,
        100: 100vh
), $viewport-sizes);

/* ==========================================================================
   Sizes
   ========================================================================== */

$font-size-base:                                            0.89rem !default; // Assumes the browser default, typically `16px`
$font-size-lg:                                              ($font-size-base * 1.25) !default;
$font-size-sm:                                              ($font-size-base * .875) !default;

$font-sizes: () !default;
$font-sizes: map-merge((
        0: $font-size-base,
        1: $font-size-base * 2.5,
        2: $font-size-base * 2 ,
        3: $font-size-base * 1.75 ,
        4: $font-size-base * 1.5,
        5: $font-size-base * 1.25,
        6: $font-size-base,
        7: $font-size-base * .87,
        8: $font-size-base * .81,
        9: $font-size-base * .75,
), $font-sizes);

/*===========================================================================
  Fixed Heights
 ==========================================================================*/
$fixedHeights: () !default;
$fixedHeights: map-merge((
        "notice-message":                                   60px
), $fixedHeights);

/* ==========================================================================
   Theming
   ========================================================================== */

//-- Body
$body-bg:                                                   #edf0f5 !default;
$eshop-bg:                                                   #f4f5f9;
$body-color:                                                $gray-900 !default;

$input-border-radius:                                       1px !default;
$default-content-h-color:                                   $gray-900 !default;
$default-content-mobile-h-margin-top:                       20px !default;

//-- Items Filter Panel
$panel-bg-color:                                            $white !default;
$panel-border-color:                                        $gray-200 !default;
$panel-item-padding:                                        3 !default; // boostrap spacing

/* ==========================================================================
   Theming - Elements
   ========================================================================== */

//-- Date Picker
$datepicker-icon-color:                                     $pink !default;

//-- Custom Checkbox
//$custom-checkbox:
$custom-select-size-0-indicator-color:                      $gray-500 !default;
$custom-select-size-0-bg-size:                              12px 18px !default;
$custom-select-size-0-indicator-padding:                    1.4rem;
$custom-select-size-0-indicator:                            str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18.1 9.8'%3e%3cpath fill='#{$custom-select-size-0-indicator-color}' d='M9.05,9.8a.75.75,0,0,1-.53-.22L.22,1.28A.75.75,0,1,1,1.28.22L9.05,8,16.82.22a.75.75,0,0,1,1.06,1.06l-8.3,8.3A.75.75,0,0,1,9.05,9.8Z'/%3e%3c/svg%3e"), '#', '%23') !default;
$custom-checkbox-checked-color:                             $primary !default;
$custom-control-inverserd-indicator-checked-color:          $primary !default;
$custom-checkbox-inverse-indicator-icon-checked:            url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='#{$custom-control-inverserd-indicator-checked-color}' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E") !default;
$custom-checkbox-inverse-checked-color:                     $white !default;

//-- Dropdown
$dropdown-bg-color:                                         $white !default;

//-- Text Badge
$text-badge-bg:                                             $blue !default;
$text-badge-size:                                           25px !default;
$text-badge-color:                                          $white !default;
$text-badge-font-size:                                      .7em !default;

//-- Info Title Box
$info-box-size:                                             140px !default;
$info-box-gutter-size:                                      10px !default;
$info-box-border-color:                                     $gray-400 !default;
$info-box-border-active-color:                              $primary !default;
$info-box-font-weight:                                      800 !default;
$info-box-icon-bottom-space:                                20px !default;
$info-box-icon-color:                                       $gray-500 !default;
$info-box-icon-size:                                        15px !default;
$info-box-icon-active-color:                                $success !default;
$info-title-box-tooltip-bg:                                 $white !default;
$info-title-box-tooltip-bullet-color:                       $primary !default;

//-- Shadow Round Icon
$shadow-round-icon-button-bg-color:                         $white !default;
$shadow-round-icon-button-color:                            $gray-700 !default;
$shadow-round-icon-button-active-bg-color:                  $primary !default;
$shadow-round-icon-button-active-color:                     $white !default;
$shadow-round-icon-button-spacing:                          5 !default; //Bootstrap Spacing

//-- Slider
$slider-line-height:                                        13px !default;
$slider-gray-6:                                             $primary !default; // selected handler area gradient start color
$slider-gray-5:                                             $primary !default; // selected handler area gradient end color
$slider-low-heigh-color:                                    $gray-300 !default; // unseleted handler area color
$slider-primary-top:                                        $white !default; // inside handler gradiant start color
$slider-primary-bottom:                                     $white !default; // inside handler gradiant end color
$slider-handle-border-color:                                $primary !default; // handler border color
$slider-handle-background-color:                            $primary !default; // handler background color

//-- Range Inputs
$range-input-button-bg-color:                               $primary !default;

//-- dashboard panel element
$dashboard-panel-element-box-shadow:                        2px 1px 11px -2px rgba(0, 0, 0, 0.3) !default;
$dashboard-panel-element-background:                        $white !default;
$dashboard-panel-element-border-radius:                     0px !default;
$dashboard-panel-element-spacing:                           2 !default; //bootstrap spacing

//-- Models
$eshop-model-btn-secondary-spacing:                         5 !default; //bootstrasp spacing
$eshop-model-btn-secondary-bg-color:                        $gray-400 !default;

//-- Dashbaoard Header
$dashboard-header-height:                                   50px !default;
$dashboard-header-bg-color:                                 $white !default;
$dashboard-header-toggler-bg-color:                         $gray-100 !default;
$dashbaord-header-toggler-icon-color:                       $success !default;
$dashbaord-header-toggler-icon-size:                        1em !default;
$dashboard-side-padding:                                    40px;

//-- Dashboard Sidebar
$sidebar-bg-color:                                          $dark !default;
$sidebar-collapse-size:                                     50px !default;
$sidebar-branding-background:                               $secondary !default;
$sidebar-branding-height:                                   $dashboard-header-height !default;
$sidebar-profile-spacing:                                   4 !default; // bootstrap spacing
$sidebar-profile-spacing-px:                                4px;
$sidebar-profile-height:                                    85px !default;
$sidebar-profile-size:                                      115px !default;
$sidebar-menu-item-padding:                                 12px !default;
$sidebar-menu-active-bg:                                    $black !default;
$sidebar-menu-color:                                        $white !default;
$sidebar-icon-menu-margin-left:                             12px !default;
$sidebar-icon-size:                                         18px !default;
$sidebar-mobile-open-content-width:                         $sidebar-collapse-size !default;
$sidebar-transition-speed:                                  .3s !default;

//-- Footer
$footer-text-size:                                          $font-size-base * 0.9 !default;
$footer-text-color:                                         $white !default;

//-- Landing Form
$enrolment-landing-form-dropdown-min-width:                 300px !default;

//-- Eshop Footer Menu
$bottom-menu-bg-color:                                      $secondary !default;
$bottom-menu-color:                                         $white !default;
$bottom-menu-height:                                        70px !default;
$bottom-menu-font-size:                                     $font-size-base * 0.9 !default;
$bottom-menu-spacing:                                       4 !default; // boostrap spacing

//-- eSac Selected Voucher
$esac-selected-voucher-border-color:                        #cacbcb;

$big-currency-large-price-color:                            $black;
$big-currency-price-min-width:                              70px;
$big-currency-large-price-min-width:                        $big-currency-price-min-width + 25;
$big-currency-large-font-weight:                            $font-weight-bold-extra;

$big-amount-large-color:                                    $black;
$big-amount-min-width:                                      0px;
$big-amount-large-min-width:                                $big-amount-min-width + 8;
$big-amount-large-font-weight:                              $font-weight-bold-extra;
/* ==========================================================================
   Theming - Screens
   ========================================================================== */

//--  EWallet
$ewallet-container-title-color:                             #020C35;
$ewallet-container-font-size:                               23px;
$ewallet-fundwithdrawal-padding:                            10px;
$ewallet-datetimepicker-margin-bottom:                      12px;
$ewallet-table-font-size:                                   $font-size-base * 0.9;
$ewallet-table-header-background:                           #020C35;
$ewallet-table-row-color:                                   #333333;
$tab-ewallet-title-color:                                   #020C35;
$ewallet-balance-label-color:                               #1898DF;
$ewallet-balance-label-font-size:                           12px;
$ewallet-balance-font-size:                                 $font-size-base * 1.3;
$ewallet-balance-bank-font-size:                            $font-size-base * 0.9;
$ewallet-fundwithdrawal-modal-font-size:                    $font-size-base * 0.8;
$ewallet-activation-fund-font-size:                         $font-size-base * 0.9;
$ewallet-activation-fund-title-font-size:                   $font-size-base * 1.5;
$ewallet-balance-content-color:                             #020C35;
$ewallet-withrdawal-gradient-start-color:                   #EC5E90;
$ewallet-withrdawal-gradient-end-color:                     #C71585; //#AA175B;
$ewallet-transfer-gradient-start-color:                     #B665C4;
$ewallet-transfer-gradient-end-color:                       #6F1E9E;
$ewallet-screen-lg-size-px:                                 50px;
$ewallet-screen-sm-size-px:                                 10px;
$ewallet-screen-default-size-px:                            30px;
$ewallet-container-margin-left:                             30px;
$ewallet-select-modal-body:                                 30px;
$ewallet-activation-fund-row-p-l:                           15px;
$ewallet-circle-step-p-l:                                   10px;
$ewallet-line-step-m-t:                                     28px;
$ewallet-footer-step-m-b:                                   30px;
$ewallet-horizontal-line-top:                               10px;
$ewallet-horizontal-line-m-l:                               10px;
$ewallet-box-shadow:                                        1px 1px 5px -1px rgba(0, 0, 0, 0.68);
$ewallet-balance-box-shadow:                                1px 2px 7px -1px rgba(0, 0, 0, 0.68);
$ewallet-home-box-shadow:                                   2px 1px 11px -1px rgba(0, 0, 0, 0.68);
$ewallet-active-tab-box-shadow:                             1px -1px 2px -1px rgba(0, 0, 0, 0.68);

//-- Login Screens
$login-screen-text-color:                                   #999999;
$login-screen-main-color:                                   #6DCFF6;
$login-screen-title-color:                                  #005BAA;
$login-screen-box-shadow:                                   0px 0.5px 0px 4px rgba(0, 91, 170, 0.5) !important;
$login-screen-default-size-px:                              50px;
$login-screen-default-small-size-px:                        30px;
$login-screen-sm-size-px:                                   30px;
$login-screen-xs-size:                                      30;
$login-screen-xs-size-px:                                   30px;

//-- My Account
$my-account-default-size-px:                              50px;
$my-account-default-small-size-px:                        30px;

//--  Order
$order-container-title-color:                           #020C35;
$order-container-font-size:                             23px;
$order-shippingmethod-group-padding:                    5px;
$order-datetimepicker-margin-bottom:                    12px;
$order-table-font-size:                                 $font-size-base * 0.9;
$order-review-title-font-size:                          $font-size-base * 0.9;
$order-table-header-background:                         #020C35;
$order-table-row-color:                                 #333333;
$tab-order-title-color:                                 #020C35;
$order-balance-label-color:                             #1898DF;
$order-balance-label-font-size:                         12px;
$order-balance-font-size:                               $font-size-base * 1.3;
$order-review-font-size:                                $font-size-base * 0.9;
$order-shipping-modal-font-size:                        $font-size-base * 1.1;
$order-activation-fund-font-size:                       $font-size-base * 0.9;
$order-activation-fund-title-font-size:                 $font-size-base * 1.5;
$order-small-font-size:                                 $font-size-base * 0.8;
$order-placeholder-font-size:                           $font-size-base;
$order-balance-content-color:                           #020C35;
$order-withrdawal-gradient-start-color:                 #EC5E90;
$order-withrdawal-gradient-end-color:                   #C71585; //#AA175B;
$order-transfer-gradient-start-color:                   #B665C4;
$order-transfer-gradient-end-color:                     #6F1E9E;
$order-note-box-color:                                  #FFFFC9;
$order-container-margin-all:                            20px;
$order-select-modal-body:                               30px;
$order-review-row-p-l:                                  15px;
$order-circle-step-p-l:                                 47px;
$order-line-step-m-t:                                   40px;
$order-line-separator:                                  10px;
$order-line-separator-p-l:                              2px;
$order-footer-step-m-b:                                 30px;
$order-footer-btn-height:                               27px;
$order-horizontal-line-top:                             10px;
$order-horizontal-line-m-l:                             10px;
$order-box-shadow:                                      1px 1px 5px -1px rgba(0, 0, 0, 0.68);
$order-balance-box-shadow:                              1px 2px 7px -1px rgba(0, 0, 0, 0.68);
$order-home-box-shadow:                                 2px 1px 11px -1px rgba(0, 0, 0, 0.68);
$order-active-tab-box-shadow:                           1px -1px 2px -1px rgba(0, 0, 0, 0.68);
$order-item-image-size:                                 50px;
$order-summary-rectangle-size:                          50px;
$order-review-icon-size:                                50px;
$order-summary-icon-size:                               30px;
$order-summary-icon-line-height:                        45px;
$order-circle-title-color:                              $gray-500;
$order-table-header-color:                              $gray-600;
$order-item-bg-color:                                   $white;
$order-item-color:                                      $gray-700;
$order-item-active-bg-color:                            $success;
$order-item-active-color:                               $white;
$order-item-spacing:                                    5; //Bootstrap Spacing

//--  EnrolmentHeader
$enrol-bg-color:                                        $secondary !default;
$enrol-spacing:                                         10px !default;
$enrol-back-color:                                      $black !default;
$enrol-back-text-color:                                 $white !default;

$print-page-size:                                       auto !default;

//-- Mobile Page
$mobile-page-default-padding:                               20px;
$mobile-page-footer-height:                                 60px;
