@import './product/index';
@import './filter-bar';
html body > svg {
  display: none;
}
%main-nav-horizontal .docs-link a::after {
  @extend %with-learn-icon, %as-pseudo;
}

%main-nav-horizontal .learn-link a::after {
  @extend %with-docs-icon, %as-pseudo;
}
%main-nav-horizontal .feedback-link a::after {
  @extend %with-logo-github-monochrome-icon, %as-pseudo;
}
html.ember-loading body > svg {
  @extend %brand-loader;
}
html.template-loading main > div {
  @extend %loader;
}
%loader circle {
  fill: $magenta-100;
}
%main-header-horizontal::before {
  background-color: $magenta-600;
}
%main-nav-horizontal-action,
%main-nav-horizontal-toggle-button {
  color: $magenta-050;
}
@media #{$--lt-horizontal-nav} {
  %main-nav-horizontal-panel {
    background-color: $magenta-600;
  }
}
@media #{$--horizontal-nav} {
  %main-nav-horizontal-action-active {
    background-color: $magenta-800;
  }
}
#wrapper > footer {
  @extend %footer;
}
/*TODO: This should go in reset, and probably needs select etc adding  */
@media (max-width: 420px) and (-webkit-min-device-pixel-ratio: 0) {
  input {
    font-size: 16px !important;
  }
}
/* toggleable toolbar for short screens */
[for='toolbar-toggle'] {
  @extend %with-search-color-icon;
  background-position: 0 4px;
  display: inline-block;
  width: 26px;
  height: 26px;
  cursor: pointer;
  color: $blue-500;
}
#toolbar-toggle {
  display: none;
}
@media #{$--horizontal-selects} {
  [for='toolbar-toggle'] {
    display: none;
  }
}
// reduced search magnifying icon layout
@media #{$--lt-horizontal-selects} {
  %app-view header h1 {
    display: inline-block;
  }
  %app-view header h1 {
    display: inline-block;
  }
  // on the instance detail page we don't have the magnifier
  html.template-instance.template-show h1 {
    display: block;
  }
  #toolbar-toggle + * {
    display: none;
  }
  #toolbar-toggle:checked + * {
    display: block;
  }
}