/* =========================================================
   COMMAND SEARCH V0.0.4
   ========================================================= */

body.command-search-open-v004 {
  overflow:
    hidden;
}


/* =========================================================
   TOP BUTTON
   ========================================================= */

.command-trigger-v004 {
  display:
    inline-flex;

  gap:
    7px;

  align-items:
    center;
}


.command-trigger-v004 span {
  color:
    var(--muted-2);

  font-size:
    7px;
}


/* =========================================================
   OVERLAY
   ========================================================= */

.command-overlay-v004 {
  position:
    fixed;

  z-index:
    9999;

  inset:
    0;

  display:
    grid;

  place-items:
    start center;

  padding:
    min(12vh, 110px)
    18px
    30px;
}


.command-overlay-v004[hidden] {
  display:
    none;
}


.command-backdrop-v004 {
  position:
    absolute;

  inset:
    0;

  background:
    rgba(
      0,
      0,
      0,
      .74
    );

  backdrop-filter:
    blur(10px);
}


/* =========================================================
   DIALOG
   ========================================================= */

.command-dialog-v004 {
  position:
    relative;

  z-index:
    1;

  width:
    min(
      760px,
      100%
    );

  max-height:
    min(
      720px,
      78vh
    );

  overflow:
    hidden;

  border:
    1px solid
    var(--line);

  background:
    color-mix(
      in srgb,
      var(--bg) 94%,
      transparent
    );

  box-shadow:
    0 28px 90px
    rgba(
      0,
      0,
      0,
      .52
    );
}


/* =========================================================
   HEADER
   ========================================================= */

.command-header-v004 {
  display:
    flex;

  justify-content:
    space-between;

  align-items:
    center;

  min-height:
    42px;

  padding:
    0 14px;

  border-bottom:
    1px solid
    var(--line-soft);
}


.command-mark-v004,
.command-close-v004,
.command-footer-v004,
.command-section-label-v004,
.command-item-type-v004,
.command-item-meta-v004 {
  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Consolas,
    monospace;

  letter-spacing:
    .055em;
}


.command-mark-v004 {
  color:
    var(--muted);

  font-size:
    8px;
}


.command-close-v004 {
  appearance:
    none;

  padding:
    0;

  border:
    0;

  background:
    transparent;

  color:
    var(--muted);

  font-size:
    7px;

  cursor:
    pointer;
}


.command-close-v004:hover {
  color:
    var(--accent);
}


/* =========================================================
   INPUT
   ========================================================= */

.command-input-wrap-v004 {
  display:
    grid;

  grid-template-columns:
    auto
    minmax(0, 1fr);

  gap:
    12px;

  align-items:
    center;

  padding:
    17px
    16px;

  border-bottom:
    1px solid
    var(--line);
}


.command-input-wrap-v004 > span {
  color:
    var(--accent);

  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Consolas,
    monospace;

  font-size:
    18px;
}


#commandSearchInput {
  width:
    100%;

  min-width:
    0;

  padding:
    0;

  border:
    0;

  outline:
    0;

  background:
    transparent;

  color:
    var(--text);

  font-size:
    clamp(
      20px,
      3vw,
      30px
    );

  letter-spacing:
    -.025em;
}


#commandSearchInput::placeholder {
  color:
    var(--muted-2);
}


/* =========================================================
   RESULTS
   ========================================================= */

.command-results-v004 {
  max-height:
    min(
      520px,
      58vh
    );

  overflow-y:
    auto;

  overscroll-behavior:
    contain;
}


.command-section-label-v004 {
  padding:
    14px
    15px
    7px;

  color:
    var(--muted-2);

  font-size:
    7px;
}


.command-item-v004 {
  appearance:
    none;

  display:
    grid;

  grid-template-columns:
    70px
    minmax(0, 1fr)
    auto;

  gap:
    12px;

  align-items:
    center;

  width:
    100%;

  min-height:
    49px;

  padding:
    9px
    15px;

  border:
    0;

  border-top:
    1px solid
    var(--line-soft);

  background:
    transparent;

  color:
    var(--text);

  text-align:
    left;

  cursor:
    pointer;

  transition:
    background
      100ms ease,
    color
      100ms ease;
}


.command-item-v004:hover {
  background:
    rgba(
      214,
      255,
      63,
      .045
    );

  color:
    var(--accent);
}


.command-item-v004.is-current {
  background:
    rgba(
      214,
      255,
      63,
      .025
    );
}


.command-item-type-v004 {
  color:
    var(--muted-2);

  font-size:
    7px;
}


.command-item-main-v004 {
  min-width:
    0;

  overflow:
    hidden;

  font-size:
    14px;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.command-item-meta-v004 {
  color:
    var(--muted);

  font-size:
    7px;

  text-align:
    right;

  white-space:
    nowrap;
}


.command-item-v004.is-current
.command-item-meta-v004 {
  color:
    var(--accent);
}


/* =========================================================
   EMPTY
   ========================================================= */

.command-empty-v004 {
  display:
    grid;

  gap:
    7px;

  padding:
    42px
    16px;

  color:
    var(--muted);

  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Consolas,
    monospace;

  font-size:
    9px;

  text-align:
    center;
}


.command-empty-v004 span {
  color:
    var(--muted-2);

  font-size:
    8px;
}


/* =========================================================
   FOOTER
   ========================================================= */

.command-footer-v004 {
  display:
    flex;

  justify-content:
    space-between;

  gap:
    12px;

  padding:
    10px
    15px;

  border-top:
    1px solid
    var(--line);

  color:
    var(--muted-2);

  font-size:
    7px;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (
  max-width: 680px
) {

  .command-trigger-v004 span {
    display:
      none;
  }


  .command-overlay-v004 {
    align-items:
      start;

    padding:
      64px
      10px
      10px;
  }


  .command-dialog-v004 {
    max-height:
      calc(
        100vh -
        74px
      );
  }


  .command-results-v004 {
    max-height:
      calc(
        100vh -
        220px
      );
  }


  .command-item-v004 {
    grid-template-columns:
      48px
      minmax(0, 1fr);

    gap:
      8px;
  }


  .command-item-meta-v004 {
    grid-column:
      2;

    text-align:
      left;
  }
}