@layer components {
  body > nav > search > button {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    width: fit-content;
    height: calc(var(--baseline) * 4);
    padding-inline: var(--spacing-sm);
    border: 0;
    box-shadow: none;
    border-radius: var(--radius-default);
    background: transparent;
    color: var(--text-color);
    font-size: var(--font-size);
    cursor: pointer;

    svg {
      flex: none;
    }

    &:hover {
      background: var(--background-tint-1);
    }

    &:focus-visible {
      outline: 2px solid var(--text-color);
      outline-offset: 1px;
    }
  }

  body > nav > search el-dialog-panel {
    --item-text: var(--gray-950);
    --item-selected-bg: var(--background-tint-1);
    --item-selected-text: var(--text-color);

    width: min(100%, calc(var(--baseline) * 72));
    overflow: hidden;
  }

  el-command-palette > label {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding-inline: var(--spacing-md);
    box-shadow: 0 1px 0 var(--border-color);

    svg {
      flex: none;
      color: var(--muted-color);
      pointer-events: none;
    }

    input {
      flex: 1;
      min-width: 0;
      width: 100%;
      height: calc(var(--baseline) * 6);
      margin: 0;
      padding: 0;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
      color: var(--text-color);
      font-size: var(--font-size);
      line-height: calc(var(--baseline) * 6);
      outline: none;

      &::placeholder {
        color: var(--muted-color);
      }

      &:focus,
      &:focus-visible {
        outline: none;
        box-shadow: none;
      }
    }
  }

  el-command-list {
    display: block;
    max-height: calc(var(--line-height) * 12);
    overflow-y: auto;
    padding-block: var(--spacing-sm);

    &[hidden] {
      display: none;
    }
  }

  el-defaults,
  el-command-group {
    display: block;

    &[hidden] {
      display: none;
    }
  }

  el-command-group > h2 {
    margin: 0;
    padding-block-start: var(--spacing-sm);
    padding-inline: var(--spacing-md);
    color: var(--muted-color);
    font-size: var(--font-size-sm);
    line-height: var(--line-height);
  }

  el-command-group > a {
    --text-color: var(--item-text);
    --link-color: var(--item-text);

    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--spacing-sm);
    width: 100%;
    margin: 0;
    padding-block: var(--spacing-sm);
    padding-inline: var(--spacing-md);
    background: transparent;
    color: var(--text-color);
    text-decoration: none;
    cursor: default;

    &[hidden] {
      display: none;
    }

    &::before {
      content: none;
    }

    &:focus,
    &:focus-visible {
      outline: none;
    }

    &[aria-selected="true"] {
      --text-color: var(--item-selected-text);
      --link-color: var(--item-selected-text);

      background: var(--item-selected-bg);
      color: var(--item-selected-text);
    }
  }

  /* Match .button icon treatment for link_to_with_icon navigation items. */
  el-command-group > a > span:first-child:has(svg) {
    flex: none;
    line-height: 0;
    color: var(--accent-color);

    & svg {
      stroke-width: 2px;
    }
  }

  .command-item-primary {
    display: flex;
    min-width: 0;
    align-items: baseline;
    gap: var(--spacing-md);
  }

  .command-item-number {
    flex: none;
    color: var(--muted-color);
    font-variant-numeric: tabular-nums;
  }

  .command-item-customer {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .command-item-date {
    flex: none;
    margin-inline-start: auto;
    color: var(--muted-color);
  }

  el-no-results {
    display: block;
    padding: var(--spacing-md);
    color: var(--muted-color);

    &[hidden] {
      display: none;
    }
  }
}