@layer components {
  .ui-toggle-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: var(--toggle-count-min-width);
    margin-inline-start: var(--toggle-count-gap);
    border-radius: var(--toggle-count-radius);
    padding-inline: var(--toggle-count-space-inline);
    background: var(--toggle-count-background, hsl(var(--muted)));
    color: var(--toggle-count-color, hsl(var(--foreground)));
    font-size: var(--toggle-count-font-size);
    line-height: 1;
    font-variant-numeric: tabular-nums;
  }

  .ui-toggle-soft .ui-toggle-count {
    background: var(--toggle-soft-count-background, hsl(var(--background)));
    color: var(--toggle-soft-count-color, hsl(var(--foreground)));
  }

  .ui-toggle[data-state="on"] {
    border-color: var(--toggle-pressed-border-color, hsl(var(--primary)));
  }

  .ui-toggle[data-state="on"] .ui-toggle-count {
    background: var(--toggle-pressed-count-background, hsl(var(--primary-foreground)));
    color: var(--toggle-pressed-count-color, hsl(var(--primary)));
  }

  @media (forced-colors: active) {
    .ui-toggle[data-state="on"] {
      border-color: Highlight;
    }

    .ui-toggle[data-state="on"] .ui-toggle-count {
      outline: var(--toggle-count-forced-outline-width) solid currentColor;
    }
  }
}