@use "@styles/mixin" as *;

@mixin mainFlex {
  gap: 16px;
  @include flexCol;
}

.body {
  background-color: #f8f8f8;
  gap: 16px;
  height: calc(100vh - 74px);
  overflow-y: auto;
  padding-bottom: 0px !important;
  @include mdPadding;
  @include flexCol;

  & > .header {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    align-items: center;

    & > h2 {
      font-family: "MS Sans Serif Bold";
      font-size: 16px;
      font-weight: 400;
      line-height: 36px;
      text-transform: uppercase;
    }

    & > .btnGroup {
      display: flex;
      align-items: center;
      gap: 4px;
    }
  }

  & > .wrapper {
    overflow-y: auto;
    display: grid;
    grid-template-rows: auto 1fr auto;

    .header {
      display: grid;
      grid-template-columns:
        minmax(180px, 200px) minmax(60px, 200px) minmax(0px, 200px)
        minmax(20px, 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;
    }

    .border {
      width: 100%;
      height: 1px;
      background-color: black;
      margin-bottom: 8px;
    }

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