@brightspot/ui 3.0.1-cms-ui-migration.4 → 3.0.1

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

@@ -1,470 +0,0 @@
-.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

@@ -1,177 +0,0 @@
-.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

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