@require "./code-colors.styl"

body
  font-family: $primaryFontFamily !important
h1, h2, h3, h4
  font-family: $secondaryFontFamily
h2
  border-bottom none
dd, dt
  line-height 1.7em
pre.title
    line-height: 0 !important
    padding: 0 !important
    margin: 0 !important
    background-color: transparent !important
    overflow: visible !important
    h2, h3
      margin-bottom: 0 !important
.badge.green, .badge.tip
  background: $accentColor
.custom-block.danger, .custom-block.tip, .custom-block.warning
  border-width 1px !important
  border-style solid !important
  background #FFFFFF !important
  color $textColor !important
.custom-block.danger
  border-color $red
  .custom-block-title
    color $red
.custom-block.tip
  border-color $green
  .custom-block-title
    color $green
.custom-block.warning
  border-color $yellow
  .custom-block-title
    color $yellow
.table-of-contents
  ul
    list-style none
  li
    padding-left 1em
    position relative
  li:before
    content ""
    height 4px
    width 4px
    border-radius 50%
    position absolute
    background $accentColor
    padding 1px
    margin-right 0.5em
    left 0
    top 12px
.no-sidebar
  .navbar
    display: none
.page p img:not(.icon)
  border 1px solid $borderColor
.navbar .site-name span
  font-family 'Basis Grotesque Pro Light' !important
  font-weight lighter
.sidebar
  background: $sidebarBgColor
  &__link
    display: block !important
    a
      display: block !important
  &__img
    width auto
    max-width 180px
    margin: 2em auto 1em auto
    display: block
    @media screen and (max-width: $MQNarrow)
      max-width 130px
  &-heading
    pointer-events: none
    font-family: $secondaryFontFamily
    &:after
      content: ''
      width: 35px
      height: 2px
      background: none
      display: block
    &.open
      color: $accentColor !important
      &:after
        background: $accentColor
  &-link
    border-left: none !important
    font-family: $secondaryFontFamily
.theme-default-content code
  background-color: $codePillColor
.go-to-top
  background: white
  height: 1.2rem !important
  width: 1.2rem !important
  border-radius: 13px
  padding: 0.8rem
  box-shadow: 0 2px 4px #929292
.nav-links
  .nav-item:first-child
    text-transform: uppercase
.nav-link
  font-weight: 600 !important
  font-family: $secondaryFontFamily
.external__icon
  margin-left 0.3em
.search-box input
  border-radius 0 !important
.footer
  //position: absolute
  bottom: 1rem
  margin-top: 5rem
  text-align: center
  &__img
    max-width: 100px

@media screen and (min-width: $MQNarrow)
  .navbar
    position: relative
    border-bottom: none
    // line-height: 4.4em !important
    margin-left: 320px
    .nav-links
      display flex
      width 100%
      align-items center
      margin-left 3em
      margin-right -1em
      .nav-item
        width: auto
        margin-left auto
    .nav-link.external
      font-size 12px
    .no-sidebar &
      max-width: 960px
      padding: 0 2.5rem
      margin: auto
      box-sizing: content-box;
      .links
        max-width: 100%
        margin-left: 0
        padding-left: 0 !important
    .home-link
      display: none
    .links
      position: relative !important
      right: auto !important
      max-width: 740px !important;
      margin: 1.4em auto 0.7em 4.5em;
  .page-nav
    margin-left: 4.5rem !important
  .sidebar
    top: 0
    z-index: 21
    overflow: visible
    border-right: none
    > ul
      overflow-y: auto
      max-height: calc(100% - 170px)
      > li:last-child
       margin-bottom 2em
    .sidebar-sub-headers .sidebar-sub-headers
      display none
    .active + .sidebar-sub-headers .sidebar-sub-headers
      display block
  .search-box input
    border-width: 2px !important
    border-radius: 2px !important
    color $accentColor !important
    min-width: 250px !important
    padding-left 0.5rem !important
    background-position calc(100% - 1rem) !important
    height 2.5rem !important
    border-color $sidebarBgColor !important
    &:focus
      border-color $accentColor !important
  .theme-default-content:not(.custom)
      max-width: 740px
      margin: 0 auto
      padding: 2rem 2.5rem
      margin-left: 4.5rem
