#viewer
  position absolute
  z-index 1
  width 50%
  top 0
  bottom 0
  right 0
  margin-top -5px
  background very_dark_blue
  padding 10px 20px
  overflow auto
  transition all 0.3s

  inner-div()

  .btn-expand
    display none

  section
    padding 10px
    height 48px
    background-image linear-gradient(to bottom, darken(dark_blue, 30%) 0%, very_dark_blue 100%)
    margin -10px -10px 0
    box-shadow 0 1px 4px rgba(0, 0, 0, .7)

    margin -15px -20px 10px
    padding 13px 0px 13px 20px


  .example
    width 100%
    color light_gray

    for state in states
      &.{state[0]}
        .state
          background state[1]

        .message
          color state[1]

    h3
      margin 0
      font-weight 300

    .details
    .message
    .stack
      margin 10px 0

    .message
      white-space pre-wrap

    .stack
      font-size 12px
      font-family monospace
      white-space nowrap

      a
        color light_blue
        cursor pointer
        &:hover
          text-decoration none

      pre
        color darken(medium_gray, 20%)

        .line-number
          color darken(medium_gray, 50%)

    .time
    .state
    .refresh
      display inline-block
      color light_gray
      border-radius 3px
      font-weight 300
      margin-right 10px
      text-decoration none
      padding 3px 5px
      line-height 1em
      box-shadow inset 0 1px 2px rgba(0, 0, 0, .3), 0 1px 0px dark_blue


      i
        margin-right 5px
        color dark_blue

      span
        text-shadow 0 0 2px transparentize(dark_blue, 0.3)

    .time
      background light_blue

    .refresh
      background failure
      text-transform uppercase

    .state
      text-transform uppercase

    .expectations
      padding 0
      margin 10px 0

      .expectation
        list-style none
        cursor pointer
        padding 5px
        margin 0 -5px
        border-radius 3px

        &.active
          background dark_blue

        &.success
          color success

        &.failure
          color failure

    .expectation-message
      border-top 1px solid dark_blue
      padding-top 5px
      white-space pre-wrap
      font-family Menlo, Consolas, monospace
      font-size 0.8em

      &.success
        color success

      &.failure
        color failure

      .value
        background dark_blue
        border-radius 3px
        padding 1px 3px

    .diff
      display block
      background dark_blue
      padding 5px
      border-radius 4px
      color medium_gray

      del, ins
        padding 2px
        text-decoration none

      del
        background transparentize(failure, 0.5)

      ins
        background transparentize(success, 0.5)

+for_small_phone()
  #viewer .example .refresh span
    display none

+greater_than(breakpoint_tablet)
  #viewer
    width 34%
    top 50%

    .card
      position absolute
      padding 13px 0px 13px 20px
      top 48px
      bottom 0
      left 0
      right 0
      overflow auto

    .details section
      padding-left 56px

    .btn-expand
      display none

    &.card-visible .btn-expand
      display block
      cursor pointer
      position absolute
      top 13px
      left 12px
      width 34px
      height 34px
      background-image linear-gradient(to bottom, darken(dark_blue, 30%) 0%, very_dark_blue 100%)
      border 1px solid dark_blue
      border-bottom 1px solid very_dark_blue
      border-right 1px solid very_dark_blue
      box-shadow 0 1px 3px rgba(0, 0, 0, .75)
      border-radius 4px
      color light_gray

      i
        font-size 1.6em
        margin-top 2px

  .view-expanded
    #viewer
      top 48px
      width 66%

      &.card-visible .btn-expand
        background success
        border 1px solid very_dark_blue
        border-bottom 1px solid dark_blue
        border-right 1px solid dark_blue
        box-shadow inset 0 1px 3px rgba(0, 0, 0, .75)
        color very_dark_blue