@use "../mixins/namespace" as *;

// 布局主题变量
:root {
  --#{$teek-namespace}-radius: 0.75rem;

  // 顶部栏
  --#{$teek-namespace}-layout-header-height: 55px;
  --#{$teek-namespace}-layout-header-bg-color: var(--#{$teek-namespace}-bg-color-page);
  --#{$teek-namespace}-layout-header-bg-hover-color: var(--#{$teek-namespace}-gray-300);
  --#{$teek-namespace}-layout-header-text-color: var(--#{$teek-namespace}-text-gray-600);
  --#{$teek-namespace}-layout-header-icon-size: 22px;
  --#{$teek-namespace}-layout-header-line: none;

  // 顶部左侧面包屑
  --#{$teek-namespace}-layout-header-breadcrumb-link-color: var(--#{$teek-namespace}-text-gray-500);
  --#{$teek-namespace}-layout-header-breadcrumb-text-color: var(--#{$teek-namespace}-text-gray-700);
  --#{$teek-namespace}-layout-logo-title-color: var(--#{$teek-namespace}-text-gray-800);

  // 页签栏
  --#{$teek-namespace}-layout-tab-bg-color: var(--#{$teek-namespace}-bg-color-page);
  --#{$teek-namespace}-layout-tab-item-bg-color: var(--#{$teek-namespace}-bg-color);
  --#{$teek-namespace}-layout-tab-item-border-color: var(--#{$teek-namespace}-border-color);
  --#{$teek-namespace}-layout-tab-height: 38px;
  --#{$teek-namespace}-layout-tab-text-color: var(--#{$teek-namespace}-text-gray-600);
  --#{$teek-namespace}-layout-tab-line: none;
  --#{$teek-namespace}-layout-tab-text-size: 13px;
  --#{$teek-namespace}-layout-tab-icon-size: 14px;
  --#{$teek-namespace}-layout-tab-dot-size: 11px;

  // 侧边栏
  --#{$teek-namespace}-layout-expand-aside-width: 240px;
  --#{$teek-namespace}-layout-collapse-aside-width: 64px;
  --#{$teek-namespace}-layout-aside-bg-color: var(--#{$teek-namespace}-bg-color);
  --#{$teek-namespace}-layout-aside-bg-active-color: var(--#{$el-namespace}-color-primary-light-9);
  --#{$teek-namespace}-layout-aside-bg-hover-color: var(--#{$el-namespace}-color-primary-light-9);
  --#{$teek-namespace}-layout-aside-left-bg-color: var(--#{$teek-namespace}-color-primary);
  --#{$teek-namespace}-layout-aside-text-color: var(--#{$teek-namespace}-text-gray-800);
  --#{$teek-namespace}-layout-aside-text-active-color: var(--#{$teek-namespace}-color-primary);
  --#{$teek-namespace}-layout-aside-text-hover-color: var(--#{$teek-namespace}-color-primary);
  --#{$teek-namespace}-layout-aside-icon-color: var(--#{$teek-namespace}-text-gray-700);
  --#{$teek-namespace}-layout-aside-icon-active-color: var(--#{$teek-namespace}-color-primary);
  --#{$teek-namespace}-layout-aside-line: 1px solid var(--#{$teek-namespace}-border-color);
  --#{$teek-namespace}-layout-aside-text-active-weight: 700;
  --#{$teek-namespace}-layout-aside-text-size: 14px;
  --#{$teek-namespace}-layout-aside-icon-size: 20px;
  --#{$teek-namespace}-layout-aside-arrow-size: 13px;
  --#{$teek-namespace}-layout-aside-item-height: 46px;
  --#{$teek-namespace}-layout-aside-sub-item-height: 40px;

  // columns 布局侧边栏
  --#{$teek-namespace}-layout-columns-aside-width: 72px;
  --#{$teek-namespace}-layout-columns-aside-item-height: 72px;

  // iframe 嵌入布局侧边栏
  --#{$teek-namespace}-layout-iframe-aside-line: 1px solid var(--#{$teek-namespace}-border-color);

  // 内容区
  --#{$teek-namespace}-layout-page-bg-color: var(--#{$teek-namespace}-bg-color-page);
}

// 深色布局主题变量
:root.dark {
  // 顶部栏
  --#{$teek-namespace}-layout-header-text-color: var(--#{$teek-namespace}-text-gray-800);

  // 顶部左侧面包屑
  --#{$teek-namespace}-layout-header-breadcrumb-link-color: var(--#{$teek-namespace}-text-gray-600);
  --#{$teek-namespace}-layout-header-breadcrumb-text-color: var(--#{$teek-namespace}-text-gray-800);

  // 页签栏
  --#{$teek-namespace}-layout-tab-text-color: var(--#{$teek-namespace}-text-gray-800);

  // 侧边栏
  --#{$teek-namespace}-layout-aside-bg-active-color: var(--#{$teek-namespace}-gray-200);
  --#{$teek-namespace}-layout-aside-bg-hover-color: var(--#{$teek-namespace}-gray-200);
  --#{$teek-namespace}-layout-aside-text-color: var(--#{$el-namespace}-text-color-regular);
  --#{$teek-namespace}-layout-aside-icon-color: var(--#{$el-namespace}-text-color-regular);
  --#{$teek-namespace}-layout-aside-text-active-weight: 400;
}
