* {
  box-sizing: border-box;
}

:root {
  --brand-color: #5128c6;
}

.switch {
  position: absolute;
  opacity: 0;
}

.switch-container label {
  border: 1px solid #e0e0e0;
  width: 28px;
  height: 14px;
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  background-color: #e0e0e0;
  position: relative;
  padding: 1px;
}

.switch-circle {
  height: 10px;
  width: 10px;
  background-color: white;
  border-radius: 100%;
  position: absolute;
  transition: all 0.2s ease-in-out;
  left:1px;
}

.switch:checked + label .switch-circle {
  left: 100%;
  transform: translate(-100%);
}

.switch-container .switch:checked + label {
  background-color: var(--brand-color);
  border-color: var(--brand-color);
}


/* .switch-container .switch:focus + label,
label:active {
  border-color: var(--brand-color);
  outline: 2px solid #cfbfff;
} */