/*
  Rec toggle switch and
  volume sliders

*/

:root {
  --vc-off-color:             #2A3641; /* linear-gradient(190deg, rgba(0, 0, 0, 0.39) 5%, rgba(0, 0, 0, 0.157) 50%); */
  --vc-on-color:              #2A3641;
  --vc-animation-speed:       0.2s ease-out;
  --vc-font-family:           "UI-Regular";
  --vc-font-size:             1.2em;
  --vc-font-weight:           unset;
  --vc-on-font-color:         rgba(255, 255, 255, 1.0);
  --vc-off-font-color:        rgb(255, 255, 255);
  --vc-label-position-off:    14px;
  --vc-label-position-on:     14px;
  --vc-height:                1.3em; /* 2.0em*/
  --vc-width:                 100%;
  --vc-handle-width:          60%;
  --vc-handle-height:         90%;
  --vc-box-border-radius:     0px;
  --vc-handle-border-radius:  0px;
  --vc-handle-shadow:         0px 0px 5px rgba(0, 0, 0, 0.5);
  --vc-handle-color:          #485a6b; /* rgb(61, 61, 61); */
  --vc-onclick-width:         80%;
  --vc-handle-top:            0.1em;  /* 0.2 */
  --vc-handle-fontsize:       0.7em; /* 0.8 */
  --vc-handle-lineHeight:     1.7em; /* 2.2 */
}

.toggle-container * {
  font-family:                var(--vc-font-family);
  transition:                 var(--vc-animation-speed);
  cursor:                     pointer;
  /* background:                 darkgreen; */
}

.vc-switch {
  width:                      var(--vc-width);
  height:                     var(--vc-height);
  margin-top:                 5px;
}

.toggle-container label {
  position:                   relative;
  display:                    inline-block;
  vertical-align:             top;
  border-radius:              var(--vc-box-border-radius);
  /* cursor:                     pointer; */
}

.vc-switch-input {
  position:                   absolute;
  transform:                  translate3d(5px, 5px, 0);
  opacity:                    0;
}

.vc-switch-label {
  position:                   relative;
  display:                    block;
  height:                     inherit;
  font-size:                  var(--vc-font-size);
  font-weight:                var(--vc-font-weight);
  background:                 var(--vc-off-color);
  border-radius:              inherit;
}

.vc-switch-label:before,
.vc-switch-label:after {
  position:                   absolute;
  top:                        50%;
  margin-top:                 -0.5em;
  line-height:                1.1;
}

.vc-switch-label:before {
  content:                    attr(data-off);
  color:                      var(--vc-on-font-color);
}

.vc-switch-label:after {
  content:                    attr(data-on);
  color:                      var(--vc-off-font-color);
  opacity:                    0;
}

.vc-switch-label:before {
  right:                      var(--vc-label-position-off);
  top:                        16px;
}

.vc-switch-label:after {
  left:                       var(--vc-label-position-on);;
}

.vc-switch-input:checked ~ .vc-switch-label {
  background:                 var(--vc-on-color);
  text-shadow:                0px 0px 6px rgba(255, 255, 255, 0.6);
}

.vc-switch-input:checked ~ .vc-switch-label:before {
  opacity:                    0;
}

.vc-switch-input:checked ~ .vc-switch-label:after {
  opacity:                    1;
}

.vc-handle {
  left:                       2px;
  font-size:                  var(--vc-handle-fontsize);
  position:                   absolute !important;
  top:                        var(--vc-handle-top);
  background:                 var(--vc-handle-color);
  border-radius:              var(--vc-handle-border-radius);
  box-shadow:                 var(--vc-handle-shadow);
  width:                      var(--vc-handle-width);
  height:                     var(--vc-handle-height);
  line-height:                var(--vc-handle-lineHeight);
}


.vc-handle:before {
  content:                    "";
  top:                        50%;
  left:                       50%;
  position:                   absolute !important;
  margin:                     -6px 0 0 -6px;
  width:                      12px;
  height:                     12px;
  border-radius:              6px;
}

.vc-switch-label:active ~ .vc-handle, .vc-handle:active {
  width:                    var(--vc-onclick-width);
}

.vc-switch-input:checked ~ .vc-handle {
  left:                     unset;
  right:                    2px;
  color:                    var(--vc-on-font-color);
  text-shadow:              0 0 6px var(--vc-on-font-color),
                            0 4px 8px green,
                            0 0px 12px rgb(20, 209, 20);
}