:host {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: top;
  vertical-align: middle;
  cursor: pointer;
}

:host(:focus-visible) {
  outline: none;
}

.checked-icon {
  display: flex;
  fill: currentColor;
  width: var(--toggle-size);
  height: var(--toggle-size);
  scale: var(--checked-icon-scale);
}

/* When the control isn't checked, hide the circle for Windows High Contrast mode a11y */
:host(:not(:state(checked))) svg circle {
  opacity: 0;
}

[part~='hint'] {
  grid-column: 2;
  margin-block-start: var(--wa-space-3xs);
}
