/**
 * Icon Display Styles
 * Handles both emoji and custom SVG icon rendering
 */

.icon-display {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Small icons */
.icon-display.icon-small .emoji-icon,
.icon-display.icon-small .svg-icon {
  font-size: 20px;
  width: 20px;
  height: 20px;
}

/* Medium icons */
.icon-display.icon-medium .emoji-icon {
  font-size: 32px;
}

.icon-display.icon-medium .svg-icon {
  width: 32px;
  height: 32px;
}

/* Large icons */
.icon-display.icon-large .emoji-icon {
  font-size: 48px;
}

.icon-display.icon-large .svg-icon {
  width: 48px;
  height: 48px;
}

/* SVG styling */
.icon-display .svg-icon {
  object-fit: contain;
}

/* Loading and error states */
.icon-display .icon-loading {
  opacity: 0.5;
  font-size: inherit;
}

.icon-display .icon-error {
  opacity: 0.5;
  color: #999;
}

/* No icon placeholder */
.icon-display .no-icon {
  color: #ccc;
  font-style: italic;
}