.el-dialog {
  border: solid 1px #666666;
}

/* 平滑过渡效果 */
html,
body {
  transition:
    background-color 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease;
}

@font-face {
  font-family: LVGL_Icons;
  src: url(./assets/FontAwesome5-Solid+Brands+Regular.woff) format('woff');
}

@font-face {
  font-family: montserratMedium;
  src: url(./assets/montserratMedium.ttf) format('ttf');
}

.lvgl-icon {
  font-family: LVGL_Icons;
}

.el-tabs {
  --el-tabs-header-height: 32px !important;
  &.el-tabs--border-card .el-tabs__item.is-active, .el-tabs__item:hover {
    color: var(--text-active) !important;
  }
  .el-tabs__item.is-active, .el-tabs__item:hover {
    color: var(--text-active);
  }
  .el-tabs__nav-next, .el-tabs__nav-prev {
    line-height: 32px;
  }
  .el-tabs__active-bar {
    background-color: transparent;
    &::after {
      content: "";
      display: block;
      height: 2px;
      width: 16px;
      background: var(--text-secondary);
      position: absolute;
      left: 50%;
      bottom: 0;
      transform: translateX(-50%);
    }
  }
  .el-tabs__nav-wrap:after {
    height: 1px;
  }
  .el-tabs__item {
    height: 34px;
  }
}

.el-collapse {
  --el-collapse-border-color: var(--el-border-color-lighter);
  --el-collapse-header-height: 28px !important;
  --el-collapse-header-bg-color: var(--el-fill-color-blank);
  --el-collapse-header-text-color: var(--el-text-color-primary);
  --el-collapse-header-font-size: 11px !important;
  --el-collapse-content-bg-color: var(--el-fill-color-blank);
  --el-collapse-content-font-size: 12px;
  --el-collapse-content-text-color: var(--el-text-color-primary);
  border-bottom: 1px solid var(--el-collapse-border-color);
  border-top: 1px solid var(--el-collapse-border-color);
}

.el-tabs--border-card {
  border: none !important;
}

.el-textarea {
  textarea {
    min-height: 32px !important;
    line-height: 22px;
  }
}

[data-state="hover"], [data-state="drag"] {
  background: var(--accent-blue);
}

@keyframes h-scroll {
    0% {
        margin-left: 0;
        margin-right: 100%;
        transform: translateX(50%);
    }

    10% {
        margin-left: 0;
        margin-right: 100%;
        transform: translateX(50%);
    }

    90% {
        margin-left: 100%;
        margin-right: 0%;
        transform: translateX(-50%);
    }

    100% {
        margin-left: 100%;
        margin-right: 0%;
        transform: translateX(-50%);
    }
}

@keyframes v-scroll {
    0% {
        margin-top: 0;
        margin-bottom: 100%;
        transform: translateY(50%);
    }

    10% {
        margin-top: 0;
        margin-bottom: 100%;
        transform: translateY(50%);
    }

    90% {
        margin-top: 100%;
        margin-bottom: 0%;
        transform: translateY(-50%);
    }

    100% {
        margin-top: 100%;
        margin-bottom: 0%;
        transform: translateY(-50%);
    }
}