@use "sass:list";

.flex {
  &-row {
    display: flex;
    flex-direction: row;
  }
  &-column {
    display: flex;
    flex-direction: column;
  }
}

@each $type, $colors in $color-types {
  .text-#{$type} {
    color: list.nth($colors, 1);
  }
}

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

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

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

.custom {
  &-page {
    display: flex;
    justify-content: center;

    .el-pagination {
      font-size: 24px;
    }

    .el-pagination .btn-next.is-active,
    .el-pagination .btn-prev.is-active,
    .el-pagination .el-pager li.is-active {
      color: $color-primary !important;
    }

    .el-pagination .btn-next,
    .el-pagination .btn-prev,
    .el-pagination .el-pager li {
      margin: 0 12px !important;
      font-size: 24px;
      color: #999;
    }

    .el-pagination .btn-next,
    .el-pagination .btn-prev {
      // border: 1px dashed #ddd;
      &:hover {
        color: #000 !important;
      }
    }

    .el-pagination .btn-next .el-icon,
    .el-pagination .btn-prev .el-icon {
      font-size: 32px !important;
      font-weight: 500 !important;
    }

    .el-pagination .el-pager li {
      &:hover {
        font-weight: 500;
        color: $color-primary !important;
      }
    }

    &-jumper {
      margin-left: 40px;
      display: flex;
      flex-direction: row;
      align-items: center;

      span {
        font-size: 24px;
        color: #999;
      }

      .el-input {
        width: 50px !important;
        margin: 0 20px;
        font-size: 24px;
      }
    }
  }
}