@use "sass:color";
@use "sass:map";
@use "../colors";

.badge {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  background-color: map.get(colors.$palette, primary);
  color: colors.$white;
  border-radius: 9999px;
  gap: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  line-height: 1.125;
  margin-left: 1rem;
  padding: 0.25rem 0.625rem;

  &.success {
    background-color: rgba(map.get(colors.$palette, success), 0.2);
    color: color.adjust(map.get(colors.$palette, success), $lightness: -10%);

    @media (prefers-color-scheme: dark) {
      background-color: rgba(map.get(colors.$palette, success), 0.125);
      color: map.get(colors.$palette, success);
    }
  }
  &.pending {
    background-color: rgba(map.get(colors.$palette, pending), 0.125);
    color: map.get(colors.$palette, pending);
  }
  &.warning {
    background-color: rgba(map.get(colors.$palette, warning), 0.125);
    color: map.get(colors.$palette, warning);
  }
  &.purple {
    background-color: rgba(map.get(colors.$palette, purple), 0.125);
    color: map.get(colors.$palette, purple);
  }
  &.ai {
    background-color: rgba(map.get(colors.$palette, ai), 0.125);
    color: map.get(colors.$palette, ai);
  }
  &.error {
    background-color: rgba(map.get(colors.$palette, error), 0.125);
    color: map.get(colors.$palette, error);

    @media (prefers-color-scheme: dark) {
      background-color: rgba(map.get(colors.$palette, error), 0.3);
      color: color.adjust(color.adjust(map.get(colors.$palette, error), $saturation: 20%), $lightness: 40%);
    }
  }
  &.info {
    background-color: rgba(map.get(colors.$palette, info), 0.125);
    color: map.get(colors.$palette, info);
  }
  &.bg-accent {
    background-color: rgba(map.get(colors.$palette, accent), 0.125);
    color: map.get(colors.$palette, accent);
  }
  &.bg-muted {
    background-color: rgba(map.get(colors.$palette, muted), 0.125);
    color: map.get(colors.$palette, slate);
  }
  &.muted {
    background-color: map.get(colors.$palette, muted);
    color: colors.$white;
  }

  &.badge-large {
    padding: 0.3rem 1rem;
    gap: 0.5rem;
  }

  &.tx-tag {
    font-weight: normal;
    background-color: transparent;
    color: map.get(colors.$palette, slate);
    border: 1px solid;
    border-color: rgba(0, 0, 0, 0.125);
    border-width: 0.5px;
    max-width: 20rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .heading > & {
    margin-left: 0;
  }
}