@import "~@/assets/style/scrollbar.less";

.area {
  &>div {
    margin-top: 16px;
  }

  .title {
    font-size  : 18px;
    font-weight: 400;
    color      : #7b8197;
    text-align : left;
  }

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

    &>div {
      display       : flex;
      align-items   : flex-start;
      flex-direction: column;

      .title {
        margin-bottom: 6px;
      }

      .count {
        font-size  : 44px;
        font-weight: 700;
        line-height: 44px;
      }

      .unit {
        font-size  : 18px;
        font-weight: 400;
      }
    }
  }

  .rankList {
    ul {
      height    : 352px;
      overflow-y: scroll;
      .scrollbar();
    }

    ul.list {
      li {
        display        : flex;
        align-items    : center;
        justify-content: space-between;
        font-size      : 18px;
        line-height    : 18px;
        padding-right  : 20px;
        margin-bottom  : 26px;
        cursor         : pointer;

        &:hover {
          opacity: 0.8;
        }

        &:first-child {
          margin-top: 13px;
        }

        &:last-child {
          margin-bottom: 13px;
        }

        .index {
          height       : 24px;
          min-width    : 25px;
          display      : inline-block;
          border-radius: 8px;
          background   : #6e7389;
          line-height  : 26px;
          font-weight  : 700;
          padding      : 0 7px;
          flex         : none;
          user-select  : none;
        }

        .name {
          width     : calc(100% - 114px);
          text-align: left;
          padding   : 0 20px;
          flex      : auto;
        }

        .count {
          font-weight: 700;
          text-align : right;
          flex       : none;
        }

        &.topOcc {
          .index {
            background: #f65252;
          }

          .count {
            color: #f65252;
          }
        }

        &.topSpeed {
          .index {
            background: #44a1f8;
          }

          .count {
            color: #44a1f8;
          }
        }
      }
    }
  }

  .chart {
    margin: 16px 0;
    height: 165px;
    width : 100%;
  }
}