ujiro99/tlt

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

.item-wrapper {
  $this: .item-wrapper;

  @mixin interactable;
  @apply focus:bg-indigo-50;

  width: 100%;
  display: flex;
  align-items: center;
  border-radius: var(--radius-md);

  &:has(.mod-top-margin) {
    margin-top: 12px;
  }

  &:hover:has(textarea) {
    transition: none;
    background: none;
  }

  &__drag {
    @apply fill-gray-400;
    width: 18px;
    height: 18px;
    margin-left: 4px;
    margin-right: 2px;
    opacity: 0;
    transition: opacity 0.2s ease-out;
    cursor: grab;

    @at-root {
      .dragging $(this)__drag {
        opacity: 1;
      }
    }
  }

  &:hover &__drag {
    opacity: 1;
  }

  &:hover:has(textarea) &__drag {
    transition: none;
    opacity: 0;
  }

  &:has(.task-item--running) {
    animation: bg-progress 2s linear infinite;
    background-image: linear-gradient(
      -45deg,
      rgba(255, 255, 255, 0.125) 25%,
      transparent 25%,
      transparent 50%,
      rgba(255, 255, 255, 0.125) 50%,
      rgba(255, 255, 255, 0.125) 75%,
      transparent 75%,
      transparent
    );
    background-size: 60px 60px;
    background-color: rgb(199 210 254);
  }

  @at-root {
    .drop-target $(this) {
      background-color: var(--bg-gray-100);
      border-radius: 0;
    }

    .drop-target.drop-target-parent $(this) {
      border-top-left-radius: var(--radius-md);
      border-top-right-radius: var(--radius-md);
      border-bottom-left-radius: var(--radius-md);
    }

    .drop-target.drop-target-parent + .drop-target $(this):before,
    .drop-target.drop-target-parent + .drop-target $(this):after {
      content: '';
      position: absolute;
      top: 0;
      left: calc(0px - var(--radius-md));
      width: var(--radius-md);
      height: var(--radius-md);
    }

    .drop-target.drop-target-parent + .drop-target $(this):before {
      background-color: var(--bg-gray-100);
    }

    .drop-target.drop-target-parent + .drop-target $(this):after {
      background-color: white;
      border-top-right-radius: var(--radius-md);
    }

    .drop-target.drop-target-bottom $(this) {
      border-bottom-left-radius: var(--radius-md);
      border-bottom-right-radius: var(--radius-md);
    }
  }

  &__collapse {
    width: 20px;
    height: 32px;
    padding: 0 6px 0 0;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: none;
    cursor: pointer;
    border: none;
    outline: none;
    appearance: none;
    background-color: transparent;
    opacity: 0;
    transition: opacity 0.2s ease-out;

    svg {
      @apply fill-gray-400;
      transition: transform 250ms ease-out, fill 250ms ease-out;
    }

    &:hover {
      svg {
        @apply fill-gray-600;
      }
    }

    @at-root {
      .collapsed $(this)__collapse {
        opacity: 1;
      }
      .collapsed $(this)__collapse svg {
        transform: rotate(-90deg);
      }
    }
  }

  &:hover &__collapse {
    opacity: 1;
  }

  &:has(textarea) &__collapse,
  &:hover:has(textarea) &__collapse {
    transition: none;
    opacity: 0;
  }
}