.ets-switcher {
  --ets-btn-bg: transparent;
  --ets-btn-bg-hover: transparent;
  --ets-btn-color: inherit;
  --ets-btn-color-hover: inherit;
  --ets-btn-border: transparent;
  --ets-btn-border-hover: transparent;

  --ets-btn-square-radius: 10px;

  --ets-icon-color: currentColor;
  --ets-icon-color-hover: currentColor;

  /* Icon badge (square) defaults */
  --ets-icon-box: 32px;
  --ets-icon-size: 22px;
  --ets-icon-radius: 8px;
  --ets-icon-bg: transparent;
  --ets-icon-bg-hover: var(--ets-icon-bg);
  --ets-icon-border: 0 solid transparent;
  --ets-icon-border-hover: transparent;

  --ets-toggle-track: rgba(0, 0, 0, 0.15);
  --ets-toggle-track-dark: rgba(255, 255, 255, 0.18);
  --ets-toggle-dot: rgba(0, 0, 0, 0.75);
  --ets-toggle-dot-dark: rgba(255, 255, 255, 0.85);

  display: inline-flex;
  align-items: center;
  gap: 10px;
  user-select: none;
}

/**
 * Hard reset to avoid theme button styles overriding our design.
 */
.ets-switcher__btn {
  appearance: none !important;
  -webkit-appearance: none !important;

  font: inherit;
  letter-spacing: inherit;

  display: flex !important;
  align-items: center;
  justify-content: center;

  gap: 10px;
  cursor: pointer;

  background: var(--ets-btn-bg) !important;
  color: var(--ets-btn-color) !important;

  border-style: solid !important;
  border-color: var(--ets-btn-border) !important;

  text-decoration: none !important;
  text-transform: none !important;

  outline: none;

  padding: 10px 12px;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease, transform 120ms ease;
}

.ets-switcher[data-shape="rounded"] .ets-switcher__btn {
  border-radius: 999px !important;
}

.ets-switcher[data-shape="square"] .ets-switcher__btn {
  border-radius: var(--ets-btn-square-radius) !important;
}

.ets-switcher__btn:hover {
  background: var(--ets-btn-bg-hover) !important;
  border-color: var(--ets-btn-border-hover) !important;
  color: var(--ets-btn-color-hover) !important;
}

.ets-switcher[data-transparent="1"] .ets-switcher__btn,
.ets-switcher[data-transparent="1"] .ets-switcher__btn:hover {
  background: transparent !important;
}

.ets-switcher__btn:active {
  transform: scale(0.98);
}

/** Label */
.ets-switcher__label {
  font-size: 14px;
  color: inherit;
}

/** Icon badge (square box) */
.ets-switcher__icon.material-symbols-outlined {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: var(--ets-icon-box);
  height: var(--ets-icon-box);

  font-size: var(--ets-icon-size);
  line-height: 1;

  border-radius: var(--ets-icon-radius);
  background: var(--ets-icon-bg);
  border: var(--ets-icon-border);

  color: var(--ets-icon-color) !important;
  transition: color 160ms ease, background 160ms ease, border-color 160ms ease;
}

.ets-switcher__btn:hover .ets-switcher__icon.material-symbols-outlined {
  color: var(--ets-icon-color-hover) !important;
  background: var(--ets-icon-bg-hover);
  border-color: var(--ets-icon-border-hover);
}

/** Toggle */
.ets-toggle {
  position: relative;
  width: 44px;
  height: 24px;
  border-radius: 999px;
  background: var(--ets-toggle-track);
  flex: 0 0 auto;
}

html.ets-dark .ets-toggle,
body.ets-dark .ets-toggle {
  background: var(--ets-toggle-track-dark);
}

.ets-toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.ets-toggle__dot {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--ets-toggle-dot);
  transform: translateX(0);
  transition: transform 180ms ease, background 160ms ease;
}

html.ets-dark .ets-toggle__dot,
body.ets-dark .ets-toggle__dot {
  background: var(--ets-toggle-dot-dark);
}

/** Move dot when theme is dark */
.ets-switcher[data-effective="dark"] .ets-toggle__dot {
  transform: translateX(20px);
}