/* A button that only holds an icon can't carry the side padding of one with text. */
.cs-btn--icon {
  padding: 0.5rem;
  aspect-ratio: 1;
  gap: 0;
}

.cs-btn--icon.is-loading > svg { visibility: hidden; }

/* A toggle that is on (the star, the bell) sits on the account's soft fill, like a pressed filter chip. */
.cs-btn--icon[aria-pressed="true"] { background-color: var(--ds-cta-soft); color: var(--ds-on-cta-soft); }
.cs-btn--icon[aria-pressed="true"]:hover { background-color: var(--ds-cta-soft-hover); }

/* v5: one borderless circle, 32 px and 24 px small, with the fill as the only hover; .cs-btn doubled so no intent's border wins. */
html[data-visual="v5"] .cs-btn.cs-btn--icon {
  inline-size: 32px;
  block-size: 32px;
  min-inline-size: 0;
  min-block-size: 0;
  padding: 0;
  border-color: transparent;
  border-radius: var(--ds-radius-full);
}

html[data-visual="v5"] .cs-btn--icon.cs-btn--small {
  inline-size: 24px;
  block-size: 24px;
}

html[data-visual="v5"] .cs-btn--icon.cs-btn--quiet { background-color: transparent; color: var(--ds-text-secondary); }
html[data-visual="v5"] .cs-btn--icon.cs-btn--primary { background-color: var(--ds-cta); color: var(--ds-on-cta); }
html[data-visual="v5"] .cs-btn--icon.cs-btn--danger { background-color: transparent; color: var(--ds-negative); }
/* v5: a toggle that is on keeps the circle empty and says so in the glyph (filled, in the green of text); a filled block next to empty circles reads as a different, bigger button. */
html[data-visual="v5"] .cs-btn.cs-btn--icon[aria-pressed="true"] { background-color: transparent; color: var(--ds-on-cta-soft); }
/* The circle is the hover's alone, the same for every toggle; a phone keeps :hover on what it tapped, so it gets none. */
@media (any-hover: hover) {
  html[data-visual="v5"] .cs-btn--icon.cs-btn--quiet:hover { background-color: var(--ds-hover); }
  html[data-visual="v5"] .cs-btn--icon.cs-btn--primary:hover { background-color: var(--ds-cta-hover); }
  html[data-visual="v5"] .cs-btn--icon.cs-btn--danger:hover { background-color: color-mix(in oklch, var(--ds-negative) 12%, transparent); }
  html[data-visual="v5"] .cs-btn.cs-btn--icon[aria-pressed="true"]:hover { background-color: var(--ds-hover); }
}
html[data-visual="v5"] .cs-btn--icon:not(.cs-btn--primary):active { background-color: var(--ds-pressed); }
html[data-visual="v5"] .cs-btn--icon:focus-visible { outline: 2px solid var(--ds-focus-ring); outline-offset: 0; }

html[data-visual="v5"] .cs-btn--icon:not(.cs-btn--primary):is(:disabled, [aria-disabled="true"], .cs-btn--disabled) {
  background-color: transparent;
  color: var(--ds-text-muted);
}

@media (pointer: coarse) {
  html[data-visual="v5"] .cs-btn--icon { position: relative; }

  html[data-visual="v5"] .cs-btn--icon::after {
    content: "";
    position: absolute;
    inset: 50% auto auto 50%;
    inline-size: 44px;
    block-size: 44px;
    translate: -50% -50%;
  }
}