//  ================================================================================================
//  File Name: variables.scss
//  Description: Custom component variable
//  ----------------------------------------------------------------------------------------------
//  Item Name: CXWebAdmin - Cloudxin Web Admin  Template
//  Author: Cloudxin
//  URL: http://www.cloudxin.cn
//  ================================================================================================

//  ================================================================================================
//  WARNING: PLEASE DO NOT CHANGE THIS VARIABLE FILE.
//  THIS FILE WILL GET OVERWRITTEN WITH EACH VUEXY HTML TEMPLATE RELEASE.
//  TIP:
//  We suggest you to use this (assets/scss/variables/_variables-components.scss) file for overriding components variables.
//  ================================================================================================

$base-font-size: 14px !default;
$body-direction: ltr !default; // Default ltr, change it to rtl for Right To Left support.
$content-padding: 2rem !default;

//  ------------------------------
//    Colors
//  ------------------------------
$nav-component-border-color: #ddd !default;

$swiper-bg: #f2f4f4 !default;

//  ------------------------------
//    Navbar
//  ------------------------------
$navbar-height: 6.45rem !default;
$horizontal-menu-height: 4.45rem !default;
$footer-height: 3.35rem !default;
$breadcrumb-height: 5.45rem !default;

//  ------------------------------
//    Main Menu
//  ------------------------------

//main menu dark
$menu-dark-color: #dcdcdc !default;
$menu-dark-bg-color: #10163a !default;

$menu-padding: 10px 15px 10px 15px !default;
$menu-second-level-padding: 10px 15px 10px 20px !default;
$menu-third-level-padding: 10px 15px 10px 53px !default;
$menu-forth-level-padding: 10px 15px 10px 53px !default;

// vertical menu
$menu-expanded-width: 320px !default;
$menu-collapsed-width: 80px !default;

//  ------------------------------
//    Sidebar
//  -------------------------------
$sidebar-width: 320px !default;
$chat-sidebar-width: 360px !default;

//  -------------------------------
//    Avatar
//  -------------------------------

$avatar-size: 32px !default;
$avatar-status-size: 11px !default;
$avatar-status-size-lg: 17px !default;

$avatar-size-xl: 70px !default;
$avatar-size-lg: 50px !default;
$avatar-size-sm: 24px !default;

$avatar-bg: #c3c3c3;
$avatar-group-border: $white;

//  -------------------------------
//  Progress
//  -------------------------------
$progress-size-xl: 1.14rem !default;
$progress-size-lg: 0.857rem !default;
$progress-size-md: 0.57rem !default;
$progress-size-sm: 0.143rem !default;

//  -------------------------------
//  Form
//  -------------------------------

// $input-height, $input-height-lg, $input-height-sm are in variables
$font-size-xs: 0.75rem !default;
$font-size-xl: ($font-size-base + 0.5) !default;
$line-height-xl: 1.7 !default;
$line-height-xs: 1.5 !default;
$line-height-xxl: 2.25 !default;
$input-padding-y-xl: 0.5rem !default;
$input-padding-x-xl: 0.5rem !default;

$input-padding-y-xs: 0.2rem !default;
$input-padding-x-xs: 0.275rem !default;

$border-radius-xl: 0.35rem !default;
$border-radius-xs: 0.12rem !default;
$input-border-radius-xl: $border-radius-xl !default;
$input-border-radius-xs: $border-radius-xs !default;

$input-height-xl: (($font-size-xl * $line-height-xl) + ($input-padding-y-xl * 2)) !default;
$input-height-xs: (($font-size-xs * $line-height-xs) + ($input-padding-y-xs * 2)) !default;
$input-height-sm: (($font-size-sm * $line-height-sm) + ($input-padding-y-sm * 2)) !default;

//  -------------------------------
//  Blank Page Bg Color
//  -------------------------------

$blank-bg-color: #eff2f7 !default;

//  -------------------------------
//  Data Tables Bg Color
//  -------------------------------

$datatable-bg-color: #f8f8f8 !default;

//  -------------------------------
//  Switch
//  -------------------------------
$switch-bg-color: #e2e2e2 !default;
$switch-indicator-color: $white !default;

//  -------------------------------
//  Timeline
//  -------------------------------
$timeline-border-color: $border-color !default;

$timeline-point-size: 1.75rem !default;
$timeline-point-indicator-size: 12px !default;
$timeline-point-indicator-color: $primary !default;
$timeline-point-indicator-wrapper-size: 20px !default;

$timeline-item-min-height: 4rem !default;
$timeline-item-icon-font-size: 0.85rem !default;

$timeline-event-time-size: 0.85rem !default;
$timeline-event-time-color: $text-muted !default;
// SVG Icon Sizes
$svg-icon-sizes: (
  sm: 1.25rem,
  md: 1.5rem,
  lg: 1.75rem,
  xl: 2rem,
  xxl: 2.25rem,

  1x: 1rem,
  2x: 2rem,
  3x: 3rem,
  4x: 4rem,
  5x: 5rem,
  6x: 6rem,
  7x: 7rem,
  8x: 8rem,
  9x: 9rem,
  10x: 10rem,

  full: 100%
);
// Bullet
$bullet-config: (
  border-radius: 6px,
  dot-size: 4px,
  line-height: 1px,
  line-width: 5px,
  bar-height: 4px,
  bar-width: 8px,
) !default;
// Opacity
$opacity-values: (
  0: 0,
  5: .05,
  10: .1,
  15: .15,
  20: .20,
  25: .25,
  50: .5,
  75: .75,
  100: 1,
) !default;

// Zindex
$zindex-values: (
  n1: -1,
  n2: -2,
  0: 0,
  1: 1,
  2: 2,
  3: 3
) !default;

// Letter spacing
$letter-spacing-values: (
  1: 0.1rem,
  2: 0.115rem,
  3: 0.125rem,
  4: 0.25rem,
  5: 0.5rem
) !default;

// Heading sizes
$h1-font-size:                                      $font-size-base * 1.75 !default;   // 22.75px
$h2-font-size:                                      $font-size-base * 1.5 !default;    // 19.50px
$h3-font-size:                                      $font-size-base * 1.35 !default;   // 17.55px
$h4-font-size:                                      $font-size-base * 1.25 !default;   // 16.25px
$h5-font-size:                                      $font-size-base * 1.15 !default;   // 14.95px
$h6-font-size:                                      $font-size-base * 1.075 !default;  // 13.97px

// Font Sizes
$font-sizes: (
  1: $h1-font-size,   // 22.75px
  2: $h2-font-size,   // 19.50px
  3: $h3-font-size,   // 17.55px
  4: $h4-font-size,   // 16.25px
  5: $h5-font-size,   // 14.95px
  6: $h6-font-size,   // 13.95px

  7: $font-size-base * 0.95,  // 12.35px
  8: $font-size-base * 0.85,  // 11.05px
  9: $font-size-base * 0.75,  // 9.75px
  10: $font-size-base * 0.5,  // 6.50px

  base: $font-size-base, // 13px
  fluid: 100%, // 100%

  2x: $font-size-base * 2,        // 26px
  2qx: $font-size-base * 2.25,    // 29.25px
  2hx: $font-size-base * 2.5,     // 32.5px
  2tx: $font-size-base * 2.75,    // 35.75px

  3x: $font-size-base * 3,        // 39px
  3qx: $font-size-base * 3.25,    // 42.25px
  3hx: $font-size-base * 3.5,     // 45.5px
  3tx: $font-size-base * 3.75,    // 48.75px

  4x: $font-size-base * 4,        // 52px
  4qx: $font-size-base * 4.25,    // 55.25px
  4hx: $font-size-base * 4.5,     // 58.5px
  4tx: $font-size-base * 4.75,    // 61.75px

  5x: $font-size-base * 5,        // 65px
  5qx: $font-size-base * 5.25,    // 68.25px
  5hx: $font-size-base * 5.5,     // 71.5px
  5tx: $font-size-base * 5.75     // 74.75px
) !default;

// Custom hight and width sizes
$custom-sizes: (
  1px: 1px,
  2px: 2px,
  3px: 3px,
  4px: 4px,
  5px: 5px,
  6px: 6px,
  7px: 7px,
  8px: 8px,
  9px: 9px,
  10px: 10px,
  15px: 15px,
  20px: 20px,
  25px: 25px,
  30px: 30px,
  35px: 35px,
  40px: 40px,
  45px: 45px,
  50px: 50px,
  55px: 55px,
  60px: 60px,
  65px: 65px,
  70px: 70px,
  75px: 75px,
  80px: 80px,
  85px: 85px,
  90px: 90px,
  95px: 95px,
  100px: 100px,
  125px: 125px,
  150px: 150px,
  175px: 175px,
  200px: 200px,
  225px: 225px,
  250px: 250px,
  275px: 275px,
  300px: 300px,
  325px: 325px,
  350px: 350px,
  375px: 375px,
  400px: 400px,
  425px: 425px,
  450px: 450px,
  475px: 475px,
  500px: 500px,
  550px: 550px,
  600px: 600px,
  650px: 650px,
  700px: 700px,
  750px: 750px,
  800px: 800px,
  850px: 850px,
  900px: 900px,
  950px: 950px,
  1000px: 1000px
) !default;
// Symbol Sizes
$symbol-sizes: (
  1: 0.25rem,
  2: 0.5rem,
  3: 0.75rem,
  4: 1.0rem,
  5: 1.25rem,
  6: 1.5rem,
  7: 1.75rem,
  8: 2rem,
  9: 2.25rem,
  10: 2.5rem,
  11: 2.75rem,
  12: 3rem,
  20px: 20px,
  25px: 25px,
  30px: 30px,
  35px: 35px,
  40px: 40px,
  45px: 45px,
  default: 50px,
  50px: 50px,
  55px: 55px,
  60px: 60px,
  65px: 65px,
  70px: 70px,
  75px: 75px,
  100px:100px,
  125px:125px,
  150px:150px,
  160px:160px,
  175px:175px,
  200px:200px
) !default;

$border-widths: (
  0: 0,
  1: 1px,
  2: 2px,
  3: 3px,
  4: 4px,
  5: 5px
) !default;

// Badges
$badge-font-size:                                   .85rem !default;
$badge-font-size-sm:                                .85rem !default;
$badge-font-size-lg:                                1rem !default;
$badge-font-weight:                                 $font-weight-bolder !default;
$badge-color:                                       $body-bg !default;
$badge-padding-y:                                   .5em !default;
$badge-padding-x:                                   .85em !default;
$badge-border-radius:                               $border-radius !default;
$badge-size:                                        1.75rem !default; // Custom variable
$badge-size-sm:                                     1.5rem !default; // Custom variable
$badge-size-lg:                                     2rem !default; // Custom variable