.custom-checkbox {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  position: relative;
  min-width: 30px;
}

.custom-checkbox input[type="checkbox"] {
  display: none;
}

.icon {
  font-size: 25px;
  min-width: 30px;
  width: 38px;
  color: var(--toggle-color);
  transition: transform 0.3s ease;
  padding: 0.2em;
  border-radius: 50%;
  pointer-events: none;
  &.white{
    color: white;
  }
}

/* Rebote animado */
.icon.bounce {
  animation: bounce 0.3s ease;
}

@keyframes bounce {
  0%   { transform: scale(1.2); }
  50%  { transform: scale(0.9); }
  100% { transform: scale(1); }
}