@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) / var(--toggle-pressed-border-color-alpha, 100%))
    );
  }

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

  .ui-toggle-quiet {
    border: var(--stroke-hairline) solid transparent;
  }

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

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

  @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, var(--stroke-hairline)) solid currentColor;
    }
  }
}