.el-statistic {
  --el-statistic-content-font-size: 28px;
}

.statistic-card {
  padding: 0;
  border-radius: $br-sm;
  background-color: $color-gray-1;
  .statistic-card__main {
    box-sizing: border-box;
    padding: $space-b1;
  }

  & > header {
    position: relative;
    padding: $space-b2 $space-b3;
    border-bottom: 1px solid $color-gray-3;

    .lj-define-header {
      padding-bottom: 0;
    }

    .control {
      position: absolute;
      right: $space-b3;
      top: 0;
      bottom: 0;
      margin: auto;

      .refresh-btn {
        .iconfont {
          font-size: 12px;
        }
      }
    }
  }

  .statistic-item {
    padding: $space-b2;
    border-radius: $br-md;
    transition: all 0.2s ease-in-out;

    &:hover {
      background-color: $color-gray-2;

      .statistic-footer {
        color: $color-primary-300;
      }
    }
  }
}

.statistic-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  font-size: 12px;
  color: $color-text-disable;
  margin-top: $space-b2;
  cursor: pointer;

  &:hover {
    color: $color-primary-500 !important;
  }
}

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

.statistic-footer .footer-item span:last-child {
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
}

.empty {
  margin: auto;
  padding: $space-b3 $space-b4;
  min-height: 126px - $space-b1 * 2;
  text-align: center;
  box-sizing: border-box;
  cursor: pointer;
}
