/* Badge */

@layer components {
  .badge {
    display: inline-flex;
    align-items: center;
    font-weight: var(--badge-base-font-weight);
    border-radius: var(--badge-base-radius);
    padding: var(--badge-base-padding);
    font-size: var(--badge-base-font-size);
    line-height: var(--badge-base-line-height);
    background: var(--badge-base-bg);
    color: var(--badge-base-text);
  }

  /* Badge Variants */
  .badge-success {
    background: var(--badge-variant-success-bg);
    color: var(--badge-variant-success-text);
  }
  .badge-warning {
    background: var(--badge-variant-warning-bg);
    color: var(--badge-variant-warning-text);
  }
  .badge-error {
    background: var(--badge-variant-error-bg);
    color: var(--badge-variant-error-text);
  }
  .badge-info {
    background: var(--badge-variant-info-bg);
    color: var(--badge-variant-info-text);
  }
  .badge-default {
    background: var(--badge-variant-default-bg);
    color: var(--badge-variant-default-text);
  }

  /* Badge Dot */
  .badge-dot {
    display: inline-block;
    margin-right: 0.375rem;
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 9999px;
    background: var(--badge-dot-bg);
  }
  .badge-dot-success {
    background: var(--badge-dot-success-bg);
  }
  .badge-dot-warning {
    background: var(--badge-dot-warning-bg);
  }
  .badge-dot-error {
    background: var(--badge-dot-error-bg);
  }
  .badge-dot-info {
    background: var(--badge-dot-info-bg);
  }
  .badge-dot-default {
    background: var(--badge-dot-default-bg);
  }

  /* Badge Sizes */
  .badge-xs {
    font-size: var(--badge-size-xs-font-size);
    padding: var(--badge-size-xs-padding);
  }
  .badge-sm {
    font-size: var(--badge-size-sm-font-size);
    padding: var(--badge-size-sm-padding);
  }
  .badge-base {
    font-size: var(--badge-size-base-font-size);
    padding: var(--badge-size-base-padding);
  }
  .badge-lg {
    font-size: var(--badge-size-lg-font-size);
    padding: var(--badge-size-lg-padding);
  }
}