.docs-nav
  overflow: hidden

  &-title
    +desktop
      font-size: 1.2rem
      margin-bottom: .5rem
    +touch
      font-size: 1rem
      margin-bottom: .4rem

    display: block
    text-transform: uppercase
    color: $primary
    font-weight: 300

  &-item
    +desktop
      font-size: 1rem
      margin-left: .5rem
      line-height: 130%
    +touch
      font-size: .8rem
      margin-left: .4rem
      line-height: 110%

    display: block
    color: $primary
    font-weight: 400

    &:hover
      color: $dark

    &.is-active
      color: $opa-blue

  &-item + &-item
    +desktop
      margin-top: .5rem
    +touch
      margin-top: .4rem

  &-hr
    background-color: $secondary
    height: 1px

.figure
  img
    margin-bottom: .5rem

  figcaption
    font-style: normal !important
    font-size: 1.2rem
    font-weight: 500

.tag
  &.latest-tag
    margin-left: .5rem

.article
  padding-bottom: 5rem

  &:not(.wide)
    .hero, .content
      +widescreen
        max-width: 60rem

  .hero
    +touch
      width: 100%

    .hero-body
      padding: 2rem 1.5rem 0 3rem

      +touch
        padding: 0 2rem

  .section
    padding: 0rem 3rem

    +touch
      padding: 0rem 2rem

  // this undoes the above for cards nested in content
  .card
    .content
      width: 100%

  .icon-edit
    float: right
    padding-top: 2rem
    line-height: 0.5rem
    text-align: center

    span
      font-size: 0.7rem

div.bi-args
  display: grid
  grid-template-columns: min-content min-content auto
  margin-bottom: 1rem

  .name
    grid-column-start: 1

  .type
    grid-column-start: 2
    white-space: nowrap

  .desc
    grid-column-start: 3
    margin-left: 1rem

table.bi-cat
  code
    white-space: nowrap