/**
 *该CSS文件用于定义全局公用样式
 */

/*字体大小*/
:root {
  --text-12: 12px;
  --text-14: 14px;
  --text-16: 16px;
  --text-18: 18px;
  --text-20: 20px;
  --text-22: 22px;
  --text-24: 24px;
  --text-26: 26px;
  --text-28: 28px;
  --text-32: 32px;
  --text-36: 36px;
  --text-38: 38px;
  --text-48: 48px;
}

.text-12 {
  font-size: var(--text-12);
}

.text-14 {
  font-size: var(--text-14);
}

.text-16 {
  font-size: var(--text-16);
}

.text-18 {
  font-size: var(--text-18);
}

.text-20 {
  font-size: var(--text-20);
}

.text-22 {
  font-size: var(--text-22);
}

.text-24 {
  font-size: var(--text-24);
}

.text-26 {
  font-size: var(--text-26);
}

.text-28 {
  font-size: var(--text-28);
}

.text-32 {
  font-size: var(--text-32);
}

.text-36 {
  font-size: var(--text-36);
}

.text-38 {
  font-size: var(--text-38);
}

.text-48 {
  font-size: var(--text-48);
}

/*字体颜色*/
.text-color1 {
  color: var(--text-color1)
}

.text-color2 {
  color: var(--text-color2);
}

.text-color3 {
  color: var(--text-color3);
}

.text-color4 {
  color: var(--text-color4);
}

.text-color5 {
  color: var(--text-color5);
}

.text-color6 {
  color: var(--text-color6);
}

.text-color7 {
  color: var(--text-color7);
}

.text-color8 {
  color: var(--text-color8);
}

.text-color9 {
  color: var(--text-color9);
}

.text-color10 {
  color: var(--text-color10);
}

.text-color11 {
  color: var(--text-color11);
}

.text-color12 {
  color: var(--text-color12);
}

.text-color13 {
  color: var(--text-color13);
}

/*背景颜色*/
.bg-color1 {
  background-color: var(--bg-color1);
}

.bg-color2 {
  background-color: var(--bg-color2);
}

.bg-color3 {
  background-color: var(--bg-color3);
}

.bg-color4 {
  background-color: var(--bg-color4);
}

.bg-color5 {
  background-color: var(--bg-color5);
}

.bg-color6 {
  background-color: var(--bg-color6);
}

.bg-color7 {
  background-color: var(--bg-color7);
}

.bg-color8 {
  background-color: var(--bg-color8);
}

.bg-color9 {
  background-color: var(--bg-color9);
}

.bg-color10 {
  background-color: var(--bg-color10);
}

.bg-color12 {
  background-color: var(--bg-color12);
}

.bg-color13 {
  background-color: var(--bg-color13);
}

.bg-color14 {
  background-color: var(--bg-color14);
}

.bg-color15 {
  background-color: var(--bg-color15);
}

.bg-color16 {
  background-color: var(--bg-color16);
}

.bg-color17 {
  background-color: var(--bg-color17);
}

.bg-color18 {
  background-color: var(--bg-color18);
}

.bg-color20 {
  background-color: var(--bg-color20);
}

.bg-color21 {
  background-color: var(--bg-color21);
}

.bg-color22 {
  background-color: var(--bg-color22);
}

.bg-color23 {
  background-color: var(--bg-color23);
}

.bg-color24 {
  background-color: var(--bg-color24);
}

.bg-color25 {
  background-color: var(--bg-color25);
}

.bg-color26 {
  background-color: var(--bg-color26);
}

.bg-color27 {
  background-color: var(--bg-color27);
}

/*边框颜色*/
.border-color1 {
  border-color: var(--border-color1);
}

.border-color2 {
  border-color: var(--border-color2);
}

.border-color3 {
  border-color: var(--border-color3);
}

.border-color4 {
  border-color: var(--border-color4);
}

.border-color5 {
  border-color: var(--border-color5);
}

.border-color6 {
  border-color: var(--border-color6);
}

.border-color7 {
  border-color: var(--border-color7);
}

.border-color8 {
  border-color: var(--border-color8);
}

.border-color9 {
  border-color: var(--border-color9);
}

.border-color10 {
  border-color: var(--border-color10);
}

.border {
  border: 1px solid var(--border-color3);
  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.border-top {
  border-top: 1px solid var(--border-color3);
}

.border-left {
  border-left: 1px solid var(--border-color3);
}

.border-right {
  border-right: 1px solid var(--border-color3);
}

.border-bottom {
  border-bottom: 1px solid var(--border-color3);
}

/*透明度*/
:root {
  --opacity-0: 0;
  --opacity-10: 0.1;
  --opacity-20: 0.2;
  --opacity-30: 0.3;
  --opacity-40: 0.4;
  --opacity-50: 0.5;
  --opacity-60: 0.6;
  --opacity-70: 0.7;
  --opacity-80: 0.8;
  --opacity-90: 0.9;
  --opacity-100: 1;
}

.opacity-0 {
  opacity: var(--opacity-0);
}

.opacity-10 {
  opacity: var(--opacity-10);
}

.opacity-20 {
  opacity: var(--opacity-20);
}

.opacity-30 {
  opacity: var(--opacity-30);
}

.opacity-40 {
  opacity: var(--opacity-40);
}

.opacity-50 {
  opacity: var(--opacity-50);
}

.opacity-60 {
  opacity: var(--opacity-60);
}

.opacity-70 {
  opacity: var(--opacity-70);
}

.opacity-80 {
  opacity: var(--opacity-80);
}

.opacity-90 {
  opacity: var(--opacity-90);
}

.opacity-100 {
  opacity: var(--opacity-100);
}

/*textarea*/
textarea {
  background-color: var(--bg-color10);
  color: var(--text-color1);
  border: 1px solid var(--border-color3);
}

textarea:hover, textarea:focus {
  border: 1px solid var(--border-color5);
}

/*文本*/
.text-ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/*超链接*/
a {
  color: var(--text-color6);
}

a:hover {
  color: var(--text-color9);
}

/*el-upload*/
.el-upload-dragger .upload-demo-info {
  position: relative;
  padding-bottom: 15px;
}

.el-upload-dragger .upload-demo-info::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.btn {
  white-space: nowrap;
  border-radius: .25rem;
  font-size: 1rem;
  padding: .25rem;
  display: inline-block;
  user-select: none;
  text-align: center;
  vertical-align: middle;
  line-height: 1.5;
  transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.btn-sm {
  font-size: .875rem;
  padding: .25rem .5rem;
}

.btn:not(:disabled):not(.disabled) {
  cursor: pointer;
}

.text-icon-light {
  color: var(--text-color1);
  background-color: var(--bg-color1);
}

.text-icon-light.active, .text-icon-light:hover {
  background-color: var(--bg-color5);
  color: var(--text-color1);
}

.w-0 {
  width: 0;
}

/*根据图标大小展示不同的高度*/
:root {
  --header-height: 40px;                /* 标题栏高度 */
  --header-icon: 18px;                  /* 标题栏字体图标大小 */
  --header-icon-img: 20px;             /* 标题栏图片图标大小 */
  --right-tab-header-title: 14px;       /* 工作空间侧边栏标题文字大小 */
  --toolbar-mode-height: 59px;          /* 命令为仅有图标的命令栏高度 */
  --toolbar-height: 88px;               /* 命令为图标文字的命令栏高度 */
  --toolbar-content-mode-height: 36px;  /* 命令为仅有图标的命令内容高度 */
  --toolbar-content-height: 65px;       /* 命令为图标文字的命令内容高度 */
  --tool-icon-size: 22px;               /* 命令图标大小 */
  --right-navigation-wight: 30px;       /* 标题栏面板距离右侧宽度(不遮挡右侧边栏) */
  --right-navigation-wrap: 28px;        /* 右侧边栏宽度 */
}

:root.medium {
  --header-height: 45px;
  --header-icon: 22px;
  --header-icon-img: 28px;
  --right-tab-header-title: 16px;
  --toolbar-mode-height: 68px;
  --toolbar-height: 104px;
  --toolbar-content-mode-height: 44px;
  --toolbar-content-height: 80px;
  --dropdown-btn: 16px;
  --tool-name-size: 14px;                /* 命令文字大小 */
  --tool-icon-size: 30px;
  --right-navigation-wight: 34px;
  --right-navigation-wrap: 32px;
}

:root.big {
  --header-height: 50px;
  --header-icon: 28px;
  --header-icon-img: 36px;
  --right-tab-header-title: 18px;
  --toolbar-mode-height: 74px;
  --toolbar-height: 124px;
  --toolbar-content-mode-height: 50px;
  --toolbar-content-height: 98px;
  --dropdown-btn: 20px;
  --tool-name-size: 18px;
  --tool-icon-size: 36px;
  --right-navigation-wight: 40px;
  --right-navigation-wrap: 38px;
}

.right-tab-header-title {
  font-size: var(--right-tab-header-title);
}

.dropdown-btn {
  font-size: var(--dropdown-btn);
}