:host {
  @apply flex flex-col;

  &.Removed {
    @apply opacity-30;
  }
}

.info-header {
  @apply flex flex-row items-baseline;

  h5 {
    @apply font-bold m-0 text-lg;
  }

  .info-header-container {
    @apply ml-4;

    .muted {
      @apply text-cool-grey text-base font-semibold;
    }
  }
}

hr {
  @apply bg-disabled-branch h-px-2 -ml-4  my-4;
  width: calc(100% + 2rem);
}

.info-body {
  @apply flex flex-row items-center;

  .time-span {
    @apply text-lg font-bold mr-2 whitespace-nowrap;
  }

  .indicator {
    @apply mx-2;

    ui-icon {
      @apply text-cool-grey;
    }
  }

  .task-indicator {
    @apply w-px-2 h-full;
  }

  .indicator.Task {
    @apply mx-2 self-stretch;
  }

  .teaser {
    @apply mx-2 bg-transparent outline-none border-none;

    img {
      @apply h-px-50;
    }
  }

  .content {
    @apply overflow-y-auto ml-2 font-semibold;
    max-height: 19rem;
  }

  .time-frame {
    @apply mt-3;
  }
}

.attachments,
.notes,
.link {
  @apply mt-3;

  .attachments-heading,
  .notes-heading,
  .link-heading {
    @apply flex flex-row items-center text-lg font-bold;

    .muted {
      @apply ml-4 text-cool-grey font-semibold;
    }
  }

  .attachments-item,
  .link-item {
    @apply flex flex-row items-center text-lg;

    ui-icon {
      @apply mr-3 text-cool-grey;
    }

    .attachments-cta,
    .copy-article-cta,
    .open-article-cta,
    .link-cta {
      @apply bg-transparent justify-self-end border-none outline-none text-brand text-cta-l font-bold p-0;
    }

    .copy-article-cta {
      @apply mr-7;
    }
  }

  .link-item {
    ui-icon {
      @apply mt-1;
    }
  }
}

.update-comment {
  @apply flex flex-row items-center;

  .update-comment-heading {
    @apply flex flex-row items-center text-lg font-bold;
  }

  ui-icon {
    @apply mx-3 text-cool-grey;
  }
}

.grow {
  @apply flex-grow;
}
