/* Target the slider thumb */
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  background: transparent;
  border: none;
  cursor: pointer;
  position: relative;
  z-index: 2;
}

input[type=range]::-moz-range-thumb {
  width: 24px;
  height: 24px;
  background: transparent;
  border: none;
  cursor: pointer;
  position: relative;
  z-index: 2;
}

/* Base thumb style */
.custom-slider input[type=range]::-webkit-slider-thumb,
.custom-slider input[type=range]::-moz-range-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  border: none;
  cursor: pointer;
  position: relative;
  z-index: 2;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* Icon variants mapped to control panel classes */
.custom-slider.thumb-hand input[type=range]::-webkit-slider-thumb,
.custom-slider.thumb-hand input[type=range]::-moz-range-thumb {
  background-image: url('hand-icon.svg'); /* Replace with actual URL if available */
}

.custom-slider.thumb-mouse input[type=range]::-webkit-slider-thumb,
.custom-slider.thumb-mouse input[type=range]::-moz-range-thumb {
  background-image: url('mouse-icon.svg');
}

.custom-slider.thumb-circle input[type=range]::-webkit-slider-thumb,
.custom-slider.thumb-circle input[type=range]::-moz-range-thumb {
  background-image: url('circle-icon.svg');
}

/* Base style for optional extras checkboxes */
.custom-extras input[type=checkbox] {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid var(--checkbox-border, #ccc);
  border-radius: var(--checkbox-radius, 4px);
  background-color: var(--checkbox-bg, #fff);
  cursor: pointer;
  position: relative;
}

/* Checked state */
.custom-extras input[type=checkbox]:checked {
  background-color: var(--checkbox-checked-bg, #2A52BE);
  border-color: var(--checkbox-checked-border, #2A52BE);
}

/* Shape variants */
.custom-extras.square input[type=checkbox] {
  --checkbox-radius: 4px;
}
.custom-extras.circular input[type=checkbox] {
  --checkbox-radius: 50%;
}