ilios/frontend

@use "../ilios-common/colors" as c;
@use "../ilios-common/constants";
@use "../ilios-common/mixins" as m;

.application-wrapper {
  display: grid;
  grid-template-areas:
    "logo header"
    "main main"
    "footer footer";
  grid-template-rows: 42px auto 20px;
  height: 100vh;
  width: 100%;
  background-color: c.$white;

  & > .ilios-logo {
    grid-area: logo;
  }

  & > header {
    grid-area: header;
  }

  & > nav {
    display: none;
  }

  & > main {
    background-color: c.$white;
    grid-area: main;
  }

  & > footer {
    grid-area: footer;
  }

  &.show-navigation {
    grid-template-areas:
      "logo header"
      "nav nav"
      "main main"
      "footer footer";
    grid-template-rows: auto auto 1fr 20px;

    @include m.for-tablet-and-up {
      grid-template-rows: 42px auto 1fr 20px;
    }

    @include m.for-laptop-and-up {
      grid-template-areas:
        "logo header"
        "logo main"
        "nav main"
        "footer footer";
      grid-template-columns: auto 1fr;
      grid-template-rows: 42px calc(42px * constants.$golden-ratio-small) auto 20px;
    }

    @include m.for-desktop-and-up {
      grid-template-areas:
        "logo header  header"
        "logo    main main"
        "nav    main main"
        "footer footer  footer";
      grid-template-columns: auto 1fr 1fr;
      grid-template-rows: 42px calc(42px * constants.$golden-ratio-large) auto 20px;
    }

    & > nav {
      display: grid;
      grid-area: nav;
      @include m.for-laptop-and-up {
        display: block;
        z-index: 5;
      }
    }
  }
}