:root {
  /* ---------------------------------- *\
            Badge sizes
  \* ---------------------------------- */


  /* Small */
  --lf-badge-small-font-size: #{rem(12)};
  --lf-badge-small-height: #{rem(20)};
  --lf-badge-small-padding: #{rem(4)};


  /* Medium */
  --lf-badge-medium-font-size: #{rem(13)};
  --lf-badge-medium-height: #{rem(24)};
  --lf-badge-medium-padding: #{rem(6)};

  /* ---------------------------------- *\
            Badge styles
  \* ---------------------------------- */


  /* Primary */
  --lf-badge-primary-background: var(--lf-color-primary-50);
  --lf-badge-primary-border: var(--lf-color-primary-100);
  --lf-badge-primary-text: var(--lf-color-primary-800);

  /* Secondary */
  --lf-badge-secondary-background: var(--lf-color-white);
  --lf-badge-secondary-border: var(--lf-color-gray-200);
  --lf-badge-secondary-text: var(--lf-color-gray-900);

  /* Tertiary */
  --lf-badge-tertiary-background: var(--lf-color-gray-100);
  --lf-badge-tertiary-border: var(--lf-color-gray-200);
  --lf-badge-tertiary-text: var(--lf-color-gray-900);

  /* Danger */
  --lf-badge-danger-background: var(--lf-color-red-100);
  --lf-badge-danger-border: var(--lf-color-red-200);
  --lf-badge-danger-text: var(--lf-color-red-800);

  /* Warning */
  --lf-badge-warning-background: var(--lf-color-yellow-100);
  --lf-badge-warning-border: var(--lf-color-yellow-200);
  --lf-badge-warning-text: var(--lf-color-yellow-800);
}
