/* Badges and status indicators */

/* Status / category badges */
.badge {
  display: inline-block;
  padding: 0.1875rem 0.625rem;
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: var(--border-radius-full);
  line-height: 1.4;
  white-space: nowrap;
}

.badge-primary {
  background-color: #dbeafe;
  color: #1d4ed8;
}

.badge-success {
  background-color: var(--color-success-bg);
  color: #065f46;
}

.badge-danger {
  background-color: var(--color-danger-bg);
  color: #991b1b;
}

.badge-warning {
  background-color: var(--color-warning-bg);
  color: #92400e;
}

.badge-neutral {
  background-color: var(--color-gray-100);
  color: var(--color-text-light);
}

.badge-info {
  background-color: #cffafe;
  color: #164e63;
}

.badge-teal {
  background-color: #ccfbf1;
  color: #134e4a;
}

.badge-purple {
  background-color: #ede9fe;
  color: #5b21b6;
}

/* Status badge */
.status-badge {
  display: inline-block;
  padding: 0.1875rem 0.625rem;
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: var(--border-radius-full);
  letter-spacing: 0;
}

.status-badge--active {
  background-color: var(--color-success-bg);
  color: #065f46;
}

.status-badge--inactive {
  background-color: var(--color-gray-100);
  color: var(--color-text-light);
}

.status-badge--pending {
  background-color: var(--color-warning-bg);
  color: #92400e;
}

.status-badge--error {
  background-color: var(--color-danger-bg);
  color: #991b1b;
}

.status-badge--warning {
  background-color: var(--color-warning-bg);
  color: #92400e;
}

.status-badge--info {
  background-color: #dbeafe;
  color: #1d4ed8;
}

.status-badge--sm {
  font-size: 0.7rem;
  white-space: nowrap;
}

/* Count badge (number in circle) */
.count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  height: 1.5rem;
  padding: 0 0.375rem;
  background-color: #dbeafe;
  color: #1d4ed8;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: var(--border-radius-full);
}

/* Badge dropdown menu */
.badge-menu {
  position: relative;
  display: inline-flex;
}

.badge-menu--open {
  z-index: 300;
}

.badge-menu__trigger {
  cursor: pointer;
  border: none;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  transition: background-color 0.15s;
  /* background, color, padding, font-size all come from the status-badge classes */
}

.badge-menu--open .badge-menu__trigger.status-badge--active {
  background-color: #a7f3d0;
}

.badge-menu--open .badge-menu__trigger.status-badge--warning {
  background-color: #fde68a;
}

.badge-menu__caret {
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  border-top: 4px solid currentColor;
  opacity: 0.7;
  flex-shrink: 0;
  transition: transform 0.15s;
}

.badge-menu--open .badge-menu__caret {
  transform: rotate(180deg);
}

.badge-menu__trigger.status-badge--active:hover {
  background-color: #a7f3d0;
}

.badge-menu__trigger.status-badge--warning:hover {
  background-color: #fde68a;
}

.badge-menu__dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 200;
  background: white;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  min-width: max-content;
  overflow: visible;
  transform-origin: top left;
  animation: none;
}

/* Notch arrow pointing up, aligned with badge left */
.badge-menu__dropdown::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 0.75rem;
  transform: rotate(45deg);
  width: 8px;
  height: 8px;
  background: white;
  border-left: 1px solid var(--color-border);
  border-top: 1px solid var(--color-border);
}

@keyframes badge-menu-slide-down {
  from {
    opacity: 0;
    transform: translateY(-6px) scaleY(0.85);
  }

  to {
    opacity: 1;
    transform: translateY(0) scaleY(1);
  }
}

.badge-menu__dropdown--open {
  display: block;
  animation: badge-menu-slide-down 0.15s ease-out forwards;
}

.badge-menu__item-form {
  display: block;
}

.badge-menu__item {
  display: block;
  width: 100%;
  padding: 0.5rem 0.75rem;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.8125rem;
  color: var(--color-text);
  white-space: nowrap;
  font-family: inherit;
}

.badge-menu__item:hover {
  background-color: var(--color-gray-50);
}