#issue-tracker_kireji_app #command-palette {
 position: relative;
 /* hide it until it is ready */
 display: none;

 .field {
  padding: calc(var(--spacing) / 3);
  cursor: text;
  display: flex;
  flex-flow: row nowrap;
  background: var(--bg-light-est);
  line-height: var(--default-font-size);
  height: calc(var(--default-font-size) + var(--spacing) * 2 / 3);

  .input {
   padding-left: calc(var(--spacing) / 3);
  }

  .completion,
  .placeholder {
   opacity: 40%;
  }

  body.modern & {
   box-shadow: inset 0 0 0 1px var(--border-color);
   border-radius: calc(var(--spacing) / 2);

   body.dark & {
    background: var(--bg);
   }
  }

  body.vintage & {
   box-shadow: var(--deep-inset);
   background: var(--bg-page);
  }
 }

 &.open {
  z-index: 1000;
  pointer-events: all;

  body.modern & {
   left: max(calc(100% / 10), (100% - var(--max-width)) / 2);
   right: max(calc(100% / 10), (100% - var(--max-width)) / 2);
   top: calc(var(--spacing));
  }

  .field {

   .input {
    --cursor-color: var(--fg);
    --cursor-width: 1px;
    box-shadow: var(--cursor-width) 0 0 var(--cursor-color);
    animation: blink-cursor 1s steps(1, end) infinite;
   }

   &:has(.input:not(:empty)) {
    .placeholder {
     display: none;
    }
   }

   body.modern & {
    box-shadow: inset 0 0 0 1px var(--accent);
   }
  }
 }

 :is(.autocomplete, .dropdown) {
  position: absolute;
  width: 100%;
  display: flex;
  left: 0;
  padding: 0;
  margin: 0;

  body.vintage & {
   background: var(--bg-page);
  }

  li {
   display: block;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;

   &.selected {
    background: var(--accent-mode-est);
   }

   &:not(.selected):hover {
    background: var(--bg-light-er);

    body.dark & {
     background: var(--bg);
    }
   }

   body.modern & {
    border-radius: calc(var(--spacing) / 4);
    padding: calc(var(--spacing) / 4);
    cursor: pointer;
   }
  }

  body.vintage & {
   border: 1px solid var(--fg-page);
  }
 }

 .autocomplete {
  top: 100%;
  flex-flow: row nowrap;
 }

 .dropdown {
  top: 200%;
  flex-flow: column nowrap;

  body.modern & {

   &::before {
    content: "";
    position: absolute;
    background: var(--bg-light-est);
    top: calc(-.5 * var(--spacing) - var(--default-font-size) * 2 - var(--spacing) * 4 / 3);
    bottom: calc(-.5 * var(--spacing));
    left: calc(-.5 * var(--spacing));
    right: calc(-.5 * var(--spacing));
    z-index: -10;
    border-radius: calc(var(--spacing) / 2);
    box-shadow:
     inset 0 0 0 1px var(--border-color),
     0 0 calc(var(--spacing) * 3) #0007;
   }

   body.dark & {
    &::before {
     background: var(--bg-mode);
    }
   }
  }
 }

 &:not(.open) {
  :is(.autocomplete, .dropdown, .input, .completion) {
   display: none;
  }
 }

 body.modern & {
  position: fixed;
  top: calc((var(--title-bar-height) - var(--default-font-size)) / 2 - var(--spacing) / 3);
  --max-width: 350px;
  left: max(160px, (100% - var(--max-width)) / 2);
  right: max(76px, (100% - var(--max-width)) / 2);

  .match {
   color: var(--accent);
   font-weight: 500;
  }
 }
}

@keyframes blink-cursor {

 50% {
  --cursor-color: #0000;
 }
}

#issue-tracker_kireji_app .header svg {
 display: block;
 fill: none;
 stroke: var(--fg);
 stroke-width: 2;
 height: var(--spacing);
 stroke-linecap: round;
 stroke-linejoin: round;
 padding: 0 calc(var(--spacing) / 4);
}

body.modern #issue-tracker_kireji_app .header>span {
 padding-left: calc(var(--spacing) * 1.5);
}

body.vintage #issue-tracker_kireji_app .header svg {
 padding: 4px;
 box-shadow: var(--deep-outset);
 height: calc(8px + var(--spacing));
 /* Modified version of `--deep-inset`. */
 box-shadow:
  inset -1px -1px black,
  inset 0 1px var(--bg-light-er),
  inset -2px -2px var(--bg-dark),
  inset 1px 2px var(--bg-light-est);
}

body.vintage #issue-tracker_kireji_app .header>:is(.issue-status, .issue-priority) {
 box-shadow:
  inset 0 -1px black,
  inset 1px 1px var(--bg-light-er),
  inset -1px -2px var(--bg-dark),
  inset 2px 2px var(--bg-light-est);
}

body.modern #issue-tracker_kireji_app .header {
 border-bottom: 1px solid var(--border-color);
}

body.vintage #issue-tracker_kireji_app .header {
 margin-right: var(--scrollbar-width);
}

body.vintage #issue-tracker_kireji_app .header>* {
 box-shadow: var(--deep-outset);
}

body.vintage #issue-tracker_kireji_app .header>[data-order]::before {
 margin-right: 2px;
}

#issue-tracker_kireji_app .header>[data-order]::before {
 content: "▼";
}

#issue-tracker_kireji_app .header.ascending>[data-order]::before {
 content: "▲";
}

body.modern #issue-tracker_kireji_app .header>span:not([data-order]) {
 content: "";
}

body.modern #issue-tracker_kireji_app .header>span::before {
 position: absolute;
 left: 0;
 width: calc(1.5 * var(--spacing));
 text-align: center;
}

body.vintage #issue-tracker_kireji_app .header:has(.issue-filter-status-dropdown)>.issue-filter-status,
body.vintage #issue-tracker_kireji_app .header:has(.issue-filter-priority-dropdown)>.issue-filter-priority,
body.vintage #issue-tracker_kireji_app .header>.down {
 box-shadow: inset 0 0 0 1px var(--bg-dark-er);
 background: var(--bg-checker), white;
 padding: 5px 3px 3px 5px;
}

body.vintage #issue-tracker_kireji_app .header>.down {
 background: transparent;
}

#issue-tracker_kireji_app #issue-filter-dropdown {
 position: absolute;
 top: 100%;
}

body.vintage #issue-tracker_kireji_app .issue-filter-status-dropdown {
 right: calc(7 * var(--spacing));
}

body.vintage #issue-tracker_kireji_app .issue-filter-priority-dropdown {
 right: 160px;
}

body.modern #issue-tracker_kireji_app .issue-filter-status-dropdown {
 right: calc(7 * var(--spacing));
}

body.modern #issue-tracker_kireji_app .issue-filter-priority-dropdown {
 right: calc(13 * var(--spacing));
}

#issue-tracker_kireji_app #issue-filter-dropdown {
 background-color: var(--bg);
 z-index: 1000;
}

body.vintage.dark #issue-tracker_kireji_app #issue-filter-dropdown {
 background-color: var(--bg-dark);
}

body.modern #issue-tracker_kireji_app #issue-filter-dropdown {
 padding: var(--spacing);
 border-radius: calc(var(--spacing) / 2)
}

#issue-tracker_kireji_app:has(#issue-filter-dropdown) .issue-table {
 pointer-events: none;
}

body.vintage #issue-tracker_kireji_app .header:after {
 position: absolute;
 right: calc(var(--scrollbar-width) * -1);
 top: 0;
 bottom: 0;
 width: var(--scrollbar-width);
 box-shadow: var(--deep-outset);
 pointer-events: none;
 content: "";
}

body.vintage #issue-tracker_kireji_app .header>:is(.issue-priority, .issue-status) {
 width: calc(var(--column-width) - var(--spacing) - 8px);
}

body.modern #issue-tracker_kireji_app .header>:is(.issue-priority, .issue-status) {
 width: calc(var(--column-width) - calc(1.5 * var(--spacing)));
 text-align: center;
}

body.modern #issue-tracker_kireji_app .header>span:not(.issue-title) {
 box-shadow: inset 0.5px 0 0 var(--border-color), -0.5px 0 0 var(--border-color);
}