.bk {
  .bk-command-palette {
    @apply fixed bg-mono-900 z-command-palette w-[600px] left-1/2 -translate-x-1/2 rounded;
    @apply top-120;
    @apply shadow-2xl shadow-mono-950/70;
    @apply border border-mono-600;

    --bk-command-palette-item-height: 46px;
  }

  .bk-command-palette-input {
    @apply text-mono-100 relative;

    .bk-icon {
      @apply absolute top-1/2 left-15 -translate-y-1/2 w-20 h-20;
      svg {
        @apply fill-current;
      }
    }

    input {
      @apply h-60 appearance-none w-full bg-transparent !outline-none !ring-0;
      @apply pl-[45px];
      @apply !border-none;
      @apply text-lg font-bold;

      &::placeholder {
        @apply font-normal text-mono-600;
      }
    }
  }

  .bk-command-palette-results {
    @apply border-t border-t-mono-800 overflow-auto;
    height: calc(var(--bk-command-palette-item-height) * 10);
  }

  .bk-command {
    @apply flex text-mono-300 px-5 w-full text-left gap-10 items-center rounded border border-transparent;
    height: var(--bk-command-palette-item-height);

    .bk-highlight em {
      @apply bg-yellow-normal/20 outline outline-[1px] outline-yellow-normal/50 font-semibold text-white;
    }

    &.bk-is-focused {
      @apply bg-mono-800 border-mono-700 text-white;

      .bk-command-icon {
        @apply text-mono-100;
      }
    }
  }

  .bk-command-icon {
    @apply w-20 h-20 text-mono-500;

    .bk-blokkli-item-icon,
    .bk-icon {
      @apply w-full h-full;
      svg {
        @apply w-full h-full;
        @apply fill-current;
      }
    }
  }

  .bk-command-palette-results-group {
    @apply px-10 relative;
    &:not(:first-child):before {
      content: '';
      @apply absolute top-0 left-0 w-full border-t border-t-mono-700;
    }
    > h2 {
      @apply text-mono-400 uppercase text-sm font-semibold pl-5 flex items-center;
      height: var(--bk-command-palette-item-height);
    }
  }
}
