
.log
  position: relative
  margin-top: 35px

  .log-tail
    z-index: 80
    position: absolute
    display: block
    top: 0
    right: 0
    margin: 10px 10px 0 0

    .tail-label
      display: none
      cursor: pointer

    &:hover
      .tail-label
        display: inline-block
      .tail-status
        display: none

    &.scrolling
      position: fixed
      right: 32px

    &.bottom
      bottom: 45px
      top: inherit

    .tail-status
      position: relative
      display: inline-block
      height: 20px;
      width: 20px;
      vertical-align: middle
      background-color: #696867;
      border-radius: 50%;
      &:after
        content: ""
        display: block
        height: 10px;
        width: 10px;
        background: #F2F2F2;
        border-radius: 50%;
        @extend %absolute-center

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

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

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

  .icon
    width: 1.3em
    height: 1.1em
    margin-right: 6px
    vertical-align: middle
  .icon--down
    width: 0.7em
    height: 0.9em
    margin-right: 4px

.log-header
  height: 44px
  margin: 0
  padding: .7em .8em .6em
  text-align: right
  background-color: $log-header-bg
  @extend %border-top-4px
  a
    margin-left: .4em

.log-body
  position: relative
  pre
    clear: left
    min-height: 42px
    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: #2a2a2a
    counter-reset: line-numbering
    margin-top: 0
    @extend %border-bottom-4px

  .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

  .loading
    padding: 25px 0 0 10px

.log-notice
  background-color: #A6ADAD
  color: $white
  min-height: 70px
  line-height: 35px
  text-align: center
  @extend %border-radius-4px
  @media #{$medium-up}
    height: 70px
    line-height: 70px
