@import 'ctl_base_ui/variables';
@import 'ctl_base_ui/colors';
@import 'ctl_base_ui/mixins';
@import 'panamax/buttons';

.journal {

  margin-bottom: 30px;

  header {
    border-bottom: $grey 1px solid;
    margin-bottom: 15px;
    overflow: hidden;

    h3 {
      float: left;
      margin-bottom: 0;
    }

    .journal-toggle {
      float: right;
    }
  }
}

a.journal-toggle {
  display: inline-block;
  @extend .button-minor;
}

.journal-output,
.log-output {
  @include border-box;
  font-family: $monospace_font_family;
  background-color: darken($dark_grey, 30%);
  color: $grey;
  display: block;
  padding: 10px 0;
  white-space: nowrap;
  overflow: scroll;

  p {
    font-size: 14px;
    line-height: 16px;
    padding: 0 0 0 10px;

    .timestamp, .source {
      display: inline-block;
      color: $medium_grey;
    }

    &:last-of-type {
      background-color: $blue_grey;
      color: white;
      padding: 2px 0 2px 10px;

      .timestamp, .source {
        color: white;
      }
    }
  }
}

.journal-output.truncated {
  height: 118px;
  overflow: hidden;

  p {
    padding: 2px 0 2px 10px;

    .timestamp, .source {
      color: $dark_grey;
    }

    &:nth-last-of-type(5) {
      margin-top: 10px;
    }

    &:last-of-type {
      .timestamp, .source {
        color: white;
      }
    }
  }
}
