@import '../core/index.scss';

:root {
  @include defineColorHSL(--za-theme-default, 0, 0%, 90%);
  @include defineColorHSL(--za-theme-primary, 156, 100%, 36.9%);
  @include defineColorHSL(--za-theme-success, 156, 100%, 36.9%);
  @include defineColorHSL(--za-theme-warning, 31, 83.1%, 55.9%);
  @include defineColorHSL(--za-theme-danger, 0, 100%, 65.7%);

  // 文字色
  --za-color-text: #343434;
  --za-color-text-inverse: #fff; // 反色
  --za-color-text-placeholder: rgba(128, 128, 132, 0.3); // 文本框提示
  --za-color-text-disabled: #bcbcbc; // 失效
  --za-color-text-caption: #909090; // 辅助描述
  --za-color-link: var(--za-theme-primary); // 链接
  --za-color-shadow: rgba(56, 56, 56, 0.15); // 阴影色

  // 背景色
  --za-background-color: #fff;
  --za-background-active: rgba(0, 0, 0, 0.15);
  --za-background-disabled: #f2f2f2;

  // 边框色
  --za-border-color: rgba(60, 60, 67, 0.36);
  --za-border-disabled: #e6e6e6;

  // 圆角
  --za-radius-xs: 4px;
  --za-radius-sm: 4px;
  --za-radius-md: 4px;
  --za-radius-lg: 8px;
  --za-radius-xl: 8px;
  --za-radius-round: 1000px;
  --za-radius-circle: 50%;

  // 水平间距
  --za-padding-h-xs: 8px;
  --za-padding-h-sm: 12px;
  --za-padding-h-md: 16px;
  --za-padding-h-lg: 20px;
  --za-padding-h-xl: 24px;

  // 垂直间距
  --za-padding-v-xs: 6px;
  --za-padding-v-sm: 8px;
  --za-padding-v-md: 12px;
  --za-padding-v-lg: 16px;
  --za-padding-v-xl: 18px;

  // 高度
  --za-height-xs: 28px;
  --za-height-sm: 36px;
  --za-height-md: 44px;
  --za-height-lg: 52px;
  --za-height-xl: 60px;

  // 字体大小
  --za-font-size-xs: 14px;
  --za-font-size-sm: 14px;
  --za-font-size-md: 17px;
  --za-font-size-lg: 20px;
  --za-font-size-xl: 22px;

  // 堆叠顺序
  --za-zindex-mask: 1000;
  --za-zindex-popup: 1100;
  --za-zindex-tooltip: 1700;

  // 透明度
  --za-opacity-disabled: 0.5;
  --za-opacity-mask: 0.4;
  --za-opacity-toast: 0.8;

  // 动画
  --za-animation-duration: 0.3s;

  // 箭头
  --za-arrow-color: rgba(0, 0, 0, 0.2);
  --za-arrow-size: 10px;
  --za-arrow-width: 2px;
}