@use '../base/mixins' as *;
@use '../base/variables' as var;

body {
  padding: 0;
  margin: 0;
  @include font-family;
  color: var(--dark-purple);
  height: 100vh;
  overflow: hidden;
}

.App {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr;
  background: var(--white);
  height: 100vh;
  .app-content-layout {
    overflow: auto;
    width: 100vw;
    grid-template-rows: auto 1fr;
    .App-content {
      padding: 0 20px 20px 20px;
      position: relative;

      &.has-page-footer {
        padding-bottom: 88px; // 88px is the height of the PageFooter + 20px of padding
      }
    }
  }

  @media only screen and (min-width: var.$breakpoint-md) {
    grid-template-columns: 72px 1fr;
    grid-template-rows: 1fr;
    transition: all 0.25s ease-in-out;
    .app-content-layout {
      display: grid;
      grid-template-rows: 72px 1fr;
      width: calc(100vw - 72px);
    }
  }
}