@brightspot/ui 3.0.1-cms-ui-migration.0 → 3.0.1-cms-ui-migration.2

package/src/legacy/tool-ui/src/RepeatableContentInputGroup.css

@@ -0,0 +1,470 @@
+.RCIG {
+  --RCIG-titleHeight: calc(theme(spacing.6) + theme(lineHeight.4));
+  --RCIG-buttonSize: theme(spacing.7);
+  --RCIG-indexWidth: calc(1.25rem + theme(spacing.2) * 2);
+
+  @apply relative;
+}
+
+.RCIG-list {
+  @apply rounded-lg [counter-reset:RCIG-item] [&:not(:empty)]:mb-1.5;
+}
+
+.RCIG-item {
+  @apply relative overflow-clip border-x border-t bg-white [counter-increment:RCIG-item] focus-visible:ring-primary-100 first:rounded-t-lg last:rounded-b-lg last:border-b focus-visible:z-[1] focus-visible:border focus-visible:border-primary-600;
+
+  /* Grid accounts for 3 RCIG actions to right of divider by default: multisort, remove, more menu */
+  @apply grid grid-cols-[1fr_repeat(4,auto)] grid-rows-[minmax(2.75rem,_auto)_1fr] items-center gap-x-2; /* minmax used to set the initial height of the RCIG-item to reduce shift while loading. */
+
+  /* Accounts for fewer RCIG actions */
+  &:not(:has(> btu-dropdown)),
+  &:not(.MultiSortable) {
+    @apply grid-cols-[1fr_repeat(3,auto)];
+  }
+
+  &:where(.is-collapsed, .is-removing) {
+    @apply h-[calc(var(--RCIG-titleHeight)+1px)] overflow-hidden last:h-[calc(var(--RCIG-titleHeight)+2px)];
+  }
+
+  &:not(.is-collapsed):not(.is-gridItem):not(.is-removing) {
+    @apply bg-primary-50;
+  }
+
+  &:has(> *:not(.CIG):hover) {
+    @apply bg-gray-100;
+  }
+
+  & > .CIG {
+    @apply col-span-full row-start-2 row-end-2 self-start bg-white px-6 pb-[--CIG-padding];
+  }
+
+  & > .TC {
+    @apply me-0;
+  }
+
+  /* hide notes when viewing gallery in grid mode */
+  &.is-gridItem .CIG-note {
+    @apply hidden;
+  }
+}
+
+/* ::before - item number | ::after - expand/collapse "button" */
+.RCIG-title {
+  @apply relative h-[var(--RCIG-titleHeight)] cursor-pointer items-center gap-1 truncate py-3 pe-[calc(var(--RCIG-buttonSize)+1rem)] text-sm text-primary-600 focus-visible:after:ring-primary-100 focus-visible:[box-shadow:none] focus-visible:after:border focus-visible:after:border-primary-600 focus-visible:after:ring-4;
+
+  /* divider line */
+  @apply [background-image:linear-gradient(theme(colors.gray.200),theme(colors.gray.200))] [background-position:right_center] [background-repeat:no-repeat] [background-size:1px_1.75rem] more-contrast:[background-image:linear-gradient(theme(colors.gray.400),theme(colors.gray.400))];
+
+  &::before {
+    --tw-content: counter(RCIG-item);
+    @apply mx-2 inline-block w-5 text-center font-normal text-primary-600 [content:counter(RCIG-item)];
+  }
+
+  .RCIG-item > & {
+    @apply after:btu-icon after:btu-icon-chevron-up after:absolute after:right-2 after:top-2 after:ms-auto after:size-7 after:shrink-0 after:items-center after:justify-center after:rounded-lg after:bg-white;
+  }
+
+  .RCIG-item.is-collapsed > &,
+  .RCIG-item.is-gridItem > & {
+    @apply text-gray-900 after:btu-icon-chevron-down before:text-gray-500;
+  }
+
+  /* "Disabled" expand icon UI for RCIG items without form content */
+  .RCIG-item:where([data-empty]) > & {
+    @apply after:bg-transparent after:text-gray-400;
+  }
+}
+
+.RCIG.is-addToTop {
+  @apply grid grid-cols-[1fr_auto] grid-rows-[auto_1fr] gap-2;
+
+  .RCIG-expandAll {
+    @apply static col-start-2 self-center;
+  }
+
+  .RCIG-controls {
+    @apply col-start-1 row-start-1;
+  }
+
+  .RCIG-list:not(:empty) {
+    @apply col-span-full mb-0;
+  }
+}
+
+.RCIG-preview {
+  @apply hidden;
+}
+
+/*********************************/
+/**********  Sortable  ***********/
+/*********************************/
+
+.RCIG-item {
+  &:where(.MultiSortable) > .RCIG-title {
+    @apply hover:cursor-move;
+  }
+
+  &.is-added {
+    @apply border border-solid;
+  }
+}
+
+/*********************************/
+/*****  Remove Button & UI   *****/
+/*********************************/
+
+.RCIG-remove {
+  @apply btu-button btu-button-text-hidden btu-button-fill-none btu-button-error btu-button-xs bg-white after:btu-icon after:btu-icon-minus touch-device:btu-button-sm focus-visible:border;
+}
+
+.RCIG-item:not(.is-removing) > .RCIG-remove {
+  @apply focus-visible:ring-error-100 focus-visible:border-error-600;
+}
+
+.RCIG-item.is-removing {
+  @apply bg-error-50;
+
+  > .RCIG-title {
+    @apply pointer-events-none text-error-400 line-through before:text-error-400 before:line-through after:text-gray-400;
+  }
+
+  > .RCIG-remove {
+    @apply btu-button-gray after:btu-icon-rotate-ccw;
+  }
+
+  > .RCIG-weightLabel {
+    @apply hidden;
+  }
+}
+
+/*********************************/
+/***** RCIG button: Dropdown *****/
+/*********************************/
+
+.RCIG-swap,
+.copyButton,
+.convertButton {
+  @apply invisible;
+}
+
+.RCIG-item:has(> btu-dropdown) {
+  .Dropdown-button {
+    @apply btu-button-xs bg-white touch-device:btu-button-sm;
+
+    &.is-active {
+      @apply bg-primary-50 text-primary-800;
+    }
+  }
+
+  .Dropdown.is-open {
+    @apply Dropdown-is-open;
+  }
+
+  & > btu-dropdown :where(.RCIG-swap, .copyButton, .convertButton) {
+    @apply visible before:btu-icon before:me-2;
+  }
+
+  .RCIG-swap {
+    @apply before:btu-icon-arrow-right-left;
+  }
+
+  .copyButton {
+    @apply before:btu-icon-copy;
+  }
+
+  .convertButton {
+    @apply before:btu-icon-replace;
+  }
+}
+
+/*********************************/
+/********   Loading UI   *********/
+/*********************************/
+
+.RCIG-item.is-loading::after {
+  @apply btu-loader absolute left-[calc((var(--RCIG-indexWidth)-var(--Loader-size))/2)] top-[calc((var(--RCIG-titleHeight)-var(--Loader-size))/2)] size-[--Loader-size];
+}
+
+/*********************************/
+/*********   Error UI   **********/
+/*********************************/
+
+.RCIG-item.is-error {
+  @apply border-error-600;
+
+  &:has(+ .RCIG-item:not(.is-error)) {
+    @apply border-b;
+  }
+
+  > .RCIG-title {
+    @apply before:btu-icon before:btu-icon-circle-alert before:text-error-700;
+  }
+
+  &.is-removing .RCIG-title {
+    @apply before:no-underline;
+  }
+}
+
+/*********************************/
+/*****  Controls above RCIG  *****/
+/*********************************/
+
+.RCIG-expandAll {
+  --border-size: 1px;
+  @apply btu-button btu-button-text-hidden btu-button-outline btu-button-fill-none btu-button-gray btu-button-sm absolute right-[--border-size] top-[calc(-1_*_(var(--button-size-sm)_+_var(--CIG-space,0))_-_var(--border-size))] before:btu-icon before:btu-icon-chevrons-up-down;
+
+  &.is-expanded {
+    @apply before:btu-icon-chevrons-down-up;
+  }
+}
+
+.RCIG[data-rcig-size='0'] {
+  .RCIG-expandAll,
+  .RCIG-resetWeights {
+    @apply hidden;
+  }
+
+  &.is-previewable .repeatablePreviewControls {
+    @apply right-0;
+  }
+}
+
+.RCIG.is-previewable {
+  > .repeatablePreviewControls {
+    @apply absolute right-11 top-[calc(-1_*_(38px_+_var(--CIG-space,0)))];
+  }
+
+  &.is-gridView > .repeatablePreviewControls {
+    @apply right-0;
+  }
+
+  &.is-gridView > .RCIG-expandAll {
+    @apply hidden;
+  }
+}
+
+/*********************************/
+/*****  Controls below RCIG  *****/
+/*********************************/
+
+.RCIG-controls {
+  @apply flex gap-6 py-2 empty:hidden;
+}
+
+.RCIG-add {
+  @apply btu-button btu-button-fill-none btu-button-primary btu-button-container-none before:btu-icon before:btu-icon-plus;
+}
+
+.RCIG-addSelect .ComboInput {
+  @apply ps-2 before:btu-icon before:btu-icon-plus;
+
+  .ComboInput-icon {
+    @apply ps-2;
+  }
+}
+
+.RCIG.is-previewable .action-upload {
+  @apply btu-button btu-button-fill-none btu-button-primary btu-button-container-none before:btu-icon before:btu-icon-upload;
+
+  + .RCIG-controls {
+    @apply ms-6 inline-block;
+  }
+}
+
+/*********************************/
+/*****  Previewable & Grid   *****/
+/*********************************/
+.RCIG.is-previewable .copyButton {
+  @apply hidden;
+}
+
+.RCIG.is-previewable.is-gridView > .RCIG-list {
+  @apply grid grid-cols-[repeat(auto-fill,minmax(15rem,1fr))] gap-2;
+}
+
+.RCIG.is-previewable.is-gridView > .RCIG-list > .RCIG-item {
+  --RCIG-itemHeight: 225px;
+
+  @apply h-[calc(var(--RCIG-itemHeight)+2px)] grid-rows-[1fr_144px_1fr] rounded-lg border [&:not(.is-error)]:border-gray-300;
+
+  .CIG-row:not(.RCIG-previewField),
+  .CIG-row.RCIG-previewField > .CIG-label,
+  .CIG-row.RCIG-previewField > .CIG-small > .ContentSelector-clear {
+    @apply hidden;
+  }
+
+  & > .CIG {
+    @apply contents;
+  }
+
+  .CIG-row.RCIG-previewField {
+    @apply col-span-full mt-0 self-start p-0;
+  }
+
+  .CIG-row.RCIG-previewField > .CIG-small {
+    @apply mt-0 basis-full rounded-none border-x-0 border-b-0;
+
+    /* Case: image has been set */
+    &[data-image-editor='true'] {
+      @apply grid grid-cols-[1fr_repeat(3,auto)] grid-rows-[1fr_auto];
+
+      > .ContentSelector-search,
+      > .ContentSelector-edit,
+      > .ContentSummary-info {
+        @apply btu-button btu-button-text-hidden btu-button-fill-none btu-button-gray btu-button-xs row-start-2 m-1 touch-device:btu-button-sm [&:not(:hover)]:bg-white;
+      }
+
+      > .ContentSelector-edit,
+      > .ContentSummary-info {
+        @apply overflow-visible after:absolute after:-left-1 after:-top-[5px] after:h-9 after:w-px after:bg-gray-200 touch-device:after:-bottom-0 touch-device:after:top-0 touch-device:after:h-[unset] more-contrast:bg-gray-400;
+      }
+
+      > .ContentSelector-search {
+        @apply col-start-2 before:right-0 before:top-0 touch-device:before:right-auto touch-device:before:top-auto;
+
+        > span {
+          @apply hidden;
+        }
+      }
+
+      > .ContentSelector-edit {
+        @apply col-start-3 before:btu-icon before:btu-icon-pencil;
+      }
+
+      > .ContentSummary-info {
+        @apply col-start-4;
+      }
+
+      > .ImageEditor-container {
+        @apply col-span-full row-start-1 max-w-none border-b border-b-gray-300 before:border-0;
+
+        > * {
+          @apply hidden;
+        }
+
+        > .ImageEditor-preview {
+          @apply m-0 flex h-36 rounded-none touch-device:h-[8.5rem];
+        }
+
+        canvas {
+          @apply max-h-36;
+        }
+      }
+    }
+
+    /* Overrides the default ContentSelector-search image styles when inside a RCIG grid item */
+    &:has(> .ContentSelector-search figure) {
+      @apply m-0 grid-cols-[1fr_repeat(3,auto)] grid-rows-[1fr_auto] p-0;
+
+      > .ContentSelector-edit,
+      > .ContentSummary-info {
+        @apply row-start-2 m-1;
+      }
+
+      .ContentSelector-search {
+        @apply row-start-1 before:absolute before:right-[calc(theme(size.9)*2_+_theme(spacing.1))] before:top-[calc(144px_+_theme(spacing.1))];
+      }
+
+      .ContentSelector-search figure {
+        @apply mt-0 h-36 border-b border-t-0 touch-device:h-[8.5rem];
+      }
+
+      .ContentSelector-search figcaption {
+        @apply hidden;
+      }
+    }
+
+    /* Case: no image set */
+    input[data-previewable='true']:where(
+        :not([data-preview]),
+        [data-preview='']
+      )
+      + .ContentSelector-search {
+      @apply h-[calc(9rem+1px)] w-full max-w-none overflow-visible rounded-none border-b border-solid border-b-gray-300 bg-gray-50 no-underline before:btu-button before:btu-button-text-hidden before:btu-button-fill-none before:btu-button-gray before:btu-button-xs before:btu-icon touch-device:btu-button-sm before:absolute before:right-1 before:top-full before:mt-[5px];
+
+      + .ContentSelector-edit {
+        @apply hidden;
+      }
+    }
+  }
+
+  > .RCIG-preview {
+    @apply absolute top-[var(--RCIG-titleHeight)] block h-[calc(var(--RCIG-itemHeight)-var(--RCIG-titleHeight))] w-full bg-gray-50;
+
+    > img {
+      @apply h-full w-full object-cover;
+
+      &:not([src]),
+      &[src=''] {
+        @apply hidden;
+      }
+    }
+  }
+}
+
+/*********************************/
+/********   Weighted UI   ********/
+/*********************************/
+.RCIG.is-weighted {
+  > :where(button, a) {
+    @apply btu-button-xs touch-device:btu-button-sm;
+  }
+
+  > .RCIG-list > .RCIG-item > .RCIG-title {
+    /* Creates space for position:absolute RCIG-weightLabel */
+    @apply before:me-[calc(theme(spacing.2)*2+55px)];
+  }
+
+  .RCIG-expandAll,
+  .RCIG-resetWeights {
+    @apply btu-button-xs top-[calc(0px-var(--RCIG-buttonSize)-theme(spacing.1))];
+  }
+}
+
+.RCIG-resetWeights {
+  @apply btu-button btu-button-text-hidden btu-button-outline btu-button-fill-none btu-button-gray absolute right-[calc(var(--RCIG-buttonSize)+theme(spacing.2))] before:btu-icon before:btu-icon-columns-3;
+}
+
+.RCIG-weightBar {
+  @apply mb-1.5 flex h-4 items-center empty:hidden;
+}
+
+.RCIG-weightBarItem {
+  @apply relative h-1 rounded-full [&:not(:first-child)]:ml-px [&:not(:last-child)]:mr-px [&:nth-of-type(4n)]:!bg-warning-500 [&:nth-of-type(4n-1)]:!bg-error-500 [&:nth-of-type(4n-2)]:!bg-teal-500 [&:nth-of-type(4n-3)]:!bg-primary-500;
+}
+
+.RCIG-weightBarMarker {
+  @apply absolute size-1 rounded-full bg-white opacity-[0.8];
+}
+
+.RCIG-weightBarHandle {
+  @apply absolute -left-2 -top-1.5 size-4 cursor-col-resize rounded-full border-2 border-gray-700 bg-white;
+
+  .RCIG-weightBarItem:first-child & {
+    @apply hidden;
+  }
+}
+
+.RCIG-weightLabel {
+  @apply btu-badge-gray btu-badge-sm pointer-events-none absolute left-[var(--RCIG-indexWidth)] top-[11px] after:font-medium after:content-[attr(data-weight-label)];
+}
+
+.RCIG-weightColor {
+  @apply size-2 rounded-lg;
+
+  .RCIG-item[data-weight-field]:nth-child(4n-3) & {
+    @apply !bg-primary-500;
+  }
+
+  .RCIG-item[data-weight-field]:nth-child(4n-2) & {
+    @apply !bg-teal-500;
+  }
+
+  .RCIG-item[data-weight-field]:nth-child(4n-1) & {
+    @apply !bg-error-500;
+  }
+
+  .RCIG-item[data-weight-field]:nth-child(4n) & {
+    @apply !bg-warning-500;
+  }
+}

package/src/legacy/tool-ui/src/RepeatableContentSelector.css

@@ -0,0 +1,177 @@
+.RCS {
+  @apply [counter-reset:RCS-item];
+}
+
+.RCS.is-addToTop {
+  @apply flex flex-col;
+
+  .RCS-controls {
+    @apply -order-1;
+  }
+
+  .RCS-list:not(:empty) {
+    @apply mt-1;
+  }
+}
+
+.RCS-controls {
+  @apply py-2;
+}
+
+.RCS .action-upload {
+  @apply btu-button btu-button-fill-none btu-button-primary btu-button-container-none before:btu-icon before:btu-icon-upload;
+
+  + .RCS-controls {
+    @apply ms-6 inline-block;
+  }
+}
+
+.RCS-item {
+  @apply mb-1.5 flex items-center rounded-lg border border-gray-300 [counter-increment:RCS-item];
+
+  /* Display the status badge on content label when not next to a ComboInput */
+  &:not(:has(> .ContentSelector-select)) {
+    > .ContentSelector-search > .Label {
+      @apply inline-block;
+    }
+  }
+
+  .ComboInput {
+    @apply pl-2 before:flex before:size-5 before:cursor-move before:justify-center before:text-sm before:text-gray-500 before:content-[counter(RCS-item)];
+  }
+
+  &:not(:has(.ComboInput)):not(.Sortable-drag) {
+    @apply before:ms-2 before:flex before:size-5 before:cursor-move before:justify-center before:text-sm before:text-gray-500 before:content-[counter(RCS-item)];
+  }
+
+  /* Hide item until the multisort button gets added from Sortable.js */
+  &.Sortable-item:not(:has(.MultiSortable-buttonToggle), .Sortable-ghost) {
+    @apply opacity-0;
+  }
+}
+
+.RCS-remove {
+  @apply btu-button btu-button-text-hidden btu-button-fill-none btu-button-error btu-button-xs before:btu-icon before:btu-icon-minus touch-device:btu-button-sm;
+}
+
+.RCS-add {
+  @apply btu-button btu-button-fill-none btu-button-primary btu-button-container-none before:btu-icon before:btu-icon-plus focus-visible:border focus-visible:border-solid focus-visible:border-primary-600;
+}
+
+/* Removed RCS items */
+.RCS-item.is-removing {
+  @apply pointer-events-none border-error-400 bg-error-50 before:text-error-400;
+
+  .ComboInput {
+    @apply pointer-events-none bg-error-50 text-error-400 line-through before:text-error-400;
+
+    .ComboInput-label {
+      @apply text-error-400;
+    }
+
+    .ComboInput-icon {
+      @apply hidden;
+    }
+  }
+
+  &:not(:has(.ComboInput)):before,
+  &:not(:has(.ComboInput)) .ContentSelector-search,
+  figcaption,
+  .RCS-caption {
+    @apply text-error-400 line-through;
+  }
+
+  .ContentSelector-search {
+    @apply btu-button-disabled;
+  }
+
+  .RCS-remove {
+    @apply pointer-events-auto before:btu-icon-undo-2 before:text-gray-700;
+  }
+
+  .MultiSortable-buttonToggle {
+    @apply pointer-events-auto;
+  }
+}
+
+/* RCS styles not in a grid */
+.RCS:not(.is-grid) .RCS-item {
+  &:not(:has(.ContentSelector-select))
+    .ContentSelector-search:not(:has(figure)) {
+    @apply ps-2;
+  }
+
+  .ContentSelector-search:has(figure) {
+    @apply me-2 ms-0 flex flex-grow flex-row-reverse items-center no-underline before:btu-button before:btu-button-text-hidden before:btu-button-fill-none before:btu-button-gray before:btu-button-xs before:btu-icon touch-device:before:btu-button-sm before:ms-auto;
+  }
+
+  figure {
+    @apply flex items-center;
+
+    img {
+      @apply m-2 size-9 rounded-[.25rem] bg-gray-50 object-contain;
+    }
+  }
+}
+
+/* RCS Grid */
+.RCS.is-grid {
+  > ol {
+    @apply flex flex-wrap gap-2;
+
+    > .RCS-item {
+      @apply relative grid w-[300px] grid-cols-[auto_1fr_repeat(2,auto)] grid-rows-[auto_1fr_auto] before:col-start-1 before:row-start-1 before:mt-3 before:flex before:size-5 before:justify-center before:p-0 before:text-sm before:text-gray-500 before:content-[counter(RCS-item)];
+
+      &.is-removing {
+        @apply before:text-error-400 before:line-through;
+      }
+
+      .ContentSelector-search {
+        @apply col-span-full row-span-full mx-0 mb-9 mt-11 block h-[calc(9rem+1px)] w-full max-w-full overflow-visible rounded-none border-y border-solid border-gray-300 bg-gray-50 no-underline before:btu-button before:btu-button-text-hidden before:btu-button-fill-none before:btu-button-gray before:btu-button-xs before:btu-icon touch-device:before:btu-button-sm before:!absolute before:bottom-1 before:right-[4.75rem] before:mt-[5px];
+
+        &:not(:has(figure)),
+        &:has(.RCS-placeholderCard) {
+          @apply before:top-full;
+        }
+
+        /* Grid item with no info icon */
+        &:not(:has(~ .ContentSummary-info)) {
+          @apply before:right-10;
+        }
+
+        figure {
+          @apply relative flex w-full justify-center;
+
+          img {
+            @apply max-h-[143px];
+          }
+
+          figcaption {
+            @apply absolute -top-[45px] left-9 w-[calc(100%-7.75rem)] py-3;
+          }
+        }
+
+        /* Caption - when item has no preview available */
+        .RCS-caption {
+          @apply absolute -top-[45px] left-9 w-[calc(100%-7.75rem)] truncate py-3 text-sm font-medium text-gray-700;
+        }
+      }
+
+      .ContentSummary-info {
+        @apply col-start-4 row-start-3 mb-1 mt-0;
+      }
+
+      .ContentSelector-search + .ContentSelector-edit {
+        @apply col-start-3 row-start-3 mb-1;
+      }
+
+      .MultiSortable-buttonToggle {
+        @apply absolute right-10 top-2 after:-left-2 after:bottom-0 after:top-0 after:bg-gray-200;
+      }
+
+      .RCS-remove {
+        @apply absolute right-2 top-2 after:hidden;
+      }
+    }
+  }
+}

package/src/legacy/tool-ui/src/RepeatableTextInput.css

@@ -0,0 +1,71 @@
+.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;
+}