// 各种变量以及可配置设置

// 中性色彩
$white: #fff !default;
$gray-100: #f8f9fa !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: #000000 !default;

// 基础色板
$violet: #815c94 !default;
$indigo: #61649f !default;
$purple: #8076a3 !default;
$pink: #e9d7df !default;
$red: #a8456b !default;
$orange: #fbb957 !default;
$yellow: #f8df70 !default;
$green: rgb(150, 188, 25) !default;
$teal: #96c24e !default;
$cyan: #93d5dc !default;

// 系统色板
$primary: $violet !default;
$secondary: $gray-600 !default;
$success: $green !default;
$info: $cyan !default;
$warning: $yellow !default;
$danger: $red !default;
$light: $gray-100 !default;
$dark: $gray-800 !default;

// 颜色主题
$theme-colors: (
  'primary': $primary,
  'secondary': $secondary,
  'success': $success,
  'info': $info,
  'warning': $warning,
  'danger': $danger,
  'light': $light,
  'dark': $dark,
);

// 主要字体家族
$font-family-sans-serif: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
  'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji',
  'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' !default;
$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas,
  'Liberation Mono', 'Courier New', monospace !default;
$font-family-base: $font-family-sans-serif !default;

// 字体大小
$font-size-base: 1rem !default; // Assumes the browser default, typically `16px`
$font-size-lg: $font-size-base * 1.25 !default;
$font-size-sm: $font-size-base * 0.875 !default;
$font-size-root: null !default;

// 字重
$font-weight-lighter: lighter !default;
$font-weight-light: 300 !default;
$font-weight-normal: 400 !default;
$font-weight-bold: 700 !default;
$font-weight-bolder: bolder !default;
$font-weight-base: $font-weight-normal !default;
// 行高
$line-height-base: 1.5 !default;
$line-height-lg: 2 !default;
$line-height-sm: 1.25 !default;

// 标题大小
$h1-font-size: $font-size-base * 2.5 !default;
$h2-font-size: $font-size-base * 2 !default;
$h3-font-size: $font-size-base * 1.75 !default;
$h4-font-size: $font-size-base * 1.5 !default;
$h5-font-size: $font-size-base * 1.25 !default;
$h6-font-size: $font-size-base !default;

// 链接
$link-color: $primary !default;
$link-decoration: none !default;
$link-hover-color: darken($link-color, 15%) !default;
$link-hover-decoration: underline !default;

// body
$body-bg: $white !default;
$body-color: $gray-900 !default;
$body-text-align: null !default;

// Spacing
$spacer: 1rem !default;

// Paragraphs
$paragraph-margin-bottom: 1rem !default;

// 字体其他部分 heading list hr 等等
$headings-margin-bottom: calc($spacer / 2) !default;
$headings-font-family: null !default;
$headings-font-style: null !default;
$headings-font-weight: 500 !default;
$headings-line-height: 1.2 !default;
$headings-color: null !default;

$display1-size: 6rem !default;
$display2-size: 5.5rem !default;
$display3-size: 4.5rem !default;
$display4-size: 3.5rem !default;

$display1-weight: 300 !default;
$display2-weight: 300 !default;
$display3-weight: 300 !default;
$display4-weight: 300 !default;
$display-line-height: $headings-line-height !default;

$lead-font-size: $font-size-base * 1.25 !default;
$lead-font-weight: 300 !default;

$small-font-size: 0.875em !default;

$sub-sup-font-size: 0.75em !default;

$text-muted: $gray-600 !default;

$initialism-font-size: $small-font-size !default;

$blockquote-small-color: $gray-600 !default;
$blockquote-small-font-size: $small-font-size !default;
$blockquote-font-size: $font-size-base * 1.25 !default;

$hr-color: inherit !default;
$hr-height: 1px !default;
$hr-opacity: 0.25 !default;

$legend-margin-bottom: 0.5rem !default;
$legend-font-size: 1.5rem !default;
$legend-font-weight: null !default;

$mark-padding: 0.2em !default;

$dt-font-weight: $font-weight-bold !default;

$nested-kbd-font-weight: $font-weight-bold !default;

$list-inline-padding: 0.5rem !default;

$mark-bg: #fcf8e3 !default;

$hr-margin-y: $spacer !default;

// Code
$code-font-size: $small-font-size !default;
$code-color: $pink !default;
$pre-color: null !default;

// options 可配置选项
$enable-pointer-cursor-for-buttons: true !default;

// 边框 和 border radius

$border-width: 1px !default;
$border-color: $gray-300 !default;

$border-radius: 0.25rem !default;
$border-radius-lg: 0.3rem !default;
$border-radius-sm: 0.2rem !default;

// 不同类型的 box shadow
$box-shadow-sm: 0 0.125rem 0.25rem rgba($black, 0.075) !default;
$box-shadow: 0 0.5rem 1rem rgba($black, 0.15) !default;
$box-shadow-lg: 0 1rem 3rem rgba($black, 0.175) !default;
$box-shadow-inset: inset 0 1px 2px rgba($black, 0.075) !default;

// !! 按钮
// 按钮基本属性
$btn-font-weight: 400;
$btn-padding-y: 0.375rem !default;
$btn-padding-x: 0.75rem !default;
$btn-font-family: $font-family-base !default;
$btn-font-size: $font-size-base !default;
$btn-line-height: $line-height-base !default;

// 不同大小按钮的 padding 和 font size
$btn-padding-y-sm: 0.25rem !default;
$btn-padding-x-sm: 0.5rem !default;
$btn-font-size-sm: $font-size-sm !default;

$btn-padding-y-lg: 0.5rem !default;
$btn-padding-x-lg: 1rem !default;
$btn-font-size-lg: $font-size-lg !default;

// 按钮边框
$btn-border-width: $border-width !default;

// 按钮其他
$btn-box-shadow: inset 0 1px 0 rgba($white, 0.15), 0 1px 1px rgba($black, 0.075) !default;
$btn-disabled-opacity: 0.65 !default;

// 链接按钮
$btn-link-color: $link-color !default;
$btn-link-hover-color: $link-hover-color !default;
$btn-link-disabled-color: $gray-600 !default;

// 按钮 radius
$btn-border-radius: $border-radius !default;
$btn-border-radius-lg: $border-radius-lg !default;
$btn-border-radius-sm: $border-radius-sm !default;

$btn-transition: all 100ms ease-out !default;

// !! alert
$alert-border-radius: 0.4rem !default;
$alert-padding-y: 0.375rem !default;
$alert-padding-x: 0.75rem !default;

$alert-width: 30rem;
$alert-line-height: $line-height-lg;

$alert-title-font-size: $font-size-base * 1.2 !default;
$alert-message-font-size: $font-size-base !default;

$alert-icon-right: 1rem;
$alert-icon-top: 0.5rem;

$alert-icon-font-weight: $font-weight-normal;
$alert-icon-font-size: $sub-sup-font-size;

// menu
$menu-border-width: $border-width !default;
$menu-border-color: $border-color !default;
$menu-box-shadow: inset 0 1px 0 rgba($white, 0.15),
  0 1px 1px rgba($black, 0.075) !default;
$menu-transition: color 0.15s ease-in-out, border-color 0.15s ease-in-out !default;

// menu-item
$menu-item-padding-y: 0.5rem !default;
$menu-item-padding-x: 1rem !default;
$menu-item-hover-color: $gray-200 !default;
$menu-item-active-color: $primary !default;
$menu-item-mouseDown-color: rgba($primary, 0.5) !default;
$menu-item-active-border-width: 2px !default;
$menu-item-disabled-color: $gray-600 !default;
$menu-item-disabled-cursor: not-allowed !default;
$menu-item-transition: all 100ms ease-out !default;
$menu-backgroundColor: $white !default;

// sub-menu
// submenu
$submenu-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12),
  0 0 6px 0 rgba(0, 0, 0, 0.04);
$submenu-dropdown-margin-left: 0.8rem !default;

// tabs
$tabs-border-width: $border-width !default;
$tabs-border-color: $border-color !default;
$tabs-box-shadow: inset 0 1px 0 rgba($white, 0.15), 0 1px 1px rgba($black, 0.05) !default;

$tabs-box-shadow-outline: inset 0 1px 0 rgba($white, 0.05),
  inset 0 -1px 1px rgba($black, 0.05) !default;

$tabs-label-padding-y: 0.5rem !default;
$tabs-label-padding-x: 1rem !default;
$tabs-label-border-radius: 0.35rem;

$tabs-label-disabled-color: $gray-600 !default;

$tabs-label-active-color: $primary !default;
$tabs-label-active-border-width: 1px !default;
$tabs-label-active-border-bottom-width: 1.5px !default;
$tabs-label-active-box-shadow: inset 0 -1px 0 rgba($white, 0.15),
  1px -1px 1px rgba($black, 0.05) !default;

$tabs-content-padding-y: 0.5rem !default;
$tabs-content-padding-x: 1rem !default;

//input
$input-padding-y: $btn-padding-y !default;
$input-padding-x: $btn-padding-x !default;
$input-font-family: $btn-font-family !default;
$input-font-size: $btn-font-size !default;
$input-font-weight: $font-weight-base !default;
$input-line-height: $btn-line-height !default;

$input-padding-y-sm: $btn-padding-y-sm !default;
$input-padding-x-sm: $btn-padding-x-sm !default;
$input-font-size-sm: $btn-font-size-sm !default;

$input-padding-y-lg: $btn-padding-y-lg !default;
$input-padding-x-lg: $btn-padding-x-lg !default;
$input-font-size-lg: $btn-font-size-lg !default;

$input-bg: $white !default;
$input-disabled-bg: $gray-200 !default;
$input-disabled-border-color: null !default;

$input-color: $gray-700 !default;
$input-border-color: $gray-400 !default;
$input-border-width: 2px !default;
$input-box-shadow: $box-shadow-inset !default;

$input-border-radius: $border-radius !default;
$input-border-radius-lg: $border-radius-lg !default;
$input-border-radius-sm: $border-radius-sm !default;

$input-focus-bg: $input-bg !default;
$input-focus-border-color: lighten($primary, 25%) !default;
$input-focus-width: 0.2rem !default;
$input-focus-color: $input-color !default;
$input-focus-shadow-color: rgba($primary, 0.25) !default;
$input-focus-shadow-error-color: rgba($danger, 0.5) !default;
$input-focus-box-shadow: 0 0 0 $input-focus-width $input-focus-shadow-color !default;
$input-focus-box-shadow-error: 0 0 0 $input-focus-width
  $input-focus-shadow-error-color !default;
$input-placeholder-color: $gray-600 !default;
$input-plaintext-color: $body-color !default;

$input-height-border: $input-border-width * 2 !default;

$input-transition: border-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out !default;

$input-group-addon-color: $input-color !default;
$input-group-addon-bg: $gray-200 !default;
$input-group-addon-white: $white;
$input-group-addon-border-color: $input-border-color !default;

// Progress bars
$progress-font-size: $font-size-base * 0.75 !default;
$progress-bg: $gray-200 !default;
$progress-border-radius: $border-radius !default;
$progress-bar-color: $white !default;
$progress-bar-transition: width 0.6s ease !default;

// number_input
$number-input-width: 6rem !default;
$number-input-width-lg: $number-input-width * 1.25 !default;
$number-input-width-sm: $number-input-width * 0.875 !default;

// Navs

$nav-link-padding-y: 0.5rem !default;
$nav-link-padding-x: 1rem !default;
$nav-link-disabled-color: $gray-600 !default;

$nav-tabs-border-color: $gray-300 !default;
$nav-tabs-border-width: $border-width !default;
$nav-tabs-border-radius: $border-radius !default;
$nav-tabs-link-hover-border-color: $gray-200 $gray-200 $nav-tabs-border-color !default;
$nav-tabs-link-hover-color: $primary !default;
$nav-tabs-link-active-color: $primary !default;
$nav-tabs-link-active-bg: $body-bg !default;
$nav-tabs-link-active-border-color: $gray-300 $gray-300 $nav-tabs-link-active-bg !default;
$nav-tabs-content-margin: 1rem !default;
// cascader
$cascader-optionList-border-left: 1px solid $gray-400 !default;
$cascader-optionItem-padding-right: 1.8rem !default;
$cascader-optionList-height: 12rem !default;
$cascader-optionsWrap-top: $input-line-height + 1.2rem !default;
$cascader-optionItem-hover-color: $gray-200 !default;
$cascader-optionItem-icon-padding-right: 0.5rem !default;
$cascader-optionsBox-shadow: 0 4px 10px
  rgba(
    $color: #000000,
    $alpha: 0.4,
  ) !default;

// radio
$radio-disabled-color: $gray-600 !default;
$radio-dot-margin-right: 12px;
$radio-dot-input-width: 17px;
$radio-dot-input-height: 17px;
$radio-dot-label-width: 15px;
$radio-dot-label-height: 15px;
$radio-dot-input-after-left: 7px;
$radio-dot-input-after-top: 2px;
$radio-dot-input-after-width: 5px;
$radio-dot-input-after-height: 12px;
$radio-dot-input-after-border-right: 1px;
$radio-dot-input-after-border-bottom: 1px;
$radio-dot-span-padding-left: 3px;
$radio-dot-button-padding: 1px;
$radio-button-input-width: 6px;
$radio-button-input-height: 6px;
$radio-button-input-top: 10px;
$radio-button-input-left: 10px;
$radio-button-input-background: #b4b4b4;
$radio-button-label-min-height: 50px;
$radio-button-label-height: 24px;
$radio-button-label-line-height: 24px;
$radio-button-label-padding-right: 10px;
$radio-button-label-border-radius: 5px;
$radio-button-label-padding-left: 25px;
$radio-button-input-after-left: 12px;
$radio-button-input-after-top: 5px;
$radio-button-input-after-width: 5px;
$radio-button-input-after-height: 12px;
$radio-button-input-after-border-right: 1px;
$radio-button-input-after-border-bottom: 1px;

//progress
$progress-sm-height: 20px;
$progress-line-container-width: 240px;
$progress-line-container-height: 25px;
$progress-line-container-border-radius: 25px;
$progress-line-container-background: #eee;
$progress-line-progress-border-radius: 25px;
$progress-circle-font-size: 50px;
$progress-circle-width: 160px;
$progress-circle-height: 160px;
$progress-circle-percent-top: 15px;
$progress-circle-percent-left: 15px;
$progress-circle-percent-width: 130px;
$progress-circle-percent-height: 130px;
$progress-circle-percent-background-color: #fff;
$progress-circle-percent-font-size: 30px;

// auto-complete
$autoComplete-suggestions-top: $input-line-height + 1.4rem !default;

// datepicker
@mixin inline-center {
  display: inline-flex;
  align-items: center;
}

$base-font-size: 12px;
$title-font-size: 1.3em;

$primary-color-dark: #49599a;
$primary-color: #7986cb;
$primary-color-light: #aab6fe;
$primary-color-text: #ffffff;
$accent-color: #03a9f4;
$primary-text-color: #212121;
$secondary-text-color: #757575;
$divider-color: #e4e4e4;
$today-bg-color: #fff9c4;
// auto-complete
$autoComplete-suggestions-top: $input-line-height + 1.4rem !default;
