.command {
  background-color: var(--color-surface);
  border-radius: var(--rounded-lg);
  border-width: var(--border);
  box-shadow: var(--shadow-xs);
  display: flex;
  flex-direction: column;
}

.command__input {
  --input-background: transparent;
  --input-border-color: transparent;
  --input-box-shadow: none;
  --input-font-size: var(--text-sm);
  --input-outline-size: 0;
  --input-padding: var(--size-2_5);
}

.command__list {
  border-block-start-width: var(--border);
  max-block-size: 300px;
  overflow-y: auto;
}

.command__group {
  display: flex;
  flex-direction: column;
  padding: var(--size-1_5);
  row-gap: 1px;

  &:not(:has(.command__item:not([hidden]))) {
    display: none;
  }
}

.command__group + .command__group {
  border-block-start-width: var(--border);
}

.command__group-header {
  color: var(--color-text-subtle);
  font-size: var(--text-xs);
  font-weight: var(--font-normal);
  padding: var(--size-3) var(--size-2) var(--size-1);
}

.command__empty {
  display: none;
  font-size: var(--text-sm);
  justify-content: center;
  padding-block: var(--size-6);
}

.command__list:not(:has(.command__item:not([hidden]))) {
  .command__empty { display: flex; }
}

.command__item {
  --btn-border-color: transparent;
  --btn-box-shadow: none;
  --btn-font-size: var(--text-sm);
  --btn-font-weight: var(--font-normal);
  --btn-justify-content: start;
  --btn-outline-size: 0;
  --btn-hover-color: color-mix(in srgb, var(--pehuen-primary-100) 58%, white 42%);
  --btn-padding: var(--size-1_5) var(--size-2_5);
  cursor: pointer;
  gap: var(--size-2);
  min-block-size: 2.25rem;
  transition: background-color var(--time-150), color var(--time-150), transform var(--time-150);

  &:hover,
  &:focus-visible {
    --btn-background: color-mix(in srgb, var(--pehuen-primary-100) 46%, white 54%);
    --btn-color: var(--pehuen-primary-800);
  }

  &[aria-selected="true"] {
    --btn-background: color-mix(in srgb, var(--pehuen-primary-100) 72%, white 28%);
    --btn-color: var(--pehuen-primary-800);
    --btn-hover-color: color-mix(in srgb, var(--pehuen-primary-100) 82%, white 18%);
  }
}

.command__item-key {
  color: var(--color-text-subtle);
  font-size: var(--text-xs);
  margin-inline-start: auto;
}

.command-palette {
  flex-shrink: 0;
}

.command-palette__trigger {
  --btn-color: var(--stone-600);
  --btn-hover-color: color-mix(in srgb, var(--pehuen-primary-100) 72%, white 28%);
  --btn-padding: .25rem;
  border-radius: var(--rounded-md);
}

.command-palette__trigger-wrapper {
  display: inline-flex;
  flex-shrink: 0;
}

.command-palette__trigger-icon {
  color: var(--stone-600);
  inline-size: 0.875rem;
  block-size: 0.875rem;
  stroke-width: 2.25;
  transition: color var(--time-150);
}

.command-palette__trigger:hover .command-palette__trigger-icon,
.command-palette__trigger:focus-visible .command-palette__trigger-icon {
  color: var(--pehuen-primary-700);
}

.command-palette__dialog {
  --dialog-size: min(42rem, calc(100vw - 3rem));
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}

.command-palette__panel {
  border-color: color-mix(in srgb, var(--color-border) 70%, var(--pehuen-primary-200) 30%);
  box-shadow: 0 28px 60px -32px rgba(26, 58, 38, 0.42);
  overflow: hidden;
  padding: var(--size-3);
}

.command-palette__input-row {
  align-items: center;
  column-gap: var(--size-2);
  display: flex;
  padding-inline: 0;
}

.command-palette__input-icon {
  color: var(--stone-500);
  flex-shrink: 0;
}

.command-palette__item-icon {
  color: var(--stone-500);
  display: inline-flex;
  flex-shrink: 0;
}

.command-palette__close {
  --btn-color: var(--stone-600);
  --btn-hover-color: color-mix(in srgb, var(--stone-200) 72%, white 28%);
  --btn-padding: .3125rem;
  margin-inline-start: auto;
}