.a-badge {
  --a-badge-border-color: var(--color-greyscale-5);
  --a-badge-background-color: var(--color-greyscale-6);

  position: relative;
}

  .a-badge--meaning-1 {
    --a-badge-border-color: var(--color-feedback-4);
    --a-badge-background-color: var(--color-feedback-3);
  }

  .a-badge--meaning-2 {
    --a-badge-border-color: var(--color-extra-8);
    --a-badge-background-color: var(--color-extra-7);
  }

  .a-badge--meaning-3 {
    --a-badge-border-color: var(--color-feedback-8);
    --a-badge-background-color: var(--color-feedback-7);
  }

  .a-badge--meaning-4 {
    --a-badge-border-color: var(--color-extra-16);
    --a-badge-background-color: var(--color-extra-15);
  }

  .a-badge--meaning-5 {
    --a-badge-border-color: var(--color-greyscale-5);
    --a-badge-background-color: var(--color-greyscale-6);
  }

  .a-badge--filled {
    --a-badge-border-color: var(--a-badge-background-color);
  }

  .a-badge__content {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 0.5625rem;
    height: 0.5625rem;
    vertical-align: top;
    color: var(--color-greyscale-2);
    border-width: 0.0625rem;
    border-style: solid;
    border-color: var(--a-badge-border-color);
    border-radius: 50%;
    background-color: var(--a-badge-background-color);
    gap: 0.625rem;
  }

  .a-badge--text-circle:not(.a-badge--meaning-5) .a-badge__content,
    .a-badge--text-pill:not(.a-badge--meaning-5) .a-badge__content,
    .a-badge--text-button:not(.a-badge--meaning-5) .a-badge__content {
      border-color: var(--a-badge-background-color);
      background-color: var(--a-badge-border-color);
    }

  .a-badge--text-circle .a-badge__content {
      width: auto;
      min-width: 1.5rem;
      height: 1.5rem;
      border-width: 0.125rem;
      border-radius: 0.75rem;
      padding-inline: 0.25rem;
    }

  .a-badge--text-pill .a-badge__content {
      width: auto;
      height: 1.875rem;
      border-width: 0.125rem;
      border-radius: 0.875rem;
      padding-inline: 0.625rem;
    }

  .a-badge--text-button .a-badge__content {
      width: auto;
      height: 2.625rem;
      border-width: 0.125rem;
      border-radius: 0.625rem;
      padding-inline: 1.25rem;
    }

  .a-badge__text {
    display: none;
  }

  .a-badge--text-circle .a-badge__text,
    .a-badge--text-pill .a-badge__text,
    .a-badge--text-button .a-badge__text {
      display: block;
    }

  .a-badge__icon {
    fill: currentColor;
    width: 0.875rem;
    height: 0.875rem;
  }

  .a-badge__description {
    position: absolute;
    z-index: 1;
    top: 0.3125rem;
    left: calc(100% - 0.9375rem);
    display: none;
    padding: 0.3125rem 0.625rem;
    white-space: nowrap;
    pointer-events: none;
    border-radius: 0.625rem;
    background-color: var(--color-feedback-4);
  }

  .a-badge:hover .a-badge__description {
      display: block;
    }