.commander {
  position: fixed;
  inset: 0;
  background: oklch(0 0 0 / 10%);
  z-index: 999;
  display: flex;
  justify-content: center;
  align-items: center;

  &.hidden {
    display: hidden;
  }
  .cmd-panel {
    border-radius: 0.25rem;
    box-shadow: var(--pane-shadow);
    background: var(--pane-background, oklch(1 0 0));
    width: 100%;
    height: 100%;
    max-width: 45rem;
    max-height: 30rem;
    display: flex;
    flex-direction: column;
  }

  input {
    padding: 1rem;
    width: 100%;
    border-bottom: var(--input-border);
    border-radius: 0.25rem 0.25rem 0 0;
    flex: 0;
  }

  ul.results {
    flex: 1;
    overflow: auto;
    li {
      padding: 0.5rem;
      display: flex;
      gap: 0.25rem;

      span + span {
        &::before {
          content: ":";
          opacity: 0.5;
          margin-right: 0.25rem;
        }
      }
      &.selected {
        background: color-mix(
          in oklab,
          var(--bg-selection-light) 40%,
          transparent
        );
      }
    }
  }
  ul.results:empty {
    display: none;
  }

  .placeholder {
    display: none;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    flex: 1;
    color: var(--text-color);
    gap: 1rem;
    .infos {
      text-align: center;
    }
    h4 {
      font-size: 2rem;
    }
    font-size: 1.5rem;
    .ad {
      font-size: 0.875rem;
    }
  }

  ul.results:empty + .placeholder {
    display: flex;
  }
}