ujiro99/tlt

@import '../css/mixin.css';

.task-item {
  @apply relative;
  @apply py-2;
  @apply min-h-[40px];
  @apply flex;
  @apply flex-row;
  @apply items-center;
  @apply cursor-pointer;
  @apply select-none;

  line-height: 1.5;
  width: 100%;
  padding-right: 12px;

  &__label {
    @apply flex;
    flex: 1;
    word-break: break-all;
  }

  &__tags {
    @apply ml-1;
    @apply flex;
    @apply items-center;
  }

  &__times {
    display: flex;
  }

  .counter,
  &__estimated-time {
    @apply ml-3;
  }

  .counter + &__estimated-time {
    margin-left: 0;
  }

  &--complete {
    @apply text-gray-500;
  }

  &::after {
    content: '';
    position: absolute;
    width: 0;
    top: 50%;
    left: 24px;
    z-index: 0;
    transition: width cubic-bezier(0.4, 0, 0.2, 1) 0.35s;
  }

  &--complete::after {
    width: 90%;
    border-bottom: solid 1px rgb(156 163 175);
    @apply shadow-lg;
  }
}

@keyframes bg-pulse {
  0%,
  100% {
    background-color: rgba(229, 231, 235, 1);
  }
  50% {
    background-color: rgba(229, 231, 235, 0.2);
  }
}

@keyframes bg-progress {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 60px 60px;
  }
}