/* Shared circular icon action: one geometry, neutral and inverse surfaces. */
.tcgn-icon-button {
  box-sizing:border-box;
  flex:0 0 44px;
  display:inline-grid;
  place-items:center;
  width:44px;
  min-width:44px;
  height:44px;
  min-height:44px;
  padding:0;
  border:0;
  border-radius:50%;
  background:var(--surface-secondary,#1A1E1E);
  color:var(--text,#F3F5F4);
  text-decoration:none;
  box-shadow:none;
  transform:none;
  cursor:pointer;
  transition:background-color 120ms;
}
.tcgn-icon-button-icon {display:grid;place-items:center;width:20px;height:20px}
.tcgn-icon-button-icon > svg {display:block;width:20px;height:20px}
.tcgn-icon-button:is(:hover,:active,:focus-visible) {
  color:var(--text,#F3F5F4);
  background:var(--hover,#1D2121);
  text-decoration:none;
  transform:none;
  box-shadow:none;
}
.tcgn-icon-button--inverse {background:#F3F5F4;color:#0C0E0E}
.tcgn-icon-button--inverse:is(:hover,:active,:focus-visible) {background:#E0E6E3;color:#0C0E0E}
.tcgn-icon-button:focus-visible {outline:2px solid var(--tcgn-product-accent,var(--brand,#FF7341));outline-offset:3px}
@media(prefers-reduced-motion:reduce){.tcgn-icon-button {transition:none}}