.RTI-list > li,
.RTI-add {
  @apply relative after:absolute after:top-px after:inline-flex after:size-9 after:justify-center after:p-2 after:text-sm after:text-gray-500;

  > btu-input input[type='text'] {
    @apply pe-11 ps-9;
  }
}

.RTI-list {
  @apply flex flex-col gap-1.5 [counter-reset:RTI-list];
}

.RTI-list > li {
  @apply rounded-lg [counter-increment:RTI-list] after:content-[counter(RTI-list)];

  /* Sortable styles */
  &.Sortable-item {
    @apply after:cursor-move;
  }

  &.is-added {
    @apply border;

    input {
      @apply border-transparent;
    }
  }
}

/* Dashed circle on add container */
.RTI-add {
  @apply mt-1.5 after:btu-icon after:btu-icon-circle-dashed after:text-gray-400;
}

/* Add and remove buttons */
.RTI-remove,
.RTI-add > a {
  @apply btu-button btu-button-text-hidden btu-button-fill-none btu-button-gray btu-button-xs absolute right-0 top-px m-1 overflow-visible before:btu-icon touch-device:btu-button-sm after:absolute after:-bottom-1 after:-left-1 after:-top-1 after:w-px after:bg-gray-300 touch-device:my-0 touch-device:ms-0 touch-device:after:bottom-0 touch-device:after:top-0;
}

.RTI-remove {
  @apply btu-button-error text-error-700 before:btu-icon-minus;
}

.RTI-add > a {
  @apply before:btu-icon-plus;
}

/* Tint removing items red and show undo button */
.RTI-list > li.is-removing {
  @apply pointer-events-none after:text-error-400 after:line-through;

  > btu-input input[type='text'] {
    @apply border-error-400 bg-error-50 text-error-400 line-through;
  }

  > .RTI-remove {
    @apply pointer-events-auto text-gray-700 before:btu-icon-undo-2;
  }
}

/* Hide the default btu-input thread ui in this case */
.RTI btu-input {
  @apply before:hidden;
}

/* Since the input is the full width of the RTI item now, we don't need RTI-handle */
.RTI-handle {
  @apply hidden;
}
