@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
  counter-reset: line-numbering

  .cut
    padding: 20px 15px 0 55px

  p
    position: relative
    padding: 0 15px 0 55px
    margin: 0
    min-height: 16px
    &:hover
      background-color: $color-bg-log-hover !important
    &.highlight
      background-color: $color-bg-log-highlight
      a
        color: white
    a
      display: inline-block
      text-align: right
      min-width: 40px
      margin-left: -33px
      cursor: pointer
      text-decoration: none

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

  .fold
    position: relative
    height: 16px
    overflow: hidden
    cursor: pointer
    &.open
      height: auto

    p:first-of-type
      padding-right: 190px

    // &.active
    p:first-of-type
      background: $color-bg-log-fold inline-image('ui/log.fold.open.2.svg') no-repeat 8px 3px
      &.highlight
        background-color: $color-bg-log-fold-highlight

    &:not(.open) p:first-of-type
      visibility: visible
      height: auto
      min-height: 16px
      background-image: inline-image('ui/log.fold.closed.3.svg')

    .fold-name
      position: absolute
      z-index: 1
      display: block
      top: 2px
      right: 85px
      padding: 0px 7px 2px 7px
      line-height: 10px
      font-size: 10px
      background-color: #666
      border-radius: 6px
      color: #bbb

  .fold-start:not(.fold),
  .fold-end
    display: none

  .duration
    position: absolute
    display: block
    top: 2px
    right: 12px
    padding: 0px 7px 2px 7px
    line-height: 10px
    font-size: 10px
    background-color: #666
    border-radius: 6px
    color: #bbb


#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: 0px 1px 0px #fff
    font-family: "Source Sans Pro", Helvetica, 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

    &.scrolling
      position: fixed
      right: 32px

    &.bottom
      bottom: 45px
      top: inherit

    .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

  .to-top
    z-index: 99
    position: absolute
    display: block
    bottom: 2px
    right: 2px

    width: 50px
    margin-right: 2px
    padding-right: 16px
    text-align: right
    color: #999
    background: inline-image('ui/workers-close.svg') no-repeat right 6px