.EIG {
  @apply relative my-[theme(spacing.2)] w-full;
}

.EIG:has(.EIG-item) {
  @apply overflow-clip rounded-lg border border-gray-200 [overflow-clip-margin:content-box];
}

.EIG-item {
  @apply flex w-full flex-wrap items-center gap-x-2 bg-white hover:bg-gray-100;
}

.EIG-item:where(.is-removing) {
  @apply bg-error-50;
}

.EIG-item:where(.is-collapsed, .is-removing) {
  .EIG-title::after {
    @apply btu-icon-chevron-down;
  }
}

/* The active/expanded state */
.EIG-item:where(:not(.is-collapsed, .is-removing)) {
  @apply bg-primary-50;
  .EIG-title {
    @apply text-primary-600 after:text-primary-600;
  }
}

.EIG-item.is-removing > :where(.EIG-title) {
  @apply pointer-events-none text-error-400 line-through after:text-gray-400;
}

.EIG-item.is-removing > :where(.EIG-remove) {
  @apply btu-button-gray before:btu-icon-rotate-ccw;
}

.EIG-item.is-removing > :where(.CIG-large) {
  @apply hidden;
}

.EIG-title {
  --reserved-for-toggle-icon: calc(2 * theme(spacing.sm) + theme(iconSize.md));
  @apply btu-heading-6 relative inline-block h-[44px] min-w-0 cursor-pointer truncate py-3 pe-[var(--reserved-for-toggle-icon)] ps-2 font-normal text-gray-900 [flex:1_1_60%] after:btu-icon after:btu-icon-chevron-up after:absolute after:right-0 after:top-2 after:size-7 after:items-center after:justify-center after:rounded-lg after:bg-white touch-device:after:size-9;
}

.EIG-controls {
  @apply flex gap-6;
}

.EIG-add,
.EIG-search {
  @apply btu-button btu-button-fill-none btu-button-primary btu-button-container-none before:btu-icon;
}

.EIG-add {
  @apply before:btu-icon-plus;
}

.EIG-remove {
  @apply btu-button btu-button-text-hidden btu-button-fill-none btu-button-error btu-button-xs mr-2 bg-white focus-visible:ring-error-100 before:btu-icon before:btu-icon-minus touch-device:btu-button-sm focus-visible:border focus-visible:border-error-600;
}

.EIG-search {
  @apply before:btu-icon-search;
}

.EIG-swap {
  @apply btu-button btu-button-text-hidden btu-button-gray btu-button-xs bg-white before:btu-icon before:btu-icon-arrow-right-left touch-device:btu-button-sm;
}

.EIG-item > .CIG-large {
  @apply w-full grow bg-white p-[--CIG-padding] pt-0 outline outline-[.25rem] outline-white;
}
