html {
  box-sizing: border-box;
}

body,
main {
  overflow-x: hidden !important;
  background-color: $color-body;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

main {
  margin: 0 auto;
  padding: 75px 12px 12px 12px;
  display: block;

  @media (min-width: $nav-break) {
    margin-left: 240px;
    padding: 80px 18px 18px 22px;
  }
}

router-outlet ~ * {
  position: absolute;
  width: calc(100% - 12px);
  height: 100%;
  max-width: $container-width;

  @media (min-width: $nav-break) {
    width: calc(100% - 280px);
  }
}

app-docs router-outlet ~ * {
  @media (min-width: $nav-break) {
    width: 100%;
  }
}

router-outlet ~ app-home {
  max-width: 100%;
}

.container {
  max-width: $container-width;
}

.header {
  margin-bottom: 12px;
  background-color: $color-primary;
  display: block;
  width: 100%;
  overflow: hidden;
  position: fixed;
  z-index: 3;
  top: 0;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);

  @media (min-width: $nav-break) {
    z-index: 5;
  }
}

.header-nav {
  max-width: $container-width + 260px;

  &__link {
    padding: 16px 8px;
    text-decoration: none;
    display: block;
    float: right;
    color: $color-white;

    &:hover {
      background-color: darken($color-primary, 5%);
    }

    @media (min-width: $nav-break) {
      padding: 16px 14px;
    }
  }

  &__nav-drawer-btn {
    float: right;
    background-color: transparent;
    border: 0;
    padding: 11px 15px;

    @media (min-width: $nav-break) {
      display: none;
    }
  }

  .logo {
    float: left;
    font-size: 20px;

    img {
      max-width: 37px;
      margin: 10px -10px 0px 20px;
    }
  }
}

ngx-nav-drawer .ngx-nav-drawer {
  & > a {
    padding: 8px 26px;
    font-size: 16px;
    font-weight: normal;
  }

  .nav-category {
    padding: 10px 14px;
    font-size: 18px;
    display: block;
    border-bottom: 1px solid $color-border-light;
  }

  @media (min-width: $nav-break) {
    padding: 64px 0 !important;
  }
}

.active-link {
  background-color: $color-active-link;
}

ngx-code-example {
  display: block;
  margin-bottom: 48px;

  pre {
    padding-bottom: 0;
  }

  code {
    display: block;
    margin: -96px 0 -60px 0;
  }
}

:not(pre) > code[class*='language-'],
pre[class*='language-'] {
  background: $color-demo;
  border-left: 8px solid $color-demo-border;
  padding-top: 38px;
}

.demo {
  margin: 20px 0 36px 0;
}

code,
.code {
  background: $color-demo;
  padding: 2px;
}

.ngx-tabs__nav > a.active,
.ngx-tabs__nav > button.active {
  background-color: $color-body !important; // temp, need to add css custom prop for tabs
}
