.badges--badge {
  border-radius: var(--radius-full);
  background-color: var(--icon-action);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: white;

  &[data-size="xs"] {
    width: .375rem;
    height: .375rem;
    min-width: .375rem;
    min-height: .375rem;
  }

  &[data-size="sm"] {
    width: .5rem;
    height: .5rem;
    min-width: .5rem;
    min-height: .5rem;
  }

  &[data-size="md"] {
    width: 0.75rem;
    height: 0.75rem;
    min-width: 0.75rem;
    min-height: 0.75rem;
  }

  &[data-size="lg"] {
    width: 1rem;
    height: 1rem;
    min-width: 1rem;
    min-height: 1rem;
  }

  &[data-variant="numeric"] {
    font-size: var(--rem-13);
    font-variation-settings: 'wght' var(--text-semibold);
    line-height: 100%;
    letter-spacing: 0;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-on-action);

    &[data-size="xs"] {
      width: .75rem;
      height: .75rem;
      min-width: .75rem;
      min-height: .75rem;
      font-size: .5rem;
    }
  
    &[data-size="sm"] {
      width: var(--rem-15);
      height: var(--rem-15);
      min-width: var(--rem-15);
      min-height: var(--rem-15);
      font-size: var(--rem-9);
    }
  
    &[data-size="md"] {
      width: var(--rem-18);
      height: var(--rem-18);
      min-width: var(--rem-18);
      min-height: var(--rem-18);
      font-size: var(--rem-11);
    }
  
    &[data-size="lg"] {
      width: 1.5rem;
      height: 1.5rem;
      min-width: 1.5rem;
      min-height: 1.5rem;
    }

    &[data-type="disabled"] {
      background-color: var(--surface-disabled);
      color: var(--text-disabled);
    }

    &[data-type="warning"] {
      background-color: var(--warning-500);
    }

    &[data-type="error"] {
      background-color: var(--red-500);
    }
  }
}