/* Read-only plan status badge: quiet chip; the × affordance appears on
   hover/focus and the whole chip is the /plan off button. */

.wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 8px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--dsw-alias-label-secondary);
  font-size: 14px;
  line-height: 20px;
  cursor: pointer;
}

.chip:hover:not(:disabled) {
  background: var(--dsw-alias-interactive-bg-hover);
}

.chip:focus-visible {
  outline: 2px solid var(--dsw-alias-label-secondary);
  outline-offset: 2px;
}

.chip:disabled {
  opacity: 0.6;
  cursor: default;
}

.close {
  display: inline-flex;
  align-items: center;
  color: var(--dsw-alias-label-caption);
  opacity: 0;
  transition: opacity 0.12s ease;
}

.chip:hover .close,
.chip:focus-visible .close {
  opacity: 1;
  color: var(--dsw-alias-label-secondary);
}

.error {
  color: var(--dsw-alias-state-error-primary);
  font-size: 12px;
  line-height: 18px;
}
