.Dropdown {
  --Dropdown-markerSize: 0px;
  --Link-hoverDecoration: none;

  @apply invisible fixed z-[2000000] max-h-[45dvh] min-w-[240px] max-w-[45vw] origin-top scale-y-0 overflow-auto rounded-lg border border-solid border-gray-100 bg-white py-2 opacity-0 shadow-lg transition-[opacity,_transform,_visibility] duration-300;

  &[data-tether-rx='l'] {
    @apply /*rtl:ignore*/ left-[--Tether-rl];
  }

  &[data-tether-rx='r'] {
    @apply /*rtl:ignore*/ right-[calc(100vw-var(--Tether-rl)-var(--Tether-rw))];
  }

  &[data-tether-ry='t'] {
    @apply top-[calc(var(--Tether-rt)+var(--Tether-rh)+var(--Dropdown-markerSize))];

    &:not(.ComboInput-list) {
      @apply max-h-[calc(100dvh-var(--Tether-rt)-var(--Tether-rh)-theme(spacing.xl))];
    }
  }

  &[data-tether-ry='b'] {
    @apply bottom-[calc(100dvh-var(--Tether-rt)+var(--Dropdown-markerSize))] origin-bottom;

    &:not(.ComboInput-list) {
      @apply max-h-[calc(var(--Tether-rt)-var(--Page-headerBottom)-theme(spacing.xl))];
    }

    [popover] & {
      @apply bottom-[calc(100%-var(--Tether-rt)+var(--Dropdown-markerSize))];
    }
  }

  &:where(.ComboInput-list) {
    --Dropdown-markerSize: 4px;
  }
}

.Dropdown-is-open {
  @apply visible transform-none opacity-100 empty:hidden;
}

.Dropdown-item {
  @apply blokk w-full cursor-pointer bg-transparent px-4 py-2 text-left text-sm font-normal text-gray-700 no-underline focus:ring-offset-0 focus:[&_a]:ring-offset-0 hover:bg-gray-100 hover:text-gray-700 focus:rounded-none focus:bg-primary-50 focus:text-gray-700 focus:ring-0 [&_a]:font-normal [&_a]:text-gray-700 [&_a]:no-underline focus:[&_a]:rounded-none focus:[&_a]:ring-0;

  &[disabled] {
    @apply pointer-events-none text-gray-300 [&_a]:text-gray-300;
  }
}

/* Make sure the click target of inline elements take up the whole width of the dropdown item. */
.Dropdown-item > :where(span, a) {
  @apply blokk;
}

.Dropdown-item-selected {
  @apply flex items-center after:btu-icon after:btu-icon-check after:ml-auto;
}

.Dropdown-button {
  @apply btu-button btu-button-text-hidden btu-button-fill-none btu-button-gray btu-button-sm before:btu-icon before:btu-icon-ellipsis;
}
