@layer porchlight {
  @layer reset, tokens, themes, base, layout, components, utilities, enhancements, print;
}

@layer porchlight.components {
  @scope (.pl-c-badge) {
    :scope {
      align-items: center;
      gap: var(--pl-space-1);
      min-block-size: var(--pl-space-6);
      padding-inline: var(--pl-space-2);
      border-radius: var(--pl-radius-pill);
      font-size: var(--pl-text-xs);
      font-weight: var(--pl-font-weight-semibold);
      letter-spacing: var(--pl-tracking-wide);
      text-wrap: nowrap;
      background: var(--pl-color-surface-2);
      color: var(--pl-color-text);
      line-height: 1;
      display: inline-flex;
    }

    :scope[data-size="sm"] {
      min-block-size: calc(var(--pl-space-5) - .125rem);
      padding-inline: calc(var(--pl-space-2) - .125rem);
      font-size: var(--pl-text-2xs);
    }

    :scope[data-tone="accent"] {
      background: var(--pl-color-accent);
      color: var(--pl-color-accent-text);
    }

    :scope[data-tone="success"] {
      background: var(--pl-color-success-bg);
      color: var(--pl-color-success-text);
    }

    :scope[data-tone="warning"] {
      background: var(--pl-color-warning-bg);
      color: var(--pl-color-warning-text);
    }

    :scope[data-tone="danger"] {
      background: var(--pl-color-danger-bg);
      color: var(--pl-color-danger-text);
    }

    .pl-c-badge__dot {
      border-radius: var(--pl-radius-pill);
      opacity: .9;
      background: currentColor;
      block-size: .375rem;
      inline-size: .375rem;
    }

    @media (forced-colors: active) {
      :scope {
        border: 1px solid buttonborder;
      }
    }
  }

  :where(.pl-c-badge-group) {
    gap: var(--pl-space-2);
    flex-wrap: wrap;
    align-items: center;
    display: flex;
  }
}