/* Base icon styles */
.icon {
  width: 24px;
  height: 24px;
  display: inline-block;
  color: inherit;
}

/* Size variations */
.icon-sm {
  width: 16px;
  height: 16px;
}

.icon-md {
  width: 24px;
  height: 24px;
}

.icon-lg {
  width: 32px;
  height: 32px;
}

.icon-xl {
  width: 48px;
  height: 48px;
}

/* Color variations */
.icon-primary {
  color: #007bff;
}

.icon-secondary {
  color: #6c757d;
}

.icon-success {
  color: #28a745;
}

.icon-danger {
  color: #dc3545;
}

.icon-warning {
  color: #ffc107;
}

.icon-info {
  color: #17a2b8;
}

.icon-light {
  color: #f8f9fa;
}

.icon-dark {
  color: #343a40;
}

/* Interactive states */
.icon-button {
  cursor: pointer;
  transition: color 0.2s ease;
}

.icon-button:hover {
  color: #007bff;
}

.icon-button:active {
  transform: scale(0.95);
}

/* Usage examples */
.navbar .icon {
  color: #ffffff;
}

.sidebar .icon {
  color: #6c757d;
  width: 20px;
  height: 20px;
}

.card .icon {
  color: #007bff;
}

.footer .icon {
  color: #6c757d;
  width: 18px;
  height: 18px;
}