.sui-a-logline {
  $this: &;

  background-color: $sui-logs-background-color;
  color: $sui-color-brand-denim-100;
  font-family: $sui-font-family-code;
  padding-left: $sui-space-xs;
  display: flex;
  align-items: flex-start;
  font-size: $sui-font-size-md;
  line-height: rem(24);

  &:first-child {
    border-top-left-radius: $sui-border-radius-md;
    border-top-right-radius: $sui-border-radius-md;
    padding-top: $sui-space-xs;
  }

  &:last-child {
    border-bottom-left-radius: $sui-border-radius-md;
    border-bottom-right-radius: $sui-border-radius-md;
    padding-bottom: $sui-space-xs;
  }

  &.as--highlighted {
    background-color: $sui-logs-background-color-highlight;
  }

  &__clock {
    color: $sui-color-brand-denim-500;
    visibility: hidden;
    padding-left: $sui-space-xs;
    order: -1;
  }

  &:hover &__clock,
  &.as--highlighted &__clock {
    visibility: visible;
  }

  &__number {
    min-width: $sui-size-sm;
    padding-right: $sui-space-xs;
    text-align: right;
    color: $sui-color-brand-denim-500;
    user-select: none;

    &.as--button {
      cursor: pointer;

      &:hover,
      &:focus {
        text-decoration: underline;
      }
    }
  }

  &:hover &__number,
  &:hover &__number + &__clock {
    background-color: $sui-logs-background-color-highlight;
  }

  &__content {
    margin-left: $sui-size-xxs;
  }

  &.as--stderr,
  &.as--orchestration_stderr {
    color: $sui-logs-color-as-stderr;

    #{$this}__content {
      font-weight: bold;
    }

    #{$this}__number {
      color: white;
      background-color: $sui-color-chili;
    }

    &:hover #{$this}__number {
      background-color: $sui-color-chili-dark;
    }
  }
}