@import './color.scss';

@function tint($color, $percentage) {
  @return mix(white, $color, $percentage);
}

@function shade($color, $percentage) {
  @return mix(black, $color, $percentage);
}
// 1. Global
// 全局基础设置
$prefix: ne !default;
//$font-path: '../icon/font' !default;
$font-path: 'https://static.ws.126.net/utf8/neatui/icon/201801181113' !default;
$primary-color: map-get($theme-color-map, red) !default;
$info-color: map-get($function-color-map, info) !default;
$success-color: map-get($function-color-map, success) !default;
$warning-color: map-get($function-color-map, warning) !default;
$error-color: map-get($function-color-map, error) !default;
$global-border-color: map-get($grey-map, 2) !default;
$global-border-width: 1px !default;
$global-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.15) !default;

$icon-size: 18px !default;

$component-default-color: map-get($grey-map, 5) !default;
$component-default-bg: map-get($grey-map, 1) !default;
$component-disabled-color: map-get($grey-map, 3) !default;
$component-disabled-bg: map-get($grey-map, 1) !default;
$component-disabled-border: $global-border-color !default;
$popup-distance: 8px !default;

$font-sizes-map: (
  small: 14px,
  medium: 14px,
  large: 16px,
  xlarge: 18px
);

$sizes-map: (
  small: 24px,
  medium: 32px,
  large: 40px
);

$font-size-sm: map-get($font-sizes-map, small) !default;
$font-size-base: map-get($font-sizes-map, base) !default;
$font-size-lg: map-get($font-sizes-map, large) !default;

$black: #000 !default;
$white: #fff;

// 2. Animation
$ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
$ease-in: cubic-bezier(0.55, 0.055, 0.675, 0.19);
$ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
$ease-out-back: cubic-bezier(0.12, 0.4, 0.29, 1.46);
$ease-in-back: cubic-bezier(0.71, -0.46, 0.88, 0.6);
$ease-in-out-back: cubic-bezier(0.71, -0.46, 0.29, 1.46);
$ease-out-circ: cubic-bezier(0.08, 0.82, 0.17, 1);
$ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.34);
$ease-in-out-circ: cubic-bezier(0.78, 0.14, 0.15, 0.86);
$ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
$ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06);
$ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1);

$animation-duration-slower: 0.5s; // Modal
$animation-duration-slow: 0.3s; // Modal
$animation-duration-base: 0.2s; // close button
$animation-duration-fast: 0.1s; // Tooltip

// 3. The Grid
$grid-row-width: $global-width;
/// 总栅格数
$grid-column-count: 24;
/// 栅格间隔
$grid-column-gutter: 20;

$breakpoints: (
  small: 0,
  medium: 640px,
  large: 1024px,
  xlarge: 1200px,
  xxlarge: 1440px
);
$breakpoint-classes: (small medium large);
$block-grid-max: 8;
// 4. Base Typography

// 5. Typography Helpers
// 7. Accordion
// 8. Accordion Menu
// 9. Badge
// 10. Breadcrumbs
// 11. Button
$button-padding-map: (
  small: 0 8px,
  medium: 0 12px,
  large: 0 16px
);

$icon-button-padding: 6px;
$text-button-padding: 4px;
$button-default-bg: $component-default-bg;
$button-default-hover-bg: map-get($grey-map, 2);
$button-contained-hover-bg: map-get($grey-map, 3);
// 12. Button Group
// 13. Callout
// 14. Modal
$modal-padding: 24px;
$modal-margin: 36px;
$modal-header-padding-v: 12px;
$modal-header-font-size: map-get($font-sizes-map, large);
$modal-large-header-font-size: map-get($font-sizes-map, xlarge);
$modal-content-min-height: 120px;
$modal-default-position: 120px;
$modal-hr: map-get($grey-map, 2);
$modal-plane-padding: 10px !default;
$modal-footer-margin: 8px;
$modal-transition-delay: 50ms;
$modal-close-position-right: 6px;
$modal-close-position-top: 6px;
$modal-mask-default: rgba(0, 0, 0, 0.5);
$confirm-title-margin: 12px;
// 15. Drilldown
// 16. Dropdown
// 17. Dropdown Menu
// 18. Flex Video
// 19. Forms
$form-item-height: 56px;
$form-gutter-width: 10px;
$form-helper-margin: 4px;
$form-content-width: 300px;
$form-line-height: 34px;
// 20. Label
// 21. Media Object
// 22. Menu
$menu-item-height: 40px;
$popup-submenu-width: 120px;
$popup-submenu-top-padding: 10px;
$compact-menu-width: 60px;
$menu-title-color: map-get($grey-map, 4);
$menu-highlight-color: map-get($grey-map, 5);
$menu-highlight-bg: $component-default-bg;
// 23. Meter
// 24. Off-canvas
// 25. Orbit
// 26. Pagination
$pagination-line-height: 32px;
$pagination-radius: 4px;
$pagination-font-size: 14px;
$pagination-item-padding: 8px 7px;
// 27. Progress Bar
$progress-default-bg: $component-default-bg;
$progress-bar-height: 8px;
// 28. Reveal
// 29. Slider
// 30. Switch
$switch-gutter-width: 12px;
$switch-trigger-size: 24px;
// 31. Tableo
$table-border: $global-border-width solid $global-border-color;
$table-stripe: even !default;
$stripe: $table-stripe;
$tabel-head-bg: map-get($grey-map, 1);
$tabel-scroll-shadow: 6px 0 6px -4px rgba(0, 0, 0, 0.2);
$table-row-hover: tint($primary-color, 90%);
// 32. Tabs

$tab-width: (
  small: 90px,
  medium: 120px,
  large: 150px
);
// 33. Thumbnail
// 34. Title Bar
// 35. Tooltip
//** Tooltip body background color
$tooltip-hr: #edeff3;
$tooltip-bg: $white;
//** tooltip maximum width
$tooltip-min-width: 120px;
//** tooltip arrow width
$tooltip-arrow-width: 6px;
//** tooltip arrow color
$tooltip-arrow-color: $tooltip-bg;
//** tooltip outer arrow width
$tooltip-arrow-outer-width: $tooltip-arrow-width + 1;
//** tooltip outer arrow color
$tooltip-arrow-outer-color: rgba($black, 0.08);
//** tooltip distance with trigger
$tooltip-distance: $tooltip-arrow-width + $popup-distance;
// 36. Top Bar
// 37. Radio
// 38. input
$input-icon-color: map-get($grey-map, 4);
$input-placeholder-color: map-get($grey-map, 3);
$input-container-padding: 12px !default;
// 39. checkbox
$checkbox-field-size: 24px;
// 40. tag
$tag-default-bg: $button-default-bg;
$tag-height: map-get($sizes-map, medium) - 10;
$tag-font-size: map-get($font-sizes-map, medium) - 2;
$tag-input-width: 80px;

$maptag-default-bg: $button-default-bg;
$maptag-height: map-get($sizes-map, medium) - 10;
$maptag-font-size: map-get($font-sizes-map, medium) - 2;
$maptag-input-width: 80px;

// 41. notice
$notice-box-shadow: 0 1px 5px 1px rgba(0, 0, 0, 0.2) !default;
$notice-radius: 4px !default;
$notice-padding: 10px !default;

// 42. select
$select-min-width: 80px;

// 43. cascader
$cascader-menu-height: 400px;

$tag-select-input-padding: 0;
$maptag-select-input-padding: 0;

$calendar-hr-color: $component-default-bg;
$calendar-width: 280px;
$calendar-body-padding: 16px;
$calendar-date-different-month-color: map-get($grey-map, 4);
$calendar-date-size: map-get($sizes-map, medium);
$calendar-month-width: 50px;
$calendar-month-height: 36px;

$time-picker-width: 172px;

$upload-preview-padding: 8px;
$upload-preview-size: 104px;
$upload-bg: $component-default-bg;
$upload-list-item-margin: 30px;
$upload-name-height: map-get($font-sizes-map, medium) * 2;

$snackbar-primary-bg: rgba(0, 0, 0, 0.75);
$snackbar-padding: 10px 24px;
$snackbar-gutter: 16px;
$snackbar-distance: 24px;
$snackbar-min-width: 300px;
$snackbar-max-width: 500px;
$snackbar-max-height: 200px;
$snackbar-button-size: map-get($sizes-map, small);
$snackbar-title-size: map-get($font-sizes-map, large);

$breadcrumb-color: map-get($grey-map, 4);

$icon-color: map-get($grey-map, 4);
$icon-gutter: 6px;
$icon-sizes-map: (
  small: map-get($font-sizes-map, small),
  medium: $global-line-height,
  large: 24px,
  xlarge: 28px
);

$backdrop-bg: rgba(0, 0, 0, 0.4);

$actions-gutter: 4px;