.app .skip-links {
  @extend %skip-links;
}
[role='contentinfo'] {
  @extend %footer;
}
[role='banner'] {
  @extend %main-header-horizontal;
}
[role='banner'] > label {
  @extend %main-nav-horizontal-toggle-button;
}
.app > input[id] {
  @extend %main-nav-horizontal-toggle;
}
%main-header-horizontal > div {
  @extend %main-nav-horizontal-panel;
}

%main-header-horizontal nav:first-of-type {
  @extend %main-nav-vertical, %main-nav-sidebar;
}
%main-header-horizontal nav:last-of-type {
  @extend %main-nav-horizontal;
  margin-left: auto;
}
%main-nav-vertical-hoisted {
  top: 11px;
}
%main-nav-vertical-hoisted > .popover-menu > label > button {
  @extend %main-nav-horizontal-action;
  border: none;
}
%main-nav-vertical-hoisted.is-active > label > * {
  @extend %main-nav-horizontal-action-active;
}
%footer,
%main-nav-sidebar,
main {
  @extend %transition-pushover;
}
%footer {
  position: fixed;
  z-index: 50;

  color: var(--gray-400);
  font-size: $typo-size-800;

  width: 250px;
  padding-left: 25px;
}
%footer {
  top: calc(100vh - 42px);
  top: calc(max(100vh, 460px) - 42px);
}
html.has-nspaces .app [role='contentinfo'] {
  top: calc(100vh - 42px);
  top: calc(max(100vh, 550px) - 42px);
}
%main-nav-sidebar {
  z-index: 10;
}
%footer,
%main-nav-sidebar {
  transition-property: left;
}
main {
  margin-top: var(--chrome-height, 64px);
  transition-property: margin-left;
}

@media #{$--sidebar-open} {
  %main-nav-horizontal-toggle ~ footer,
  %main-nav-horizontal-toggle + header > div > nav:first-of-type {
    left: 0;
  }
  %main-nav-horizontal-toggle:checked ~ footer,
  %main-nav-horizontal-toggle:checked + header > div > nav:first-of-type {
    left: calc(var(--chrome-width, 300px) * -1);
  }
  %main-nav-horizontal-toggle ~ main {
    margin-left: var(--chrome-width, 300px);
  }
  %main-nav-horizontal-toggle:checked ~ main {
    margin-left: 0;
  }
}
@media #{$--lt-sidebar-open} {
  %main-nav-horizontal-toggle:checked ~ footer,
  %main-nav-horizontal-toggle:checked + header > div > nav:first-of-type {
    left: 0;
  }
  %main-nav-horizontal-toggle ~ footer,
  %main-nav-horizontal-toggle + header > div > nav:first-of-type {
    left: calc(var(--chrome-width, 300px) * -1);
  }
  %main-nav-horizontal-toggle ~ main {
    margin-left: 0;
  }
}
