/* /assets/js/styles/base/toggles.css
 * Centralized toggle switch — use .mm-toggle everywhere
 *
 * Usage:
 *   <label class="mm-toggle">
 *     <input type="checkbox" />
 *     <span class="mm-toggle-track"></span>
 *   </label>
 */

.mm-toggle {
  position: relative;
  display: inline-block;
  width: var(--mm-toggle-width, 36px);
  height: var(--mm-toggle-height, 20px);
  flex-shrink: 0;
  cursor: pointer;
}

.mm-toggle-track {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--mm-disabled-bg, #d1d5db);
  transition: background-color 0.2s;
  border-radius: var(--mm-toggle-height, 20px);
}

.mm-toggle-track:before {
  position: absolute;
  content: "";
  height: var(--mm-toggle-knob, 14px);
  width: var(--mm-toggle-knob, 14px);
  left: var(--mm-toggle-offset, 3px);
  bottom: var(--mm-toggle-offset, 3px);
  background-color: white;
  transition: transform 0.2s;
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}

.mm-toggle input:checked + .mm-toggle-track {
  background-color: var(--mm-primary, #2563eb);
}

.mm-toggle input:checked + .mm-toggle-track:before {
  transform: translateX(var(--mm-toggle-travel, 16px));
}

.mm-toggle.disabled,
.mm-toggle[data-disabled="true"] {
  opacity: var(--mm-disabled-opacity, 0.4);
  cursor: not-allowed;
}

.mm-toggle.disabled .mm-toggle-track,
.mm-toggle[data-disabled="true"] .mm-toggle-track {
  cursor: not-allowed;
}

/* Legacy compat — map old .toggle-switch/.toggle-slider to new sizes */
.mm-table .toggle-switch {
  width: var(--mm-toggle-width, 36px);
  height: var(--mm-toggle-height, 20px);
}

.mm-table .toggle-slider {
  border-radius: var(--mm-toggle-height, 20px);
}

.mm-table .toggle-slider:before {
  height: var(--mm-toggle-knob, 14px);
  width: var(--mm-toggle-knob, 14px);
  left: var(--mm-toggle-offset, 3px);
  bottom: var(--mm-toggle-offset, 3px);
}

.mm-table .toggle-switch input:checked + .toggle-slider:before {
  transform: translateX(var(--mm-toggle-travel, 16px));
}

/* v3.1.280: restored - the cleanup's dedup kept copies that live in sheets
   which are never loaded (base/core.css and friends). These are the live ones. */
.mm-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}