/* snippets/icon.liquid: decorative Lucide icons, 20px unless a part sizes them. */
[data-slot='icon'] {
  width: calc(var(--spacing) * 5);
  height: calc(var(--spacing) * 5);
  flex: none;
}
.icon-box {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: calc(var(--spacing) * 10);
  height: calc(var(--spacing) * 10);
  border-radius: var(--radius-lg);
  background: color-mix(in oklch, var(--primary) 10%, transparent);
  color: var(--primary);
}
.icon-box > .icon {
  width: calc(var(--spacing) * 5);
  height: calc(var(--spacing) * 5);
}
/* A 36px secondary tile with a primary icon, as Fulldev UI's contact details. */
.icon-box--secondary {
  width: calc(var(--spacing) * 9);
  height: calc(var(--spacing) * 9);
  border-radius: var(--radius-md);
  background: var(--secondary);
}
.icon-box--secondary > .icon {
  width: calc(var(--spacing) * 4);
  height: calc(var(--spacing) * 4);
}