@forward "../mixins";
@forward "./palette";

@use "sass:math";
@use "sass:color";
@use "sass:map";
@use "./palette";

// ===== 颜色 =====
$color-white: palette.$color-base-white !default;
$color-black: palette.$color-base-black !default;
$color-gray: palette.$color-base-gray !default;

$color-brand: palette.color-brand() !default;
$color-info: palette.color-brand() !default;
$color-success: palette.color-success() !default;
$color-warning: palette.color-warning() !default;
$color-danger: palette.color-danger() !default;

$color-border-normal: palette.color-gray(4) !default;
$color-border-intensive: palette.color-gray(5) !default;
$color-border-divider: $color-border-normal !default;
$color-border-divider-strong: $color-border-intensive !default;

$color-text-normal: palette.color-gray(9) !default;
$color-text-normal-active: palette.color-gray(10) !default;
$color-text-normal-hover: palette.color-gray(8) !default;
$color-text-normal-focus: $color-text-normal-hover !default;
$color-text-disabled: palette.color-gray(6) !default;

// $color-text-normal-disabled 完全等价于 $color-text-disabled，待整理废弃
$color-text-normal-disabled: $color-text-disabled !default;

// $color-text-primary 完全等价于 $color-text-normal，待整理废弃
$color-text-primary: $color-text-normal !default;
$color-text-primary-active: $color-text-normal-active !default;
$color-text-primary-hover: $color-text-normal-hover !default;
$color-text-primary-focus: $color-text-primary-hover !default;
$color-text-primary-disabled: $color-text-normal-disabled !default;

$color-text-heading: $color-text-normal !default;
$color-text-secondary: palette.color-gray(8) !default; // 辅助文字
$color-text-hint: palette.color-gray(7) !default; // 引导，提示
$color-text-reverse: palette.color-gray(1) !default;

$color-link: $color-text-normal !default;
$color-link-active: palette.color-brand(7) !default;
$color-link-hover: palette.color-brand(5) !default;
$color-link-focus: $color-link-hover !default;
$color-link-disabled: $color-text-disabled !default;

$color-link-intensive: palette.color-brand(6) !default;
$color-link-intensive-active: $color-link-active !default;
$color-link-intensive-hover: $color-link-hover !default;
$color-link-intensive-focus: $color-link-intensive-hover !default;
$color-link-intensive-disabled: palette.color-brand(2) !default;

$color-icon-normal: palette.color-gray(7) !default;
$color-icon-normal-active: palette.color-gray(9) !default;
$color-icon-normal-hover: palette.color-gray(9) !default;
$color-icon-normal-focus: $color-icon-normal-hover !default;
$color-icon-disabled: palette.color-gray(6) !default;

$color-bg-normal: palette.color-gray(1) !default;
$color-bg-normal-active: palette.color-gray(4) !default;
$color-bg-normal-hover: palette.color-gray(3) !default;
$color-bg-normal-focus: $color-bg-normal-hover !default;

$color-bg-intensive: palette.color-gray(2) !default;
$color-bg-intensive-active: palette.color-gray(4) !default;
$color-bg-intensive-hover: palette.color-gray(3) !default;
$color-bg-intensive-focus: $color-bg-intensive-hover !default;

$color-bg-body: palette.color-gray(3) !default;

$color-bg-selection: palette.color-brand() !default;

// ===== base =====
$prefix-class-name: null !default;
$base-size-list: (sm, md) !default;
$base-size: md !default;

$__brick-name__: "brick";
@function base-class-name() {
  // 与 core/config-context 的 getBaseClassName() 一致
  @if $prefix-class-name {
    @return "#{$prefix-class-name}-#{$__brick-name__}";
  }

  @return $__brick-name__;
}

$pre-brick: ".#{base-class-name()}";

// ===== 文字 =====
$font-family: PingFang SC, Helvetica Neue, Hiragino Sans GB, Microsoft YaHei, Arial, SimSun, sans-serif !default;
$code-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace !default;

$font-variant-base: tabular-nums !default;
$font-feature-settings-base: "tnum" !default;

// 固定尺寸， 不提供配置
$font-size-12: 12px;
$font-size-14: 14px;
$font-size-16: 16px;
$font-size-18: 18px;
$font-size-20: 20px;
$font-size-24: 24px;
$font-size-32: 32px;

$font-size-sm: $font-size-12 !default;
$font-size-md: $font-size-14 !default;
$font-size-lg: $font-size-16 !default;

// 完全对应 packages/core/src/theme/base.ts 的 themeConfig.fontSize
$font-size: (
  xs: $font-size-sm,
  sm: $font-size-sm,
  md: $font-size-md,
  lg: $font-size-lg,
  xl: $font-size-lg,
) !default;
@function font-size($size: $base-size) {
  @return map.get($font-size, $size);
}
$font-size-base: font-size() !default;

$font-size-headline: (
  h1: $font-size-32,
  h2: $font-size-24,
  h3: $font-size-20,
  h4: $font-size-16,
  h5: $font-size-14,
  h6: $font-size-12,
) !default;
@function font-size-headline($h-size) {
  @return map.get($font-size-headline, $h-size);
}

$font-weight-normal: 400 !default;
$font-weight-regular: $font-weight-normal !default;
$font-weight-semibold: 600 !default;
// 暂无 bold
$font-weight-bold: $font-weight-semibold !default;

$line-spacing: ('compact', 'regular', 'loose') !default;
$line-spacing-base: 'regular' !default;

$line-height-compact: (
  #{$font-size-12}: 16px,
  #{$font-size-14}: 18px,
  #{$font-size-16}: 22px,
) !default;
$line-height-regular: (
  #{$font-size-12}: 18px,
  #{$font-size-14}: 22px,
  #{$font-size-16}: 24px,
) !default;
$line-height-loose: (
  #{$font-size-12}: 24px,
  #{$font-size-14}: 28px,
  #{$font-size-16}: 32px,
) !default;
$line-height-headline: (
  #{$font-size-12}: 16px,
  #{$font-size-14}: 18px,
  #{$font-size-16}: 22px,
  #{$font-size-18}: 24px,
  #{$font-size-20}: 26px,
  #{$font-size-24}: 32px,
  #{$font-size-32}: 42px
) !default;

@function line-height-compact($font-size) {
  @return map.get($line-height-compact, #{$font-size})
}

@function line-height-regular($font-size) {
  @return map.get($line-height-regular, #{$font-size})
}

@function line-height-loose($font-size) {
  @return map.get($line-height-loose, #{$font-size})
}

@function line-height-headline($font-size) {
  @return map.get($line-height-headline, #{$font-size})
}

@function line-height($font-size: $font-size-base, $line-height-size: $line-spacing-base) {
  @if $font-size < 12px or $font-size > 16px {
    @error "line-height($font-size) param $font-size #{$font-size} must be: 12px | 14px | 16px, only";
  }

  @if $line-height-size == 'compact' {
    @return line-height-compact($font-size);
  }
  @if $line-height-size == 'loose' {
    @return line-height-loose($font-size);
  }

  // regular
  @return line-height-regular($font-size);
}

@mixin font-size-with-line-height($font-size: $font-size-base, $line-height-size: $line-spacing-base) {
  & {
    font-size: $font-size;
    line-height: line-height($font-size, $line-height-size);
  }
}

// @todo: 根据背景色计算文字色 需要  ui 提供规则
@function color-font($color) {

}

// ===== 间距 =====
$padding-base: 4px !default;
@function padding($times) {
  @return $padding-base * math.ceil($times);
}

$padding-normal: padding(4) !default;

// ===== 高度 =====
$height-base: 4px !default;
@function height($times) {
  @return $height-base * math.ceil($times);
}

// ===== 圆角 =====
$border-radius-small: 2px !default; // R1
$border-radius-medium: 4px !default; // R2

// 设计侧并无此定义，“一般用” 是早前的研发侧的模糊语义，去掉
//$border-radius-regular: $border-radius-medium !default; // 一般用 R2

// ===== 阴影 =====
// s1 常用用于组件内部或组件本身
$box-shadow-up-s1: 0 2px 8px 0 rgba(0, 0, 0, 0.15) !default;
$box-shadow-down-s1: 0 -4px 8px 0 rgba(0, 0, 0, 0.15) !default;
$box-shadow-left-s1: 4px 0 8px 0 rgba(0, 0, 0, 0.15) !default;
$box-shadow-right-s1: -4px 0 8px 0 rgba(0, 0, 0, 0.15) !default;
// s2 常用于板块或卡片强调
$box-shadow-up-s2: 0 4px 20px 0 rgba(0, 0, 0, 0.15) !default;

$box-shadow-base: $box-shadow-up-s1 !default;
$box-shadow-base-center: 0 0 8px 0 rgba(0, 0, 0, 0.15) !default;
$box-shadow-intensive: $box-shadow-up-s2 !default;

// 用内阴影模拟，一般用于组件中营造"覆盖效果"的单向阴影，比如 table 的固定列，只是近似还原设计效果
$box-shadow-inset-left: inset 12px 0 12px -12px rgb(0, 0, 0, .2);
$box-shadow-inset-right: inset -12px 0px 12px -12px rgb(0, 0, 0, .2);
@mixin box-shadow-inset($position) {
  & {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    // width 太小的话（比如之前取的 20 px），在 safari 13 会出现黑条
    // 加大点可以让这个黑条离开可视区
    width: padding(9);
    // 光标穿透
    pointer-events: none;
    @if $position == left {
      right: 0;
      transform: translate(100%);
      box-shadow: $box-shadow-inset-left;
    }
    @else if($position == right) {
      left: 0;
      transform: translate(-100%);
      box-shadow: $box-shadow-inset-right;
    }
  }
}

$box-shadow-popper: $box-shadow-base !default;
$box-shadow-popper-arrow: $box-shadow-base-center !default;
$box-shadow-dialog: $box-shadow-intensive !default;
$box-shadow-drawer: (
  left: $box-shadow-left-s1,
  right: $box-shadow-right-s1,
  top: $box-shadow-up-s1,
  bottom: $box-shadow-down-s1,
) !default;

$box-shadow-color: (
  #{palette.color-brand()}: palette.color-brand(2),
  #{palette.color-success()}: palette.color-success(2),
  #{palette.color-warning()}: palette.color-warning(2),
  #{palette.color-danger()}: palette.color-danger(2),
);
@function box-shadow-focus($color: palette.color-brand()) {
  @if map.has-key($box-shadow-color, #{$color}) {
    $color: map.get($box-shadow-color, #{$color});
  }

  @return 0 0 0 2px $color;
}

// ===== 边框 =====
$border-width-base: 1px !default;
@function border($color: $color-border-normal, $style: solid, $width: $border-width-base) {
  @return $width $style $color;
}

// ===== z-index =====

// Z-index master list
// reference: Bootstrap
// Warning: Avoid customizing these values. They're used for a bird's eye view
// of components dependent on the z-axis and are designed to all work together.

$zindex-loading: 100 !default;
$zindex-drawer: 960 !default;
$zindex-modal: 1000 !default;
$zindex-image-preview: 1010 !default;
$zindex-popper: 1030 !default;
$zindex-toast: 1080 !default; // make it biggest

//$zindex-dropdown: 1000 !default;
//$zindex-sticky: 1020 !default;
//$zindex-fixed: 1030 !default;
//$zindex-dialog-backdrop: 1040 !default;
//$zindex-dialog: 1050 !default;
//$zindex-popover: 1060 !default;
//$zindex-tooltip: 1070 !default;

// ===== form control common =====
$form-control-default-size: $base-size !default;
$form-control-size-list: (xs, sm, md, lg, xl) !default;
$form-control-height: (
  xs: height(6),
  sm: height(7),
  md: height(8),
  lg: height(9),
  xl: height(10),
) !default;
$form-control-font-size: $font-size !default;
$form-control-box-padding-horizontal: padding(3) !default;
$form-control-border-color: $color-border-intensive !default;
$form-control-border-color-hover: palette.color-gray(7) !default;
$form-control-border-color-disabled: $form-control-border-color !default;
$form-control-bg-color: palette.color-gray(1) !default;
$form-control-bg-color-disabled: palette.color-gray(2) !default;
$form-control-clear-icon-button-color: palette.color-gray(6) !default;
$form-control-clear-icon-button-color-active: palette.color-gray(8) !default;
$form-control-clear-icon-button-color-hover: $form-control-clear-icon-button-color-active !default;
$form-control-clear-icon-button-color-focus: $form-control-clear-icon-button-color-hover !default;
$form-control-border-radius: (
  xs: $border-radius-small,
  sm: $border-radius-small,
  md: $border-radius-medium,
  lg: $border-radius-medium,
  xl: $border-radius-medium,
) !default;

// 待整理废弃
$color-border-control: $form-control-border-color !default;
$color-border-control-hover: $form-control-border-color-hover !default;

@function form-control-height($size: $form-control-default-size) {
  @return map.get($form-control-height, $size);
}

@function form-control-font-size($size: $form-control-default-size) {
  @return map.get($form-control-font-size, $size);
}

@function form-control-border-radius($size: $form-control-default-size) {
  @return map.get($form-control-border-radius, $size);
}

@function form-control-box-padding-vertical($size: $form-control-default-size) {
  $inner-height: form-control-height($size) - $border-width-base * 2;
  $line-height: line-height(form-control-font-size($size));

  @return math.div($inner-height - $line-height, 2);
}

@mixin form-control-box() {
  & {
    padding-left: $form-control-box-padding-horizontal;
    padding-right: $form-control-box-padding-horizontal;
    border: border($color: $form-control-border-color);
    border-radius: $border-radius-medium;
    background-color: $form-control-bg-color;
  }
  &:hover {
    border-color: $form-control-border-color-hover;
  }
  &::placeholder {
    opacity: 1;
    color: $color-text-hint;
  }

  // 覆盖 firefox 的默认 invalid 样式
  // 不是不管 dirty 与否的 `:invalid`
  // https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-ui-invalid
  &:-moz-ui-invalid {
    border-color: palette.color-danger();
    box-shadow: none;

    &:focus {
      @include focus-ring(palette.color-danger());
    }
  }
}

@mixin form-control-box-disabled() {
  &, &:hover {
    border-color: $form-control-border-color-disabled;
    background-color: $form-control-bg-color-disabled;
    color: $color-text-disabled;
    cursor: text;
    box-shadow: none;
  }
  &::placeholder {
    opacity: 1;
    color: $color-text-disabled;
  }
}

@mixin focus-ring($border-color: palette.color-brand(), $shadow-color: $border-color) {
  & {
    border-color: $border-color;
    box-shadow: box-shadow-focus($shadow-color);
    outline: none;
  }
}
@mixin focus-status($color: palette.color-brand()) {
  @include focus-ring($color)
}

@mixin placeholder-bg() {
  & {
    background-color: color.adjust(palette.color-gray(4), $alpha: .8) ;
  }
}

@mixin placeholder-border() {
  & {
    border: border($style: dashed);
  }
}

@mixin icon-size($size, $base-size: 12px) {
  & {
    // chrome 默认最小 font-size 为 12px 故小于 12px 的 font 用 scale 实现
    // 对于 大于 12px 使用 scale 以提供"原地缩小"的便捷实现
    @if ($size < 12px or $base-size > $size) {
      $font-size: math.max($font-size-sm, $base-size);
      font-size: $font-size;
      transform: scale(math.div($size, $font-size));
    }
    @else {
      font-size: $size;
    }
  }
}

@mixin caret-arrow-shape() {
  & {
    position: absolute;
    top: 50%;
    width: 10px;
    height: 3px;
    transform: scale(.5);
    margin: 0 1px;
  }
  &::before,
  &::after {
    content: '';
    position: absolute;
    width: 14px;
    height: 2px;
    border-radius: 2px;
    background-color: $color-icon-normal;
    transition: transform .3s ease;
  }
}

@mixin caret-arrow-direction($direction) {
  @if $direction == 'up' {
    &::before {
      transform: rotate(45deg) translateX(6px);
    }
    &::after {
      transform: rotate(-45deg) translateX(-6px);
    }
  }
  @else if $direction == 'down' {
    &::before {
      transform: rotate(-45deg) translateX(6px);
    }
    &::after {
      transform: rotate(45deg) translateX(-6px);
    }
  }
  @else if $direction == 'left' {
    &::before {
      transform: rotate(-45deg) translateY(-6px);
    }
    &::after {
      transform: rotate(45deg) translateY(6px);
    }
  }
  @else {
    &::before {
      transform: rotate(45deg) translateY(-6px);
    }
    &::after {
      transform: rotate(-45deg) translateY(6px);
    }
  }
}
@mixin caret-arrow() {
  @include caret-arrow-shape();

  @each $direction in ('up', 'down', 'left', 'right') {
    &.direction-#{$direction} {
      @include caret-arrow-direction($direction);
    }
  }
}

@mixin triangle-arrow($height: height(4), $color: palette.color-gray(1)) {
  & {
    display: inline-block;
    width: 0;
    height: 0;
    border: transparent solid $height;
  }

  $position: (
    'up': 'top',
    'down': 'bottom',
    'left': 'left',
    'right': 'right'
  );
  $position-reverse: (
    'up': 'bottom',
    'down': 'top',
    'left': 'right',
    'right': 'left'
  );
  @each $direction in ('up', 'down', 'left', 'right') {
    &.direction-#{$direction} {
      border-#{map.get($position-reverse, $direction)}-color: $color;
      border-#{map.get($position, $direction)}: none;
    }
  }
}