/*
 * .auDO icon support
 * Self-hosted SVG symbols, referenced with decorative aria-hidden SVGs.
 */

.audo-icon {
  display: block;
  width: 1.15em;
  height: 1.15em;
  flex: 0 0 auto;
  color: currentColor;
  fill: none;
  stroke: currentColor;
  vertical-align: -0.15em;
}

.audo-icon--accent {
  color: var(--accent);
}

.audo-icon--muted {
  color: var(--muted);
}

.home-card-icon,
.metric-icon,
.directory-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
}

.home-card-icon,
.directory-card-icon {
  width: 2.25rem;
  height: 2.25rem;
  margin: 0.35rem 0 0.85rem;
  border-radius: 0.95rem;
  background: rgba(240, 178, 77, 0.085);
}

.home-card-icon .audo-icon,
.directory-card-icon .audo-icon {
  width: 1.25rem;
  height: 1.25rem;
}

.metric-icon {
  width: 1.6rem;
  height: 1.6rem;
  margin-bottom: 0.65rem;
  opacity: 0.92;
}

.metric-icon .audo-icon {
  width: 1.1rem;
  height: 1.1rem;
}

.home-journey-card--primary .home-card-icon,
.state-directory-card--full .home-card-icon,
.report-feature-latest .directory-card-icon,
.report-row-featured-lead .directory-card-icon,
.state-topic-card .directory-card-icon,
.signal-directory-card .directory-card-icon,
.cohort-directory-card .directory-card-icon {
  background: rgba(240, 178, 77, 0.12);
}

.report-row .directory-card-icon,
.report-feature .directory-card-icon {
  margin-top: 0;
}

.report-row-copy .directory-card-icon,
.report-feature-copy .directory-card-icon {
  margin-bottom: 0.7rem;
}

.state-principle-card .directory-card-icon,
.cohort-principle-card .directory-card-icon {
  margin-top: 0;
}

html[data-theme="light"] .home-card-icon,
html[data-theme="light"] .directory-card-icon {
  background: rgba(185, 119, 16, 0.09);
}

html[data-theme="light"] .home-journey-card--primary .home-card-icon,
html[data-theme="light"] .state-directory-card--full .home-card-icon,
html[data-theme="light"] .report-feature-latest .directory-card-icon,
html[data-theme="light"] .report-row-featured-lead .directory-card-icon,
html[data-theme="light"] .state-topic-card .directory-card-icon,
html[data-theme="light"] .signal-directory-card .directory-card-icon,
html[data-theme="light"] .cohort-directory-card .directory-card-icon {
  background: rgba(185, 119, 16, 0.12);
}