.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 blokk 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;
      }
    }
  }
}
