/* =========================================================
   SEARCH & DISCOVERY UX PACK V0.0.4
   ========================================================= */

.search-discovery-v004 {
  grid-column:
    1 / -1;

  display:
    grid;

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

  gap:
    10px;

  align-items:
    center;

  min-width:
    0;

  padding:
    9px 0 1px;
}

.search-discovery-v004[hidden] {
  display:
    none;
}


.search-discovery-label-v004 {
  color:
    var(--muted-2);

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

  font-size:
    7px;

  letter-spacing:
    .08em;

  white-space:
    nowrap;
}


.search-history-list-v004 {
  display:
    flex;

  gap:
    5px;

  align-items:
    center;

  min-width:
    0;

  overflow-x:
    auto;

  scrollbar-width:
    none;
}


.search-history-list-v004::-webkit-scrollbar {
  display:
    none;
}


.search-history-chip-v004,
.search-discovery-action-v004 {
  appearance:
    none;

  flex:
    0 0 auto;

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

  background:
    transparent;

  color:
    var(--muted);

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

  cursor:
    pointer;

  transition:
    border-color
      120ms ease,
    color
      120ms ease,
    background
      120ms ease;
}


.search-history-chip-v004 {
  max-width:
    190px;

  padding:
    5px
    7px;

  overflow:
    hidden;

  font-size:
    8px;

  line-height:
    1;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.search-history-chip-v004:hover {
  border-color:
    var(--line);

  color:
    var(--text);

  background:
    rgba(
      255,
      255,
      255,
      .02
    );
}


.search-discovery-actions-v004 {
  display:
    flex;

  gap:
    9px;

  align-items:
    center;
}


.search-discovery-action-v004 {
  padding:
    0;

  border:
    0;

  font-size:
    7px;

  letter-spacing:
    .05em;
}


.search-discovery-action-v004:hover {
  color:
    var(--accent);
}


.search-discovery-action-v004[hidden] {
  display:
    none;
}


/* =========================================================
   MATCH HIGHLIGHT
   ========================================================= */

.search-highlight-v004 {
  padding:
    0;

  border-bottom:
    1px solid
    var(--accent);

  background:
    transparent;

  color:
    var(--accent);

  font:
    inherit;
}


/*
  Keep the highlight from stealing
  pointer events from card/name buttons.
*/
.card-name
.search-highlight-v004,
.supported-name
.search-highlight-v004,
.viewer-name
.search-highlight-v004 {
  pointer-events:
    none;
}


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

@media (
  max-width: 680px
) {

  .search-discovery-v004 {
    grid-template-columns:
      auto
      minmax(0, 1fr);

    gap:
      7px;

    padding-top:
      7px;
  }


  .search-discovery-actions-v004 {
    grid-column:
      1 / -1;

    justify-content:
      flex-end;
  }


  .search-history-chip-v004 {
    max-width:
      140px;

    padding:
      4px
      6px;

    font-size:
      7px;
  }
}