/* Final switch geometry owner. Keep every Settings toggle visually consistent and centred. */

/* The accessibility preview's old decorative switch was never part of the Discord-style
   preview and was reading as a stray green blob beside the DND status dot. */
#r021-settings .rta-a11y-preview .rta-preview-switch {
  display: none !important;
}

/* Normalise every real Settings switch to one 42x24 component. */
#r021-settings button[role='switch'] {
  position: relative !important;
  box-sizing: border-box !important;
  width: 42px !important;
  height: 24px !important;
  min-width: 42px !important;
  min-height: 24px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  vertical-align: middle !important;
}

/* The thumb is centred mathematically instead of relying on a hard-coded top offset.
   This fixes the long-standing slightly-low white circle across Accessibility,
   Text & Images, Privacy, Messaging Permissions and Appearance. */
#r021-settings button[role='switch'] > span {
  position: absolute !important;
  display: block !important;
  box-sizing: border-box !important;
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  min-height: 16px !important;
  left: 3px !important;
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: #fff !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.28) !important;
  transform: translate(0, -50%) !important;
  transform-origin: center !important;
  transition: transform .14s ease !important;
  pointer-events: none !important;
}

#r021-settings button[role='switch'].on > span,
#r021-settings button[role='switch'].rift-qol-switch-on > span,
#r021-settings button[role='switch'][aria-checked='true'] > span {
  transform: translate(18px, -50%) !important;
}

/* Enabled is a semantic state, not the user's accent colour. */
#r021-settings button[role='switch'].on,
#r021-settings button[role='switch'].rift-qol-switch-on,
#r021-settings button[role='switch'][aria-checked='true'] {
  background: #23a55a !important;
  border-color: #23a55a !important;
}

#r021-settings button[role='switch'].on:hover,
#r021-settings button[role='switch'][aria-checked='true']:hover {
  background: #2bb866 !important;
  border-color: #2bb866 !important;
}

/* If Accessibility's optional on/off glyphs are enabled, centre those too without
   allowing them to affect the thumb geometry. */
#r021-settings .rta-switch[data-indicators='1']::after {
  top: 50% !important;
  transform: translateY(-50%) !important;
  line-height: 1 !important;
  pointer-events: none !important;
}

html[data-rift-effective-theme='light'] #r021-settings button[role='switch'] > span {
  background: #fff !important;
  box-shadow: 0 1px 3px rgba(25,30,37,.22) !important;
}