/* One geometry contract for every icon-only button. Text glyph controls are
   replaced with a single inline SVG, so fonts and component pseudo-elements
   can never draw a second icon on top. */

button[data-tt-control-icon] {
  box-sizing: border-box;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  line-height: 1 !important;
  text-align: center !important;
  text-indent: 0 !important;
}

button[data-tt-glyph-normalized] {
  display: grid !important;
  place-items: center !important;
  font-size: 0 !important;
}

button[data-tt-glyph-normalized]::before,
button[data-tt-glyph-normalized]::after {
  content: none !important;
  display: none !important;
}

.tt-control-glyph {
  grid-area: 1 / 1;
  display: block;
  width: var(--tt-control-icon-size, 18px);
  height: var(--tt-control-icon-size, 18px);
  margin: auto;
  overflow: visible;
  pointer-events: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.85;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform-origin: center;
}

button[data-tt-control-icon="svg"] {
  display: grid !important;
  place-items: center !important;
}

button[data-tt-control-icon="svg"] > svg {
  grid-area: 1 / 1;
  flex: 0 0 auto;
  display: block;
  margin: auto;
  transform-origin: center;
}

/* Optical compensation for shapes whose mass is intentionally asymmetric. */
#musicPlay .play-shape { transform: translateX(1px); }
.message-composer > button[type="submit"] > svg { transform: translateX(1px); }