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