﻿.controlToggle {
   cursor: pointer;
   display: inline-block;
   background-color: transparent;
   color: var(--colorParaTextoPrincipal);
}

   .controlToggle:hover .controlToggleSlider:before {
      /* ReSharper disable InvalidValue */
      background: linear-gradient(to bottom, var(--colorParaFondoPrincipal) 0%, #AAF 100%);
      /* ReSharper restore InvalidValue */
      box-shadow: 0 0 0 .1rem #000000;
      box-shadow: 0 0 0 .1rem rgba(0, 0, 0, 0.5);
   }

.controlToggleSliderEnClaro {
   background: var(--colorFondoControlToggleTamaSliderEnClaro);
}

.controlToggleSliderEnOscuro {
   background: var(--colorFondoControlToggleTamaSliderEnOscuro);
}

.controlToggleSlider {
   display: inline-block;
   background: var(--colorFondoControlToggleTamaSliderEnClaro);
   border-radius: 1rem;
   width: 2rem;
   height: 1rem;
   position: relative;
   vertical-align: middle;
   transition: background 0.25s;
}

   .controlToggleSlider:before,
   .controlToggleSlider:after {
      content: "";
   }

   .controlToggleSlider:before {
      display: block;
      /* ReSharper disable InvalidValue */
      background: linear-gradient(to bottom, var(--colorParaTextoPrincipal) 0%, #eeF 100%);
      /* ReSharper restore InvalidValue */
      border-radius: 50%;
      box-shadow: 0 0 0 .1rem #000000;
      box-shadow: 0 0 0 .1rem rgba(0, 0, 0, 0.25);
      width: .7rem;
      height: .7rem;
      position: absolute;
      top: .15rem;
      left: .2rem;
      transition: left 0.25s;
   }

.controlToggleCheckBox {
   position: absolute;
   visibility: hidden;
}

   .controlToggleCheckBox:checked + .controlToggleSlider {
      background: var(--colorFondoControlToggleTamaSliderEnOscuro);
   }

      .controlToggleCheckBox:checked + .controlToggleSlider:before {
         left: 1.05rem;
      }

.controlToggleLeyenda {
   width: min-content;
   font-size: .8rem;
   margin-left: .1rem;
   position: relative;
   top: .05rem;
}
