/** 公共前缀 */
@prefix: tdesign-starter;
@border-radius: 10px;
/* 6/15开始修改样式 */
@main-theme-color: var(--main-theme-color);
// 搜索框边框色
@td-search-box-border: var(--td-search-box-border);
/* 导航栏搜索框背景色 */
@td-search-brand-color-1: var(--td-search-brand-color-1);
/* 搜索框icon背景色 */
@td-search-btn-back-1: var(--td-search-btn-back-1);
/* icon的颜色 */
@td--search-btn-icon-color-1: var(--td--search-btn-icon-color-1);
/* 按钮颜色 */
@td--main-btn-color-1: var(--td--main-btn-color-1);
/* tab表格收藏不同颜色 */
@td--table-icon-color-1: var(--td--table-icon-color-1);
@td-Search-popup-back-color: var(--td-Search-popup-back-color);
@td-Search-btn-color-3: var(--td-Search-btn-color-3);
@td--right-back-color-2: var(--td--right-back-color-2);
// 表格行内背景色
@td-table-tr-back-color: var(--td-table-tr-back-color);
@td-table-tr-click-back-color: var(--td-table-tr-click-back-color);
/*
搜索模块样式
*/
/*搜索结果字体颜色*/
@td-Search-info-color-1: var(--td-Search-info-color-1);
/* 搜索结果下划线颜色 */
@td-Search-info-border-bottom-2: var(--td-Search-info-border-bottom-2);
/* 搜索弹出框背景色 */
@td--Search-drawer-back-color: var(--td--Search-drawer-back-color);
/* 搜索框行内背景色 */
@td-Search-box-line-back-color: var(--td-Search-box-line-back-color);
/* 搜索结果行内边框色 */
@td-Search-box-border-color-2: var(--td-Search-box-border-color-2);
/* 搜索框行内阴影颜色 */
@td-Search-shadow-color: var(--td-Search-shadow-color);
@td-search-btns-textColor: var(--td-search-btns-textColor);

/*
右侧详情模块
*/
@td-right-detail-font-color-1: var(--td-right-detail-font-color-1);

/* 颜色色板 */
@brand-color-1: var(--td-brand-color-1);

/* 基础颜色 */
@brand-color: var(--td-brand-color); // 色彩-品牌-可操作

// 基础颜色的扩展 用于 hover / 聚焦 / 禁用 / 点击 等状态
@brand-color-hover: var(--td-brand-color-hover); // hover态
@brand-color-focus: var(--td-brand-color-focus); // focus态，包括鼠标和键盘
@brand-color-active: var(--td-brand-color-active); // 点击态
@brand-color-disabled: var(--td-brand-color-disabled); // 禁用态
@brand-color-light: var(--td-brand-color-light); // 浅色的选中态

@bg-color-secondarycontainer: var(
  --td-bg-color-secondarycontainer
); // 色彩 - 次级容器
@bg-color-component: var(--td-bg-color-component); // 色彩  - 组件
@bg-color-component-hover: var(
  --td-bg-color-component-hover
); // 色彩 - 组件 - hover
@bg-color-component-active: var(
  --td-bg-color-component-active
); // 色彩 - 组件 - active
@bg-color-component-disabled: var(
  --td-bg-color-component-disabled
); // 色彩 - 组件 - disabled

// TODO: 考虑是否在组件内部做判断，不增加额外变量
// 特殊组件背景色，目前只用于 button、input 组件多主题场景，浅色主题下固定为白色，深色主题下为 transparent 适配背景颜色
@bg-color-specialcomponent: var(--td-bg-color-specialcomponent);

// 文本颜色
@text-color-primary: var(--td-text-color-primary); // 色彩-文字-主要
// 分割线
@border-level-1-color: var(--td-border-level-1-color);
@component-stroke: var(--td-component-stroke);
// 边框
@border-level-2-color: var(--td-border-level-2-color);
@component-border: var(--td-component-border);

// shadow

// 基础/下层 投影 hover 使用的组件包括：表格 /
@shadow-1: var(--td-shadow-1);
// 中层投影 下拉 使用的组件包括：下拉菜单 / 气泡确认框 / 选择器 /
@shadow-2: var(--td-shadow-2);
// 上层投影（警示/弹窗）使用的组件包括：全局提示 / 消息通知
@shadow-3: var(--td-shadow-3);

// Spacer
@spacer: 8px;
// Font
@font-size: 10px;
@font-size-s: @font-size * 1.2; // 字号-五级字号
@font-size-base: @font-size * 1.4; // 字号-四级字号
@font-size-l: @font-size * 1.6; // 字号-三级字号
@font-size-xl: @font-size * 2; // 字号-二级字号
@font-size-xxl: @font-size * 3.6; // 字号-一级字号

// 响应式断点
@screen-sm: 768px;
@screen-md: 992px;
@screen-lg: 1200px;
@screen-xl: 1400px;

// 动画
@anim-time-fn-easing: cubic-bezier(0.38, 0, 0.24, 1);
@anim-time-fn-ease-out: cubic-bezier(0, 0, 0.15, 1);
@anim-time-fn-ease-in: cubic-bezier(0.82, 0, 1, 0.9);
@anim-duration-base: 0.2s;
@anim-duration-moderate: 0.24s;
@anim-duration-slow: 0.28s;
