.sui-l-app-layout {
  $this: &;

  display: grid;
  grid-template:
    "first-level-nav top-bar" auto
    "first-level-nav sub-app" 1fr
    / auto 1fr;
  display: -ms-grid; /* stylelint-disable-line */
  -ms-grid-rows: auto 1fr;
  -ms-grid-columns: auto 1fr;
  height: 100vh;
  width: 100%;
  background-color: $sui-color-app-background;

  @include suiMediaMax($sui-breakpoint-sm) {
    grid-template:
      "top-bar top-bar" auto
      "first-level-nav first-level-nav" auto
      "sub-app sub-app" 1fr
      / 1fr;
  }

  &__subapp {
    display: grid;
    grid-template:
      "second-level-nav main" 1fr
      / auto 1fr;
    grid-area: sub-app;
    display: -ms-grid; /* stylelint-disable-line */
    -ms-grid-rows: 1fr;
    -ms-grid-columns: auto 1fr;
    -ms-grid-row: 2;
    -ms-grid-column: 2;
    min-width: 0;
  }

  &__main {
    grid-area: main;
    -ms-grid-row: 1;
    -ms-grid-column: 2;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: $sui-color-brand-denim-100;
  }

  &__message {
    flex: none;
    text-align: center;
    color: $sui-color-text;
    background: $sui-color-brand-denim-300;
    font-family: $sui-font-family-secondary;
    font-size: $sui-font-size-xs;
    font-weight: bold;
    padding: $sui-space-xxs $sui-space-xs $sui-space-xxs*0.5 $sui-space-xs;
    width: 100%;
    border-bottom: $sui-size-border solid rgba(0, 0, 0, .1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: top .4s, left .4s;

    a {
      color: inherit;
    }

    &.as--primary {
      color: contrast($sui-color-primary);
      background: $sui-color-primary;
    }

    &.as--success {
      color: contrast($sui-color-success);
      background: $sui-color-success;
    }

    &.as--warning {
      color: contrast($sui-color-warning);
      background: $sui-color-warning;
    }

    &.as--danger {
      color: contrast($sui-color-danger);
      background: $sui-color-danger;
    }
  }

  &__page-topbar {
    z-index: $sui-z-index-o-page-topbar;
    position: relative;
    background: $sui-color-brand-denim-100;
    padding: 0 0 $sui-space-sm 0;
    border-bottom: $sui-size-border solid transparent;
    transition: margin 0.2s $sui-curve-easeInOutCubic, border 0.3s $sui-curve-easeInOutCubic;
    overflow: hidden;
    margin-top: 0;
    will-change: margin;

    &:not(.as--fixed) > * {
      overflow: initial;
    }

    & > * {
      overflow: hidden;
    }

    &.as--bordered {
      border-bottom-color: rgba(0, 0, 0, 0.2);
    }

    &-secondary {
      &::after {
        content: '';
        display: block;
        height: $sui-space-md;
        transition: 0.2s $sui-curve-easeInOutCubic;
        will-change: height;
      }
    }

    &-secondary,
    &-primary {
      transition: transform 0.4s $sui-curve-easeInOutCubic;
    }

    &.as--fixed {
      border-bottom-color: rgba(0, 0, 0, 0.2);
      margin-top: -$sui-space-md;

      #{$this}__page-topbar-secondary {
        &::after {
          height: $sui-space-xxs;
        }
      }
    }

    &-title {
      font-size: $sui-font-size-lg;
      transition: all 0.4s $sui-curve-easeInOutCubic;
      transform-origin: top left;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      max-width: 100%;
    }

    &-actions {
      transition: all 0.4s $sui-curve-easeInOutCubic;
      transform-origin: top right;
    }
  }

  &__page {
    min-width: 0;
    position: relative;
    flex-grow: 1;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    transition: .4s;
    background: $sui-color-brand-denim-100;
    overflow: hidden;
  }

  &__page-scroll {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow-y: scroll;
    display: flex;
    flex-direction: column;

    &.as--no-scroll {
      overflow: hidden;
    }

    // Add padding at the bottom of page-scroll if page-popin is open
    .sui-o-page-popin.as--open ~ &::after {
      content: '';
      display: block;
      height: $sui-size-lg;
    }
  }

  &__page-footer {
    position: relative;
    background: $sui-color-brand-denim-100;
    z-index: 1;
    margin-top: 0;
    overflow-y: scroll;

    > div {
      border-top: $sui-size-border solid rgba(0, 0, 0, 0.2);
    }
  }

  &__main.as--bg-soft {
    #{$this}__page,
    #{$this}__page-topbar,
    #{$this}__page-footer {
      background: $sui-color-app-background;
    }
  }

  &.as--focus-mode {
    #{$this}__main {
      z-index: $sui-z-index-l-focus-mode;
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background: rgba(255, 255, 255, .95);
    }

    #{$this}__page,
    #{$this}__page-topbar,
    #{$this}__page-footer {
      background: $sui-color-brand-denim-100;
    }

    #{$this}__page-scroll {
      padding-top: $sui-space-md;
    }

    .sui-l-first-level-nav,
    .sui-o-topbar {
      filter: blur(.2rem);
    }

    .sui-l-second-level-nav {
      opacity: 0;
    }
  }
}
