.ComboInput {
  --ComboInput-listPadding: 1rem;

  @apply inline-flex w-full max-w-full cursor-pointer items-center gap-2 rounded-lg border border-gray-300 bg-white px-4 py-2 focus:border-primary-600;

  &:not(.Page-create &) {
    @apply hover:bg-gray-100;
  }
}

.ComboInput[aria-expanded='true'] {
  @apply ring-primary-100 border-primary-600 ring-4 more-contrast:border-transparent more-contrast:ring-primary-400;

  .ComboInput-icon {
    @apply before:-rotate-180;
  }

  .ComboInput-filter {
    @apply [display:block];
  }

  .ComboInput-label {
    @apply hidden;
  }
}

.ComboInput-label:not(.Page-create *) {
  @apply text-sm text-[var(--combo-label-color,_theme(colors.gray.900))] empty:before:truncate empty:before:text-gray-500 empty:before:content-[attr(data-placeholder)];
}

.ComboInput-label,
.ComboInput-selected {
  @apply w-full truncate;
}

.ComboInput-filter {
  @apply hidden rounded-none border-0 bg-transparent p-0 placeholder:text-gray-500 focus:[box-shadow:none];
}

.ComboInput-icon {
  @apply before:btu-icon before:btu-icon-chevron-down before:transition;
}

.ComboInput-list {
  @apply Dropdown min-w-[300px] max-w-[50vw];

  &.is-missing li:not([data-missing-option='true']) {
    @apply hidden;
  }

  &.is-expanded {
    @apply Dropdown-is-open cursor-pointer;

    .ComboInput-option[aria-selected='true'] {
      .ContentSelector-placeholder {
        @apply more-contrast:text-white;
      }
    }

    &:not(:hover) {
      .ComboInput-option.is-active {
        @apply bg-inherit outline outline-1 outline-primary-600 [box-shadow:inset_0_0_0_4px_theme(colors.primary.100)] [outline-offset:-1px] aria-selected:bg-primary-50 more-contrast:outline-primary-400 more-contrast:[box-shadow:inset_0_0_0_4px_theme(colors.primary.400)] aria-selected:more-contrast:bg-primary-900 aria-selected:more-contrast:text-white;
      }
    }
  }

  &:has(> li:first-child > .ComboInput-heading:first-child),
  &:has(
      > .ComboInput-placeholder-option:first-child
        + li
        > .ComboInput-heading:first-child
    ) {
    @apply pt-0;
  }

  &[aria-multiselectable='true'] {
    .ComboInput-option[role='option']:where(
        :not([data-create], [data-sublist])
      ) {
      .ComboInput-check {
        @apply blokk scale-50 opacity-0 transition-[opacity_scale] duration-250 [transition-timing-function:theme(transitionTimingFunction[spring-stiff])] before:btu-icon before:btu-icon-check before:text-inherit;
      }

      &[aria-selected='true'] {
        .ComboInput-check {
          @apply scale-100 opacity-100;
        }
      }
    }
  }
}

.ComboInput-heading {
  @apply flex flex-row-reverse items-center justify-end gap-3 border-t bg-white px-4 py-2 text-xs text-gray-500 data-[hidden=true]:hidden;

  .ComboInput-list > li:first-child > &,
  .ComboInput-list > .ComboInput-placeholder-option:first-child + li > & {
    @apply border-t-0;
  }
}

.ComboInput-option {
  @apply grid px-4 py-2 text-sm text-gray-900 [overflow-wrap:anywhere] [word-break:normal];

  &:not(.nested):not([aria-selected='true']) {
    @apply hover:bg-gray-100;
  }

  &:where(&[role='option']:not([data-create], [data-sublist])) {
    @apply grid-cols-[auto_minmax(0,1fr)_theme(spacing.6)] items-center gap-2;

    &[aria-selected='true'] {
      @apply bg-primary-50 text-primary-800 more-contrast:bg-primary-900 more-contrast:text-white;
    }
  }

  &:where(&[data-select-all='true'], &[data-create='true']:not(.nested)) {
    @apply border-b;

    & + .ComboInput-placeholder-option.is-empty + li .ComboInput-heading {
      @apply border-t-0;
    }
  }

  &:where(
      &.is-hidden,
      &[data-no-permission='true'],
      &[data-is-owner='true'],
      &.is-empty
    ) {
    @apply hidden;
  }
}

.ComboInput-check:where([aria-hidden='true']) {
  @apply opacity-0;
}

.ComboInput-option-iframe {
  @apply pointer-events-none;
}

.ComboInput-placeholder-option {
  @apply hidden;
}

/* Caps height of uninitialized ComboInputs */
select {
  @apply max-h-[2.25rem];
}

/********************************/
/***** "Create New" Options *****/
/********************************/
.ComboInput-option > a[data-create='true'] {
  @apply btu-heading-6 blokk px-4 py-2 no-underline before:btu-icon before:btu-icon-plus before:me-2;
}

.ComboInput-option[data-create='true'],
.ComboInput-option.nested li {
  @apply p-0;
}

/** multiple content type options **/
.ComboInput-option-nestedLabel {
  @apply flex select-none items-center justify-between px-4 py-2 text-xs text-gray-500;
}

.ComboInput-option-arrow-icon {
  @apply before:btu-icon before:btu-icon-chevron-down before:transition;

  .ComboInput-option.nested[aria-expanded='true'] & {
    @apply before:-rotate-180;
  }
}

/*****************************/
/***** Favorites styling *****/
/*****************************/
.ComboInput-option-favorite {
  @apply flex size-6 items-center justify-center touch-device:size-6 touch-device:p-1;
}

.ComboInput-option-favorite.is-unstarred {
  @apply invisible touch-device:visible;

  .ComboInput-option.is-active & {
    @apply visible;
  }

  .ComboInput-option-favorite-icon {
    @apply size-4 before:btu-icon before:btu-icon-star before:[--icon-size:theme(size.4)];
  }
}

.ComboInput-option-favorite:not(.is-unstarred)
  .ComboInput-option-favorite-icon {
  @apply blokk size-4 bg-primary-800 [clip-path:theme(shape.starFilled)];
}

/*****************************/
/***** One-off instances *****/
/*****************************/
.DashboardWidget-filters .ComboInput {
  @apply w-auto;
}

.DashboardWidget-pagination .ComboInput {
  @apply border-transparent;
}

/* Sites access widget - has checkbox to select site group */
.ComboInput-selectOption {
  @apply before:btu-icon before:btu-icon-square;

  &.is-checked {
    @apply before:btu-icon-square-check;
  }
}

/* Module picker - has template previews in iframes */
:where(.ComboInput-label, .ComboInput-option):has(.Card) {
  .ComboInput-option-iframe {
    @apply mb-1 max-w-72;

    .Card-title {
      @apply font-medium;
    }
  }
}

.ComboInput-label:has(.ComboInput-option-iframe .Card) {
  @apply w-72;
}

.ContentSelector-select + .ComboInput {
  @apply w-1/2;

  /* Display status badge on content */
  .ComboInput-selected {
    .Label {
      @apply inline-block;
    }
  }
}

select[name='authorPersonaId'] + .ComboInput {
  @apply -order-1 w-fit max-w-[25%];
}

select[name='authorPersonaId'].is-readOnly + .ComboInput {
  @apply pointer-events-none opacity-50;
}
