@use '@/styles/mastodon/mixins';

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  min-width: 1lh;
  padding: var(--space-2xs);
  gap: var(--space-2xs);
  border-radius: var(--radius-xs);
  color: var(--color-text-primary);
  font-size: 13px;
  font-weight: 400;

  &:not(.badgeWithoutIcon) {
    padding-inline-end: var(--space-xs);
  }

  > svg {
    flex-shrink: 0;
    width: auto;
    height: 17px;
    fill: currentColor;
    opacity: 0.85;
  }

  a {
    color: inherit;
    text-decoration: none;
  }
}

.content {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.domain {
  opacity: 0.75;
  letter-spacing: 0;
}

.default {
  background-color: var(--color-bg-secondary);
}

.subtle {
  background-color: var(--color-bg-brand-softest);
}

.accent {
  color: var(--color-text-on-brand-base);
  background-color: var(--color-bg-brand-base);
}

.feature {
  background-color: var(--color-bg-brand-base);
  color: var(--color-text-on-brand-base);
}

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

.success {
  background-color: var(--color-bg-success-softest);
}

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

.danger {
  background-color: var(--color-bg-error-base);
  color: var(--color-text-on-error-base);
}
