:root {
  --bj-icon-size: 1rem;
  --bj-icon-stroke: 1.8;
}

.bj-icon {
  display: inline-block;
  width: var(--bj-icon-size);
  height: var(--bj-icon-size);
  flex: 0 0 auto;
  vertical-align: -0.125em;
  stroke-width: var(--bj-icon-stroke);
}

.bj-icon--sm {
  --bj-icon-size: 0.875rem;
}

.bj-icon--md {
  --bj-icon-size: 1.125rem;
}

.bj-icon--lg {
  --bj-icon-size: 1.5rem;
}

.bj-icon--xl {
  --bj-icon-size: 2.5rem;
}

.bj-icon-label,
.bj-icon-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.bj-icon-button {
  justify-content: center;
}

.bj-spin {
  animation: bj-icon-spin 0.9s linear infinite;
}

@keyframes bj-icon-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .bj-spin {
    animation-duration: 1.8s;
  }
}