/**
 * icons.css - Icon Components
 * 
 * Defines icon styles and their variations
 */

/* Base Icon Style */
.icon {
  padding-inline: var(--space-2xs);
  padding-block: var(--space-2xs);
  max-width: var(--step-4);
  max-height: var(--step-4);
  color: var(--color-primary);
  background-color: var(--blue-3);
  border-radius: var(--border-radius-medium);
  overflow: clip;
  aspect-ratio: 1/1;
}

.icon :is(svg) {
  width: var(--step-3);
  height: var(--step-3);
  color: var(--color-primary);
  background-color: var(--blue-3);
}

/* SVG Styles for Icon Cards */
:is(.list-icon-card, .icon-card) :is(svg) {
  width: var(--step-3);
  height: var(--step-3);
  color: var(--color-primary);
  background-color: var(--blue-3);
}