@use "@styles/mixin" as *;

.body {
  max-height: calc(100vh - 74px);
  background-color: #f8f8f8;
  @include mdPadding;

  & > .wrapper {
    gap: 16px;
    height: 100%;
    @include flexCol;

    .header {
      justify-content: space-between;
      @include flexAlignCenter;

      h3 {
        font-size: 20px;
        font-weight: 400;
        line-height: 30px;
        font-family: "MS Sans Serif Bold";
        text-transform: uppercase;
      }

      .btnGroup {
        gap: 4px;
        @include flexAlignCenter;
      }
    }

    .rankList {
      gap: 8px;
      height: 100%;
      overflow-x: auto;
      position: relative;
      @include flexCol;

      &::after {
        content: "";
        position: fixed;
        bottom: 0;
        width: 100%;
        height: 112px;
        background: linear-gradient(
          180deg,
          rgba(248, 248, 248, 0) 0%,
          rgba(248, 248, 248, 0.8) 20.61%,
          #f8f8f8 44.74%
        );
      }

      .rankHeader {
        justify-content: space-between;
        padding: 0 12px;
        @include flexAlignCenter;

        span {
          font-size: 12px;
          line-height: 18px;
          font-family: "Saira";
          font-weight: 500;
          letter-spacing: 0.15px;
        }
      }

      .rankPanel {
        gap: 8px;
        height: 100%;
        padding-right: 5px;
        overflow-y: auto;
        @include flexCol;
      }
    }
  }
}
