// #APP
/*
 * App layout using CSS Grid Layout
 */

.o-app {
  height: 100%;

  display: grid;
  grid-template-rows: 54px 1fr 54px;
  grid-template-columns: 100px 1fr 100px;
  grid-template-areas:
    'icon-left header icon-right'
    'content content content'
    'footer footer footer';

  background-color: $background-color;

  @media screen and (min-width: 426px) {
    align-self: center;
    width: 375px;
    height: 667px;

    flex: 0 0 375px;
  }
}

.o-app__header {
  grid-area: header;
  display: flex;
  align-items: center;
  justify-content: center;
}

.o-app__top-left {
  grid-area: icon-left;
  margin-left: $base-spacing-unit;
  justify-content: flex-start;
}

.o-app__top-right {
  grid-area: icon-right;
  margin-right: $base-spacing-unit;
  justify-content: flex-end;
}

.o-app__top-left, .o-app__top-right {
  display: flex;
  align-items: center;
}

.o-app__nav {
  grid-area: nav;
}

.o-app__content {
  grid-row: 1 / 4;
  grid-column: 1 / 4;

  overflow-y: auto;
}

.o-app__footer {
  grid-area: footer;
  z-index: 1;
}
