.Toggle {
  cursor: pointer;
  display: block;
  padding-right: 13px;
  position: relative;
  -webkit-touch-callout: none;
  user-select: none;
}

.Toggle + .Toggle {
  margin-top: 1em;
}

.Toggle--pullRight{
  padding-right: 0;
}

.Toggle-label {
  display: block;
  padding-left: calc(20px + 0.85em);
}

/* Hide the default input element */

.Toggle-action {
  appearance: none;
  cursor: pointer;
  height: 100%;
  left: 0;
  opacity: 0;
  outline: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

/* The new input element */

.Toggle-label:matches(::before, ::after) {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.4);
  border-radius: 50%;
  box-sizing: border-box;
  content: "";
  cursor: pointer;
  height: 20px;
  left: 0;
  pointer-events: none;
  position: absolute;
  top: 1px;
  width: 20px;
}

.Toggle-label::after {
  background: blue;
  border: 0;
  height: 10px;
  left: 5px;
  top: 6px;
  transform: scale(0);
  transition: transform 0.15s ease;
  width: 10px;
  will-change: transform;
}

/* Checked state */

.Toggle-action:checked + .Toggle-label::after {
  transform: scale(1);
}

/* Pointer States */

.Toggle-action:focus + .Toggle-label::before {
  border-color: blue;
}

.Toggle-action:hover + .Toggle-label::before {
  border-color: rgba(0, 0, 0, 0.4);
}

.Toggle-action:active + .Toggle-label::before {
  background: rgba(0, 0, 0, 0.1);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
  text-decoration: none;
}

/* Checkbox design */
.Toggle-action[type="checkbox"] + .Toggle-label::before {
  border-radius: 2px;
}

.Toggle-action--square[type="checkbox"] + .Toggle-label--square::before {
  border-radius: 1px;
}

.Toggle-action[type="checkbox"] + .Toggle-label::after {
  background: transparent;
  border: 0 solid blue;
  border-radius: 0;
  border-width: 0 0 3px 3px;
  display: none;
  height: 7px;
  left: 4px;
  transform: rotate(-45deg);
  transition: none;
  width: 12px;
}

.Toggle-action[type="checkbox"]:checked + .Toggle-label::after {
  display: block;
}

.Toggle-action[type="checkbox"]:checked + .Toggle-label::before{
  border:1px solid var(--color-blue);
}

.Toggle--count{
  color: #6d6d6d;
}

/* Allow child elements to be clicked */

.Toggle-label > * {
  position: relative;
  z-index: 2;
}

/**
 * Have the toggle mimic the size on a .Control component
 */

.Toggle--mimicControl {
  margin: 20px 0 10px;
}

.Toggle--help{
  position: relative;
}

.Toggle--help{
  display: block;
  padding-left: 24px;
}

@media (--sm-viewport) {
  .Toggle--help{
    display: inline-block;
    border-left: 1px solid #dedede;
  }
}

.Toggle--help a::before{
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABGdBTUEAALGPC/xhBQAAAPVJREFUGBllUM1KAlEYPce54oALF9FOEYrUfS1cVT5BoOgT9FTSEwwU+AQWSOuWphA0ii76AbGJcZqZr3sN4w6excfHOeeej3NZ9/wRgGMhHyfdSudyKGr5PvM1t4WkKIJ8UQI283COEicNjHLfYlwfvJ2ZndFPE0xuAKnm9AhcuKtxu/xhRIPnq8MFN+GJIOmTzjWIUP1J2dnwZhdC3FLQkUJ+iiiGTszCNo17lYd/teb5q1Pvs7QjTBkRnWfBcHunTZmMSz8w3J7RCtqujbv5QZpIXxHMBepb2edtcxiHRd3+XAnlVWKZr/EV2YbdroMc/YVPv84EYkyVboriAAAAAElFTkSuQmCC");
  background-position: center;
  background-repeat: no-repeat;
  content: " ";
  display: inline-block;
  height: 10px;
  left: 1px;
  padding-left: 7px;
  position: absolute;
  top: 7px;
  width: 10px;
}

@media (--sm-viewport) {
  .Toggle--help a::before{
    padding-left: 22px;
  }
}

.Toggle--help a{
  padding-left: 11px;
}