basecoat/src/css/components/command.css

/* Command */
@layer components {
  .command-dialog {
    @apply inset-y-0 opacity-0 transition-all transition-discrete;

    &:is([open], :popover-open) {
      @apply opacity-100;

      &::backdrop {
        @apply opacity-100;
      }

      > * {
        @apply scale-100;
      }

      @starting-style {
        @apply opacity-0;

        &::backdrop {
          @apply opacity-0;
        }

        > * {
          @apply scale-95;
        }
      }
    }

    &::backdrop {
      @apply opacity-0 transition-all transition-discrete;
    }

    > * {
      @apply fixed top-[50%] left-[50%] z-50 flex max-h-[min(640px,calc(100%_-_2rem))] w-full max-w-[calc(100%_-_2rem)] -translate-x-1/2 -translate-y-1/2 scale-95 flex-col overflow-hidden transition-all sm:max-w-lg;
    }

    > * > :is(button, form[method='dialog']) {
      @apply absolute;
    }

    > * > :is(button, form[method='dialog'] > button) {
      @apply inline-flex items-center justify-center opacity-70 transition-opacity hover:opacity-100 focus-visible:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0;
    }

    > * > :is(button, form[method='dialog'] > button) > svg:not([class*='size-']) {
      @apply size-4;
    }
  }

  .command {
    @apply flex w-full flex-col overflow-hidden;
  }

  .command > header {
    @apply flex items-center;
  }

  .command > header svg {
    @apply shrink-0;
  }

  .command > header input {
    @apply w-full bg-transparent outline-hidden disabled:cursor-not-allowed disabled:opacity-50;
  }

  .command [role='menu'] {
    @apply overflow-x-hidden overflow-y-auto outline-hidden;
  }

  .command [role='menuitem'] {
    @apply aria-hidden:hidden relative flex w-full cursor-default items-center truncate outline-hidden select-none disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0;
  }

  .command [role='menuitem'].active {
    @apply bg-accent text-accent-foreground;
  }

  .command [role='group'] {
    @apply overflow-hidden;
  }

  .command [role='group']:not(:has([role='menuitem']:not([aria-hidden='true']))) {
    @apply hidden;
  }

  .command [role='heading'] {
    @apply flex;
  }

  .command [role='separator'] {
    @apply border-0;
  }

  .command [data-shortcut] {
    @apply ms-auto;
  }

  .command [data-indicator] {
    @apply ms-auto opacity-0;
  }

  .command [role='menuitem'][data-checked='true'] [data-indicator],
  .command [role='menuitem'][aria-selected='true'] [data-indicator] {
    @apply opacity-100;
  }

  .command [role='menuitem']:has([data-shortcut]) [data-indicator] {
    @apply hidden;
  }

  .command [role='menu']:not(:has([role='menuitem']:not([aria-hidden='true'])))::before {
    @apply flex items-center justify-center truncate;
  }

  .command [role='menu'][data-empty]:not(:has([role='menuitem']:not([aria-hidden='true'])))::before {
    @apply content-[attr(data-empty)];
  }

  .command [role='menu']:not([data-empty]):not(:has([role='menuitem']:not([aria-hidden='true'])))::before {
    @apply content-['No_results_found'];
  }

  .command:not([data-command-initialized]) [role='menuitem']:not([aria-disabled='true']):not(:disabled):hover {
    @apply bg-accent text-accent-foreground;
  }

  .command:has(> header input:not(:placeholder-shown)) [role='separator'] {
    @apply hidden;
  }
}