/* ==========================================================================
   Sidebar styling
   ========================================================================== */

.sidebar
  position: relative

  &:before
    content: ''
    position: absolute
    left: 0
    top: 0
    width: 50%
    height: 100%
    background-color: $yellow

  &.white
    &:before
      background-color: white
    header
      &:before
        background-color: white
      .grid-row
        &:before
          background-color: white

  &.light-grey
    &:before
      background-color: $almostWhite
    header
      &:before
        background-color: $almostWhite
      .grid-row
        &:before
          background-color: $almostWhite

  &.blue
    &:before
      background-color: $blue
    header
      &:before
        background-color: $blue
      .grid-row
        &:before
          background-color: $blue

  &.dark-blue
    &:before
      background-color: $darkBlue
    header
      &:before
        background-color: $darkBlue
      .grid-row
        &:before
          background-color: $darkBlue


  header
    &:before
      content: ''
      position: absolute
      left: 0px
      top: 0
      width: calc( (100% - 1680px) / 2 )
      height: calc(100% + 5px)
      background-color: $yellow
    .grid-row
      &:before
        content: ''
        position: absolute
        left: column(-1, 12)
        top: 0
        width: column(2, 12)
        height: 200px
        background-color: $yellow

    +respond-to-width(1000)
      &:before, .grid-row:before
        display: none


  .fill-out
    content: ''
    position: absolute
    right: 0
    top: 0
    width: 50%
    height: 100%
    background-color: white

    &.light-grey
      background-color: $almostWhite
    &.yellow
      background-color: $yellow
    &.blue
      background-color: $blue
    &.dark-blue
      background-color: $darkBlue


  .sidebar-content
    position: relative
    z-index: 2
    min-height: 100px