.bd-main
  overflow: hidden
  position: relative

// Lead

.bd-lead
  position: relative

.bd-breadcrumb
  display: flex
  justify-content: space-between
  margin-bottom: $main-spacing
  .breadcrumb:not(:last-child)
    margin-bottom: 0

.bd-prev-next
  align-items: flex-start
  color: $grey-light
  display: none
  flex-grow: 0
  flex-shrink: 0
  margin-left: 0.5rem
  text-align: center
  a,
  span
    border-radius: $radius
    width: 1.5rem
  a
    &:hover
      background-color: $background

.bd-prev-next-bis
  border-top: 2px solid $background
  display: flex
  justify-content: space-between
  margin-top: $main-spacing
  a
    margin-top: $main-spacing / 2

.bd-prev-next-bis-previous
  margin-right: auto

.bd-prev-next-bis-next
  margin-left: auto

.bd-header
  border-bottom: 2px solid $background
  margin-bottom: $main-spacing
  padding-bottom: $main-spacing
  .subtitle
    color: $text-light
    strong
      color: currentColor
  #meta
    margin-top: -0.5rem

.bd-content
  hr:first-child
    display: none
    & + .bd-anchor-title
      padding-top: 0

// Side

.bd-side,
.bd-side-background
  background-color: $white-bis

.bd-side
  position: relative

.bd-side-background
  bottom: 0
  left: 50%
  position: absolute
  right: 0
  top: 0

.bd-category
  a
    &:hover
      color: $link
  &:not(:last-child)
    margin-bottom: 0.5rem
  &.is-active
    .bd-category-toggle
      .icon
        transform: rotate(180deg)
    .bd-category-list
      display: block

.bd-category-header
  position: relative

.bd-category-toggle
  +overlay
  align-items: center
  color: $grey-light
  display: flex
  justify-content: flex-end
  .icon
    font-size: 0.75rem
    transform-origin: center
    transition-duration: $speed
    transition-property: transform

.bd-category-name
  color: $text-strong
  position: relative

.bd-category-list
  display: none
  font-size: 0.875rem
  padding: 0.5rem
  li
    &:not(:last-child)
      margin-bottom: 0.5em
    &.is-current
      a
        color: $link
  a
    color: $text-light

+touch
  .bd-lead,
  .bd-side
    padding: 1.5rem
  .bd-header-carbon
    margin-top: 1.5rem

+mobile
  .bd-side-background
    display: none

$sidebar-width: 14rem

+tablet
  .bd-duo
    display: flex
  .bd-lead
    background-color: $white
    overflow: hidden
    flex-grow: 1
    flex-shrink: 1
  .bd-prev-next
    display: flex
  .bd-side
    flex: 0 0 calc(#{$sidebar-width} + 1.5rem)

+desktop
  .bd-main
    padding: 0 3rem
  .bd-lead
    margin-left: -3rem
    padding: 3rem
    &:last-child
      margin-right: -3rem
  .bd-header
    align-items: center
    display: flex
    min-height: 130px
  .bd-header-titles
    flex-grow: 1
    flex-shrink: 1
  .bd-header-carbon
    flex-grow: 0
    flex-shrink: 0
    margin: -15px 0 -15px ($main-spacing * 2)
    width: $carbon-width
  .bd-side
    padding: 3rem 0 3rem 1.5rem