/*
 *
 * BUI: BASE
 *
 */

.clear-after
  &:after
    clear: both
    display: block
    content: ''

*
  margin: 0
  padding: 0
  box-sizing: border-box
  text-decoration: none

#bui-docs-body
  background-color: $grey-100
  width: 100%
  height: 100%
  font-family: "Roboto", sans-serif
  font-weight: 400
  text-rendering: auto
  -webkit-font-smoothing: antialiased
  overflow-x: hidden

.bui-docs-wrapper
  @extend .clear-after

  /*
   * Docs Navigation Design
   */

  .docs-navigation
    position: fixed
    width: 200px
    height: 100%
    display: table
    border-right: 1px solid $grey-300

  .docs-navigation > .nav-menu
    display: table-cell
    vertical-align: middle
    padding-left: 20px

  .docs-navigation > .nav-menu > ul
    list-style-type: none
    text-transform: uppercase
    font-size: 13px
    font-weight: 500
    padding: 5px 0

  .docs-navigation > .nav-menu > ul > li
    cursor: pointer
    margin: 15px 0
    color: $grey-500
    &:hover
      color: $grey-700
    &.active-nav-element
      color: $grey-900
      cursor: default
      &:hover
        color: $grey-900

  /*
   * Docs Content Design
   */

  .docs-content
    position: relative
    left: 200px
    width: calc(100% - 200px)
    padding: 100px

    .table-header-label
      font-size: 28px
      font-weight: 300
      color: $grey-700
      padding: 40px 0 20px 0
      margin-top: 40px

    div:not(:first-of-type)
      .table-header-label
        border-top: 1px solid $grey-300