.task-list-item-wrapper {
  @apply flex flex-row pr-4 py-3 bg-white border-solid cursor-pointer;
  border-radius: 5px 0px 5px 5px;
  box-shadow: 0px 0px 10px rgba(220, 226, 233, 0.5);

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

  .indicator {
    @apply bg-gray-100 justify-self-stretch;
    width: 6px;
    margin-top: -13px;
    margin-bottom: -13px;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
  }

  .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;
    }
  }
}

.show {
  @apply visible;
}
