@use "@styles/mixin" as *;

.body {
  gap: 16px;
  overflow-y: auto;
  @include flexCol;

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

  .wrapper {
    gap: 8px;
    overflow-y: auto;
    @include flexCol;

    .header {
      display: grid;
      grid-template-columns:
        minmax(auto, 200px) minmax(auto, 200px) minmax(auto, 200px)
        minmax(auto, 100px) minmax(auto, 120px);
      gap: 8px;
      padding: 0 12px;

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

        &:last-child {
          text-align: end;
        }
      }
    }

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

    & > .footer {
      height: 32px;
      display: grid;
      align-items: center;
      grid-template-columns: 150px 1fr 150px;
    }
  }
}
