@import "variables";

:host {
  display: block;
  position: relative;
  overflow: hidden;

  .viewport {
    height: 100%;
    width: 100%;
    background-color: #000;
    overflow-x: scroll;
  }

  .log-line {
    font: 12px monospace;

    .timestamp {
      background-color: #1d1d1d;
      width: 170px;
      color: lightgray;
      float: left;
      height: 25px;
      padding: 5px 0 0 20px;
      border-bottom: 1px solid #1d1d1d;
    }

    .entry {
      background-color: #000;
      color: #FFFFFF;
      height: 25px;
      padding: 5px 0 0 190px;
      white-space: pre;
      border-bottom: 1px solid transparent;
    }

    &.separator {
      .timestamp, .entry {
        border-bottom: 1px solid #343a40;
      }
    }
  }

  .dark-theme {
    .log-line {
      .timestamp {
        background-color: $blue-950;
      }
    }
  }
  .get-last {
    position: absolute;
    right: -100px;
    bottom: 30px;
    transition: right 0.5s;
  }

  &:hover {
    .get-last:not(.at-end) {
      right: 30px;
    }
  }

  mat-spinner {
    position: absolute;
    left: 45%;
    top: 45%;
  }
}
