/**
 * BOOWS Switch Component
 * Pill-style toggle switch - same look for Default and Rounded
 */

/* === Switch Container === */
.boows-switch {
  position: relative;
  display: inline-block;
  min-height: var(--boows-switch-height, 30px);
}

div.boows-switch label {
  display: inline-flex;
  align-items: center;
  gap: var(--boows-space-2, 0.75rem);
  cursor: pointer;
  font-size: var(--boows-font-size-base, 1rem);
  line-height: 1.4;
  color: var(--boows-col-text, #222);
  user-select: none;
}

/* === Hidden Input === */
.boows-switch input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* === Slider Track === */
.switch-slider {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  width: var(--boows-switch-width, 52px);
  height: var(--boows-switch-height, 30px);
  background-color: var(--boows-col-text-20, #ccc);
  border-radius: var(--boows-switch-height, 30px);
  transition: background-color 0.25s ease;
}

/* === Slider Knob === */
.switch-slider::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 3px;
  transform: translateY(-50%);
  width: var(--boows-switch-knob, 24px);
  height: var(--boows-switch-knob, 24px);
  background-color: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
  transition: transform 0.25s ease;
}

/* === Checked State === */
.boows-switch input:checked + .switch-slider {
  background-color: var(--boows-col-primary, #08a29a);
}

.boows-switch input:checked + .switch-slider::before {
  transform: translateX(calc(var(--boows-switch-width, 52px) - var(--boows-switch-knob, 24px) - 6px)) translateY(-50%);
}

/* === Hover State === */
.boows-switch label:hover .switch-slider {
  background-color: var(--boows-col-text-40, #999);
}

.boows-switch label:hover input:checked + .switch-slider {
  background-color: var(--boows-col-secondary, #278782);
}

/* === Focus State === */
.boows-switch input:focus-visible + .switch-slider {
  box-shadow: 0 0 0 2px rgba(var(--boows-col-primary-rgb, 8, 162, 154), 0.25);
}

/* === Disabled State === */
.boows-switch input:disabled + .switch-slider {
  background-color: var(--boows-col-text-10, #e5e5e5);
  cursor: not-allowed;
}

.boows-switch input:disabled + .switch-slider::before {
  background-color: var(--boows-col-text-20, #ccc);
  box-shadow: none;
}

.boows-switch input:disabled ~ span:last-child {
  color: var(--boows-col-text-40, #999);
  cursor: not-allowed;
}

/* === Label Text === */
.boows-switch label > span:last-child {
  font-weight: 400;
}