/* Badge Base Styles */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.625rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  white-space: nowrap;
}

/* Semantic badge variants */
.badge.success {
  background-color: var(--color-success-bg);
  color: var(--color-success-text);
}

.badge.info {
  background-color: var(--color-info-bg);
  color: var(--color-info-text);
}

.badge.warning {
  background-color: var(--color-warning-bg);
  color: var(--color-warning-text);
}

.badge.danger {
  background-color: var(--color-danger-bg);
  color: var(--color-danger-text);
}

.badge.neutral {
  background-color: var(--color-neutral-bg);
  color: var(--color-neutral-text);
}

/* Specific color badges for non-semantic cases */
.badge-green {
  background-color: var(--color-success-bg);
  color: var(--color-success-text);
}

.badge-blue {
  background-color: var(--color-info-bg);
  color: var(--color-info-text);
}

.badge-purple {
  background-color: #f3e8ff;
  color: #6b21a8;
}

.badge-large {
  padding: 0.375rem 0.75rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
}

/* Circle-button badge overlay (notification dot) */
.circle-button-wrapper {
  position: relative;
  display: inline-flex;
  border-radius: 50%;
  transition: background-color 180ms ease;

  @media (any-hover: hover) {
    &:hover {
      background-color: var(--color-neutral-bg);
    }
  }
}

.circle-button-badge {
  position: absolute;
  top: -0.3rem;
  right: -0.3rem;
  min-width: 1.2rem;
  height: 1.2rem;
  padding: 0 0.3rem;
  border-radius: 9999px;
  background-color: var(--color-danger);
  color: white;
  font-size: 0.65rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  box-shadow: 0 0 0 2px var(--color-bg);
  pointer-events: none;
  animation: badge-enter 400ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes badge-enter {
  from {
    opacity: 0;
    transform: scale(0);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}