@import "../global";

:root {
  --badge-scale: 0.6;
  --badge-radius: var(--radius-default);
  --badge-gradient: linear-gradient(-180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.01) 90%);
  --badge-weight: var(--weight-bold);
  --badge-color: var(--color-neutral);
  --badge-color-invert: var(--color-neutral-invert);
  --badge-size: calc(var(--size-m) * var(--badge-scale));
  --badge-text: calc(var(--text-m) * var(--badge-scale));
  --badge-space: calc(var(--badge-text) / 2);
}

.n-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--badge-space);
  font-weight: var(--badge-weight);
  min-width: var(--badge-size);
  height: var(--badge-size);
  font-size: var(--badge-text);
  border-radius: var(--badge-radius);
  background-color: var(--badge-color);
  border: 1px solid var(--badge-color);
  background-image: var(--badge-gradient);
  color: var(--badge-color-invert);

  @each $name in $palettes {
    &.color-#{$name} {
      --badge-color: var(--color-#{$name});
      --badge-color-invert: var(--color-#{$name}-invert);
    }
  }

  @each $size, $name in $sizes {
    &.size-#{$name} {
      --badge-size: calc(var(--size-#{$size}) * var(--badge-scale));
      --badge-text: calc(var(--text-#{$size}) * var(--badge-scale));
    }
  }

  &.radius-circle {
    --badge-radius: 50%;
  }

  &.outlined {
    background-color: transparent;
    color: var(--badge-color);
    border-color: var(--badge-color);
  }

  &.ghost {
    background-color: transparent;
    color: var(--badge-color);
    border-color: transparent;
  }
}