/**
 * 全局样式
 */
@import './variables.scss';

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  font-family: $font-family;
  font-size: $font-size-base;
  color: $text-primary;
  background-color: $bg-color;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#app {
  width: 100%;
  height: 100%;
}

a {
  color: $primary-color;
  text-decoration: none;
  transition: $transition-base;

  &:hover {
    color: darken($primary-color, 10%);
  }
}

// 滚动条样式
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-thumb {
  background-color: $text-placeholder;
  border-radius: $border-radius-base;

  &:hover {
    background-color: $text-secondary;
  }
}

::-webkit-scrollbar-track {
  background-color: $border-light;
}

// 卡片样式
.el-card {
  border-radius: $border-radius-large;
  box-shadow: $box-shadow-base;
  border: 1px solid $border-base;

  .el-card__header {
    border-bottom: 1px solid $border-base;
    padding: $spacing-medium $spacing-large;
    font-weight: 600;
  }

  .el-card__body {
    padding: $spacing-large;
  }
}

// 表格样式
.el-table {
  .el-table__header-wrapper {
    th {
      background-color: $bg-color-page;
      color: $text-regular;
      font-weight: 600;
    }
  }

  .el-table__body-wrapper {
    .el-table__row {
      &:hover > td {
        background-color: $border-lighter;
      }
    }
  }
}

// 按钮样式
.el-button {
  &.el-button--primary {
    background-color: $primary-color;
    border-color: $primary-color;

    &:hover {
      background-color: darken($primary-color, 10%);
      border-color: darken($primary-color, 10%);
    }
  }
}

// 对话框样式
.el-dialog {
  border-radius: $border-radius-large;

  .el-dialog__header {
    border-bottom: 1px solid $border-base;
    padding: $spacing-medium $spacing-large;
  }

  .el-dialog__body {
    padding: $spacing-large;
  }

  .el-dialog__footer {
    border-top: 1px solid $border-base;
    padding: $spacing-medium $spacing-large;
  }
}

// 表单样式
.el-form {
  .el-form-item__label {
    color: $text-regular;
    font-weight: 500;
  }

  .el-input__inner,
  .el-textarea__inner {
    border-color: $border-base;

    &:focus {
      border-color: $primary-color;
    }
  }
}

// 消息提示样式
.el-message {
  border-radius: $border-radius-base;
  box-shadow: $box-shadow-dark;
}

// 标签样式
.el-tag {
  border-radius: $border-radius-small;
}

// 分页样式
.el-pagination {
  .el-pager li {
    &.active {
      background-color: $primary-color;
    }
  }

  .btn-prev,
  .btn-next {
    &:disabled {
      background-color: $bg-color-page;
    }
  }
}

// 工具类
.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.mt-10 {
  margin-top: 10px;
}

.mt-20 {
  margin-top: 20px;
}

.mb-10 {
  margin-bottom: 10px;
}

.mb-20 {
  margin-bottom: 20px;
}

.ml-10 {
  margin-left: 10px;
}

.mr-10 {
  margin-right: 10px;
}

.p-10 {
  padding: 10px;
}

.p-20 {
  padding: 20px;
}

.flex {
  display: flex;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.flex-1 {
  flex: 1;
}

.w-full {
  width: 100%;
}

.h-full {
  height: 100%;
}

// 加载动画
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.loading {
  display: inline-block;
  animation: rotate 1s linear infinite;
}
