/* Toggle Switch Component */

.tb-switch {
  /* Sacred dimension variables - modify these to resize the entire switch */
  --switch-width: 35px;
  --switch-height: 18px;

  /* Calculated values - these auto-adjust based on dimensions above */
  --circle-size: calc(var(--switch-height) * 0.7);
  --circle-offset: calc((var(--switch-height) - var(--circle-size)) / 2);
  --translate-distance: calc(var(--switch-width) - var(--circle-size) - (var(--circle-offset) * 2));

  margin: 0;
  position: relative;
  width: var(--switch-width);
  height: var(--switch-height);
  background-color: #ccc;
  border-radius: calc(var(--switch-height) * 1.5);
  cursor: pointer;
  transition: background-color 0.3s;
  display: inline-block;
}

.tb-switch > input[type="checkbox"] {
  display: none;
}

.tb-switch::after {
  content: '';
  position: absolute;
  top: var(--circle-offset);
  left: var(--circle-offset);
  width: var(--circle-size);
  height: var(--circle-size);
  background-color: #fff;
  border-radius: 50%;
  transition: transform 0.3s;
}

.tb-switch:has([type="checkbox"]:checked) {
  background-color: var(--primary-color);
}

.tb-switch:has([type="checkbox"]:checked)::after {
  transform: translateX(var(--translate-distance));
}

.tb-switch:has([type="checkbox"]:disabled) {
  opacity: 0.5;
  cursor: not-allowed;
}