// ============================================================================
// 视图公共变量 - 供各视图组件共享使用
// 桥接层：SCSS 变量消费 CSS 自定义属性 (--cnai-*)，保留 fallback
// ============================================================================

// ----------------------------------------------------------------------------
// 颜色变量
// ----------------------------------------------------------------------------

// 选中状态颜色
$color-selected-bg: var(--cnai-color-bg-selected, #f1f5fe);
$color-selected-border: var(--cnai-color-brand-primary, #4161fd);

// 文字颜色
$color-text-primary: var(--cnai-color-text-heading, rgba(0, 0, 0, 0.88));
$color-text-secondary: var(--cnai-color-text-secondary, #666);
$color-text-disabled: var(--cnai-color-text-disabled, #ccc);
$color-brand: var(--cnai-color-brand-primary, #4161fd);
$color-brand-hover: var(--cnai-color-brand-primary-hover, #284cc0);

// 背景和边框
$color-bg-white: var(--cnai-color-bg-base, #fff);
$color-bg-light: var(--cnai-color-bg-base, #fff);
$color-border-light: var(--cnai-color-border-base, #e7e8ed);
$color-border-divider: var(--cnai-color-border-light, #f0f0f0);

// ----------------------------------------------------------------------------
// 间距变量
// ----------------------------------------------------------------------------

$spacing-xs: 4px;
$spacing-sm: 8px;
$spacing-md: 12px;
$spacing-lg: 16px;

// ----------------------------------------------------------------------------
// 尺寸变量
// ----------------------------------------------------------------------------

$card-border-radius: var(--cnai-radius-md, 8px);
$card-border-radius-lg: var(--cnai-radius-lg, 12px);

// 选中角标
$badge-size: 20px;
$badge-icon-size: 12px;

// 左侧卡片列表宽度
$card-list-width: 400px;

// ----------------------------------------------------------------------------
// 阴影变量
// ----------------------------------------------------------------------------

$shadow-card: var(
  --cnai-shadow-sm,
  0 0 5px 0 rgba(0, 0, 0, 0.05)
);

$shadow-card-hover: var(
  --cnai-shadow-md,
  0 0 5px 0 rgba(0, 0, 0, 0.08)
);

// ----------------------------------------------------------------------------
// Mixins
// ----------------------------------------------------------------------------

// 选中状态角标
@mixin selected-badge {
  position: relative;

  &::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: $badge-size;
    height: $badge-size;
    z-index: 4;
    border-radius: 0 $card-border-radius 0 0;
    background: var(--cnai-gradient-brand, linear-gradient(135deg, #a17dff 36%, #4b3bff 96%)), #fff;
    transform: rotate(270deg);
  }

  &::before {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: $badge-size;
    height: $badge-size;
    z-index: 5;
    background-image: var(--cnai-table-badge-icon-url, url('https://img.alicdn.com/imgextra/i3/O1CN01JMYzvU1J8GS4AeHY5_!!6000000000983-55-tps-12-12.svg'));
    background-size: $badge-icon-size $badge-icon-size;
    background-position: center;
    background-repeat: no-repeat;
    transform: rotate(270deg);
  }
}

// 选中状态基础样式
@mixin selected-state {
  border-radius: $card-border-radius;
  background: $color-selected-bg;
  box-sizing: border-box;
}

// 选中状态基础样式
@mixin selected-state-badge {
  @include selected-state;
  @include selected-badge;
}

// 隐藏滚动条
@mixin hide-scrollbar {
  scrollbar-width: none;
  -ms-overflow-style: none;

  &::-webkit-scrollbar {
    display: none;
  }
}

// 文字渐变效果
@mixin text-gradient(
  $start: var(--cnai-table-text-gradient-start, #1a66ff),
  $end: var(--cnai-table-text-gradient-end, #b624ff)
) {
  background: linear-gradient(90deg, $start 7%, $end 98%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
