.ContentSelector-select ~ .ContentSelector-search,
.ContentSelector-edit,
.ContentSelector-clear,
.ContentSelector-search ~ .ContentSummary-info {
  @apply btu-button btu-button-text-hidden btu-button-fill-none btu-button-gray btu-button-xs before:btu-icon touch-device:btu-button-sm;
}

.ContentSelector-clear {
  @apply btu-button-error before:btu-icon-minus;
}

.ContentSelector-edit {
  @apply before:btu-icon-pen;
}

.ContentSelector-search {
  @apply mx-1 before:btu-icon-search focus-visible:z-[1];

  .Label {
    @apply hidden;
  }
}

.ContentSelector-edit.is-disabled,
.ContentSelector-search.is-disabled {
  @apply btu-button-disabled;
}

.ContentSelector-edit,
.ContentSelector-clear {
  @apply [&:not(.is-visible)]:hidden;
}

input[data-read-only='true'] ~ .ContentSelector-edit {
  @apply before:btu-icon-eye;
}

.ContentSelector-search ~ .MultiSortable-buttonToggle,
.RCS-item > .ComboInput ~ .MultiSortable-buttonToggle {
  @apply btu-button-fill-none;
}

/* Adds dividers to the left of the icons */
.ContentSelector-search,
.ContentSelector-select,
.RCS-item > .ComboInput {
  ~ button,
  ~ a {
    @apply mx-1 !overflow-visible after:absolute after:-bottom-1 after:-left-1 after:-top-1 after:w-px after:bg-gray-300 touch-device:after:bottom-0 touch-device:after:top-0 more-contrast:after:bg-gray-400;
  }
}

.ContentSelector-placeholder {
  @apply text-gray-500;
}

.ContentSelector-search figcaption {
  @apply truncate text-sm text-gray-700 no-underline;
}

/* Keep the select full width while the item's ComboInput is still loading */
.ContentSelector-select,
.RCS-item > select {
  @apply w-full min-w-0;
}

.ContentSelector-select + .ComboInput,
.RCS-item > .ComboInput {
  @apply box-border max-h-[36px] !w-full min-w-0 rounded-e-none pe-2 touch-device:pe-3;

  &:not([aria-expanded='true'], :focus-visible) {
    @apply border-transparent more-contrast:!border-transparent;
  }
}

.CIG-small:has(> .ContentSelector-select),
.CIG-small:has(> .ContentSelector-search) {
  @apply mb-1.5 flex w-full items-center rounded-lg border border-gray-300;

  .ContentSummary-info {
    @apply my-0;
  }
}

/* Image preview not available - text only */
input[data-previewable='true']:not([data-preview]) + .ContentSelector-search,
input[data-previewable='true'][data-preview=''] + .ContentSelector-search {
  @apply relative m-0 inline-block w-full truncate rounded-e-none border-solid py-2 pe-10 ps-4 text-sm font-normal text-gray-700 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 touch-device:before:btu-icon before:absolute before:right-2 before:top-1 touch-device:before:top-0;

  &.is-removing {
    @apply text-error-400 line-through;
  }

  ~ .ContentSelector-clear {
    @apply order-1;
  }

  /* Display the status badge on the text preview */
  .Label {
    @apply inline-block;
  }
}

/* Shared styles for having either normal image or image editor */
.CIG-label:has(~ .CIG-small > .ContentSelector-search figure),
.CIG-label:has(
    ~ .CIG-small > .ContentSelector-search ~ .ImageEditor-container
  ) {
  @apply w-full;

  ~ .CIG-small .ContentSelector-search {
    @apply relative 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;
  }
}

/* Has image preview */
.CIG-small:has(> .ContentSelector-search figure) {
  @apply grid grid-cols-[1fr_repeat(4,auto)] items-start overflow-clip pt-1;

  .ContentSelector-search {
    @apply col-span-full row-start-2 m-0 grid grid-cols-subgrid grid-rows-subgrid before:relative before:-top-7 before:right-1 before:col-[2];

    figure {
      @apply col-span-full mt-1 flex w-full justify-center border-t border-gray-300 bg-gray-50;
    }

    img {
      @apply max-h-[30dvh];
    }

    figcaption {
      @apply pointer-events-none absolute -top-7 left-0 w-[calc(100%-8.5rem)] px-4 pb-2 pt-1;
    }
  }

  .ContentSelector-edit {
    @apply col-[3];
  }

  .ContentSelector-clear {
    @apply col-[5];
  }

  .ContentSummary-info {
    @apply col-[4] row-[1];
  }
}

/* Has image preview with image editor */
.CIG-small:has(> .ContentSelector-search ~ .ImageEditor-container) {
  @apply flex-wrap;

  .ContentSelector-search {
    @apply m-0 inline-block w-[calc(100%-6.75rem)] truncate rounded-e-none border-solid py-2 pe-9 ps-4 text-sm font-medium text-gray-700 before:!absolute before:right-1 before:top-1;
  }

  .ContentSelector-clear {
    @apply order-2;
  }

  .ImageEditor-container {
    @apply order-3 w-full max-w-full rounded-t-none border-0 before:rounded-t-none before:border-x-0 before:border-b-0;

    .ImageEditor-preview {
      @apply mx-0 rounded-t-none;
    }

    .ImageEditor-focusToggle {
      @apply after:border-b-0 after:border-s-0;
    }

    .ImageEditor-open {
      @apply after:border-b-0;
    }

    .ImageEditor-editToggle {
      @apply after:border-b-0 after:border-e-0;
    }

    .ComboInput {
      @apply border-b-0;
    }
  }
}

/* Removing */
.CIG-small:has(.ContentSelector-search.is-removing) {
  @apply border-error-400 bg-error-50;
}

.ComboInput.is-removing {
  @apply pointer-events-none h-[38px] bg-error-50 text-error-400 line-through before:text-error-400;

  .ComboInput-label {
    @apply text-error-400;
  }

  .ComboInput-icon {
    @apply hidden;
  }
}

.ContentSelector-search.is-removing {
  @apply btu-button-disabled;

  /* Removing image or image editor */
  > span,
  figcaption {
    @apply text-error-400 line-through;
  }
}

.ContentSelector-clear.is-removing {
  @apply text-gray-700 before:btu-icon-undo-2;
}
