.ui-icon {
  display: inline-block;
  flex: none;
  width: 1.1em;
  height: 1.1em;
  vertical-align: -0.13em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ui-icon + .ui-icon { margin-left: .2em; }

button > .ui-icon:only-child,
.frame-preview-arrow > .ui-icon:only-child,
.support-dialog-close > .ui-icon:only-child,
.photo-viewer-close > .ui-icon:only-child { display: block; margin: auto; }

.lane-empty-note .ui-icon { width: 1.35em; height: 1.35em; }
.saved-color-menu-trigger .ui-icon { width: 1.2em; height: 1.2em; }
.browse-note-icon .ui-icon,
.browse-provider .ui-icon { display: block; }
.recipient-code-icon .ui-icon { display: block; width: 15px; height: 15px; stroke-width: 2.5; }

.browse-hero-actions a { display: inline-flex; align-items: center; gap: 10px; }
.browse-hero-actions .ui-icon { width: 17px; height: 17px; }
.next-button span { display: grid; place-items: center; flex: none; margin-left: 16px; }
.next-button .ui-icon { display: block; width: 19px; height: 19px; }
.browse-card .browse-provider { display: grid; place-items: center; flex: none; }
.browse-card .browse-provider .ui-icon { width: 18px; height: 18px; stroke-width: 2.2; }
.history-card .history-meta .history-song { margin-left: auto; gap: 7px; min-width: 0; max-width: 100%; }
.history-card .history-song .ui-icon { width: 16px; height: 16px; }
.reader-footer .text-button { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.reader-footer .text-button .ui-icon { width: 16px; height: 16px; }
.upload-button { display: inline-flex; align-items: center; gap: 8px; }
.upload-button .ui-icon { width: 16px; height: 16px; }

/* The small status marks use the same vector check as the controls. */
.count-picker button.is-ready::after,
.frame-preview-count.matches-photos::after,
.photo-consent-note .checkbox-label input[type=checkbox]:checked::before {
  content: '';
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 12 5 5L20 6' fill='none' stroke='white' stroke-width='2.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: center;
  background-size: 72%;
  background-repeat: no-repeat;
}
.count-picker button.is-ready::after,
.frame-preview-count.matches-photos::after { background-color: #21834a; }
.photo-consent-note .checkbox-label input[type=checkbox]:checked::before {
  display: block;
  width: 15px;
  height: 15px;
  background-color: transparent;
  background-size: contain;
}

.support-faq summary::after,
.account-settings summary::after {
  content: '';
  width: 9px;
  height: 9px;
  flex: none;
  border-right: 1.8px solid currentColor;
  border-bottom: 1.8px solid currentColor;
  transform: rotate(45deg);
  margin: 0 5px 5px auto;
  font-size: 0;
}
.support-faq details[open] summary::after,
.account-settings[open] summary::after { content: ''; transform: rotate(225deg); margin-bottom: -4px; }

.photo-drop-art::before {
  content: '';
  display: block;
  width: 35px;
  height: 35px;
  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3v14m-5-5 5 5 5-5M4 20h16' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
.photo-drop-indicator.needs-consent .photo-drop-art::before {
  content: '';
  width: 35px;
  height: 35px;
  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 3 10 18H2L12 3Zm0 6v5m0 3h.01' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}