/* Cosmos stroke SVG icons — see cosmos-icons.js + DESIGN.md Icons */

.cosmos-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 0;
  vertical-align: middle;
  color: inherit;
}

.cosmos-icon svg {
  display: block;
}

.cosmos-icon--sm { width: 16px; height: 16px; }
.cosmos-icon--md { width: 20px; height: 20px; }
.cosmos-icon--lg { width: 36px; height: 36px; color: var(--acc2, var(--acc)); }

/* Search wrapper prefix */
.sw .si .cosmos-icon,
.sw .si[data-cosmos-icon] {
  color: var(--text3);
}

/* Buttons with leading icon */
.btn .cosmos-icon {
  margin-right: 6px;
}

.btn .cosmos-icon:only-child,
.btn.icon-only .cosmos-icon {
  margin-right: 0;
}

.btn.primary .cosmos-icon,
.btn.sm.primary .cosmos-icon {
  color: inherit;
}

/* Empty states */
.empty-ic .cosmos-icon,
.empty-ic[data-cosmos-icon] {
  margin-bottom: 4px;
}

.st-empty-cart .cosmos-icon--lg {
  margin-bottom: 8px;
  color: var(--text3);
}

/* Alert prefix icons */
.alert > span:first-child .cosmos-icon,
.alert > span:first-child[data-cosmos-icon] {
  flex-shrink: 0;
  margin-top: 1px;
}

.alert-blue > span:first-child .cosmos-icon,
.alert-blue > span:first-child[data-cosmos-icon] {
  color: var(--acc2, var(--acc));
}

.alert-gold > span:first-child .cosmos-icon,
.alert-gold > span:first-child[data-cosmos-icon] {
  color: var(--gold);
}

.alert-green > span:first-child .cosmos-icon,
.alert-green > span:first-child[data-cosmos-icon] {
  color: var(--green);
}

.alert-red > span:first-child .cosmos-icon,
.alert-red > span:first-child[data-cosmos-icon] {
  color: var(--red);
}

/* Pipeline step titles */
.pstep-title .cosmos-icon {
  margin-right: 4px;
  vertical-align: -2px;
}

/* Refresh-only icon button */
.btn .cosmos-icon--sm + span,
.btn > .cosmos-icon--sm:last-child {
  margin-right: 0;
}

.btn.fy-icon-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}