/**
* ---------------------------------------------
* ┌─┐┬─┐┌─┐┌─┐┬┌┬┐┌─┐┌┬┐┬┌─┐
* │ ┬├┬┘├─┤├┤ ││││├┤  │││├─┤
* └─┘┴└─┴ ┴└  ┴┴ ┴└─┘─┴┘┴┴ ┴
* ---------------------------------------------
* @Author: Luigi Rivoltella
* @Date:   2022-10-12T10:23:37+02:00
* @Email:  info@grafimedia.it
* ---------------------------------------------
* @Filename: switch.css
* @License: Commercial
* @Copyright: Grafimedia S.r.l.
* ---------------------------------------------
 * @Last modified by:   Luigi Rivoltella
 * @Last modified time: 2022-10-13T10:43:49+02:00
* ---------------------------------------------
*/

/* The switch - the box around the slider */
.ike-switchbox {
  margin:1em 0;
}
.ike-group {
  display: flex;
  align-items: center;
  position:relative;
}

.ike-switch {
  display: inline-block;
  height: 2.6em;
  position: relative;
  width: 4.8em;
  margin:0 1em 0 0;
}

.ike-switch input {
  display:none;
}

.ike-slider {
  background-color: rgba(0,0,0,0.2);
  bottom: 0;
  cursor: pointer;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transition: .4s;
  border-radius:0.4em;
}

.ike-descr {
  font-size: 0.8em;
  line-height: 1.1em;
  padding-top:0.5em;
}

.ike-descr.ike-hide {
  display:none;
}

/* Foreground */
.ike-slider:before {
  background-color: rgba(255,255,255,0.8);
  bottom: 0.3em;
  content: "";
  height: 2em;
  left: 0.4em;
  position: absolute;
  transition: .4s;
  width: 2em;
  border-radius:0.3em;
}

input:checked + .ike-slider {
  background-color: rgba(0,0,0,0.4);
}

input:checked + .ike-slider:before {
  transform: translateX(2em);
  background-color: rgba(255,255,255,1);
}

input.disabled + .ike-slider {
  background-color: rgba(0,0,0,0.2) !important;
  cursor: not-allowed;
}

input.disabled + .ike-slider:before {
  background-color: rgba(255,255,255,0.4) !important;
}

.ike-slider.round {
  border-radius: 1.3em;
}

.ike-slider.round:before {
  border-radius: 50%;
}

/* The label */
.ike-group .ike-label {
}