@import "_mixins/all"

pre#log
  position: relative
  clear: left
  min-height: 12px
  margin-top: 25px
  margin-top: 1em
  padding: 15px 0
  color: $color-text-log
  font-family: monospace
  font-size: $font-size-log
  line-height: $line-height-log
  white-space: pre-wrap
  word-wrap: break-word
  background-color: $color-bg-log
  border: 1px solid $color-border-log
  @include border-radius(4px)
  overflow-x: scroll
  counter-reset: line-numbering

  p
    padding: 0 15px 0 50px
    margin: 0
    min-height: 16px
    &:hover
      background-color: $color-bg-log-hover
    &.highlight
      background-color: $color-bg-log-highlight
      a
        color: white
    a
      display: inline-block
      margin-left: -35px
      cursor: pointer
      text-decoration: none

      &::before
        content: counter(line-numbering)
        counter-increment: line-numbering
        padding-right: 1em
        text-align: right

  .fold
    height: 16px
    overflow: hidden
    background: $color-bg-log-fold inline-image('ui/log.fold.closed.2.png') no-repeat 99.5% 2px
    cursor: pointer
    &.open
      height: auto
      background-image: inline-image('ui/log.fold.open.2.png')
    // &.show-first-line:not(.open)
    //   height: 36px
    //   p:not(:first-child):not(:last-child)
    //     display: none

    &:not(.open) p:first-of-type
      visibility: visible
      height: auto
      min-height: 16px

    .fold-start:not(.fold),
    .fold-end
      display: none
    .fold span.fold-name
      position: absolute
      display: block
      right: 20px
      margin-top: 3px
      padding: 0px 5px 2px 5px
      line-height: 10px
      font-size: 10px
      background-color: #999
      border-radius: 4px
      color: #eee

#log.loading
  padding: 25px 0 0 10px

#log-container
  position: relative

#log-container #tail
  z-index: 99
  position: absolute
  display: block
  top: 0
  right: 2px
  margin: 13px 10px 0 0
  padding: 0 2px 0 3px
  color: #666
  text-shadow: 1px 1px 0px #fff
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif
  font-size: $font-size-tiny
  line-height: 14px
  text-decoration: none
  white-space: nowrap
  border: 1px solid #bbb
  border-top-color: #ddd
  border-bottom-color: #bbb
  @include border-radius(8px)
  @include background(linear-gradient(#fff, #e0e0e0))

  label
    display: none
    cursor: pointer

  &:hover
    padding: 1px 4px 1px 6px
    label
      display: inline

  .status
    display: inline-block
    margin-right: 1px
    width: 8px
    height: 8px
    background-color: #aaa
    @include border-radius(4px)
    @include box-shadow(white 1px 1px 2px)

  &.active .status
    background-color: #6b0