/* Copyright Ayers Electronics Inc. All rights reserved. */
/* The Smart Mix face's own parts (js/side-smart-mix.js): the seed chips, the field and what it finds,
   the blend, each pick's reason in the accent, and the drop zone a held card makes of the face. The
   list, notes and foot are the side column's own (css/components/side-column.css). */

.smart-mix-chips {
  display: flex;
  flex-wrap: wrap;
  margin: 0 0 calc(2 * var(--od-tv-px)) -8px;
}
.smart-mix-chip {
  display: inline-flex;
  align-items: center;
  margin: 0 0 calc(4 * var(--od-tv-px)) 8px;
  padding: 2px 4px 2px 2px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-pill);
  font-size: var(--type-label);
}
.smart-mix-chip-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(14 * var(--od-tv-px));
  height: calc(14 * var(--od-tv-px));
  margin-right: 8px;
  border-radius: var(--radius-round);
  background: var(--border-soft);
  font-size: 0.75em;
  font-weight: 600;
}
.smart-mix-chip-picture {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}
.smart-mix-chip-remove {
  margin-left: 4px;
  padding: 4px;
  border-radius: var(--radius-round);
}
.smart-mix-search {
  text-align: left;
  color: var(--muted);
}
.smart-mix-results:not(:empty) {
  margin-top: calc(4 * var(--od-tv-px));
}
.smart-mix-blend {
  display: flex;
  margin-top: calc(6 * var(--od-tv-px));
}
.smart-mix-blend .seg-btn {
  flex: 1 1 0;
}
.smart-mix-picks {
  margin-top: calc(6 * var(--od-tv-px));
}
.track-row-fact.smart-mix-why {
  color: var(--accent-text);
}
.smart-mix-face.drop-ready {
  box-shadow: inset 0 0 0 2px var(--accent-text);
}
.smart-mix-drop-hint {
  margin: calc(6 * var(--od-tv-px)) 0;
  font-size: var(--type-body);
  font-weight: 600;
  color: var(--accent-text);
  text-align: center;
}