@mixin classical-light {
  --t-color-primary: #596a80;
  --el-color-primary: #596a80;
  --el-color-primary-light-3: #{mix(rgba(0, 0, 0, 0), #596a80, 30%)};
  --el-color-primary-light-5: #{mix(rgba(0, 0, 0, 0), #596a80, 50%)};
  --el-color-primary-light-7: #{mix(rgba(0, 0, 0, 0), #596a80, 70%)};
  --el-color-primary-light-8: #{mix(rgba(0, 0, 0, 0), #596a80, 80%)};
  --el-color-primary-light-9: #{mix(rgba(0, 0, 0, 0), #596a80, 90%)};
  --t-bg-hover: #f3f5f7;
  --t-bg-focus: #bdc3cc;
  --t-bg-active: #d7dbe1;
  --t-bg-disabled: #f5f6f7;
  --t-btn-hover: #6b7b8d;
  --t-btn-focus: #465a72;
  --t-btn-active: #596a80;
  // --t-btn-disabled: #9ba6b3;
  // --t-bg-hover-1: #e4e5eb;
  // --t-bg-active-1: #f1f4f8;
  --sa-background-hex-hover: #f5f6f7;
  --sa-background-hex-active: #d7dbe1;
  --t-bg-color: #eef1f6;
  --t-bg-app: #e4e8ec;
}

@mixin classical-dark {
  --t-color-primary: #596a80;
  --el-color-primary: #596a80;
  --el-color-primary-light-3: #{mix(rgba(0, 0, 0, 0), #596a80, 30%)};
  --el-color-primary-light-5: #{mix(rgba(0, 0, 0, 0), #596a80, 50%)};
  --el-color-primary-light-7: #{mix(rgba(0, 0, 0, 0), #596a80, 70%)};
  --el-color-primary-light-8: #{mix(rgba(0, 0, 0, 0), #596a80, 80%)};
  --el-color-primary-light-9: #{mix(rgba(0, 0, 0, 0), #596a80, 90%)};
  --t-bg-hover: #303234;
  --t-bg-focus: #323538;
  --t-bg-active: #34373b;
  --t-bg-disabled: #2f3031;
  --t-btn-hover: #6b7b8d;
  --t-btn-focus: #465a72;
  --t-btn-active: #596a80;
  // --t-btn-disabled: #9ba6b3;
  // --t-bg-hover-1: #18191b;
  // --t-bg-active-1: #303540;
  --sa-background-hex-hover: #303133;
  --sa-background-hex-active: #373a3f;
  --t-bg-color: #1d222b;
  --t-bg-app: #020b1a;
}
