:host {
  @apply flex flex-row px-4 py-3;

  .date {
    @apply font-bold mr-2 self-start flex-shrink-0 flex-grow-0;
    width: 112px !important;
  }

  .indicator {
    @apply w-px-2 bg-gray-100 self-stretch mx-4;
  }

  .icon {
    @apply mx-2 self-start mt-px-3 text-inactive-branch flex flex-row;
    ui-icon + ui-icon {
      @apply ml-2;
    }
  }

  .icon-update-comment {
    @apply text-dark-goldenrod;
  }

  .indicator + .icon {
    @apply ml-0;
  }

  .shirt-size {
    @apply mx-2 mt-px-3;
  }

  .task-content {
    @apply flex flex-col ml-2 flex-shrink flex-grow;

    .task-content-title {
      @apply flex flex-row;
    }

    .task-content-text {
      @apply text-cool-grey;
    }
  }
}
