.toggle {
  position: relative;
  display: block; }

.input {
  display: none; }

.label, .unchecked > .label, .default > .label {
  display: inline-block;
  position: relative;
  font-size: 1rem;
  cursor: pointer; }
  .label::before, .unchecked > .label::before, .default > .label::before {
    content: '';
    position: absolute;
    top: -0.79rem;
    left: 0;
    width: 2.35rem;
    height: 0.79rem;
    background-color: #CED4DA;
    border-radius: 20px;
    transition: background-color 300ms; }
  .label::after, .unchecked > .label::after, .default > .label::after {
    content: '';
    display: inline-block;
    position: absolute;
    background-color: #FFFFFF;
    box-shadow: 0 3px 10px -3px #576265;
    top: -1.14rem;
    left: -0.36rem;
    width: 1.29rem;
    height: 1.29rem;
    border-radius: 50%;
    transition: all 300ms; }

.text {
  display: inline;
  margin-right: 1.29rem; }

.primary > .label::before {
  background-color: #3CAFDA; }

.affirmative > .label::before {
  background-color: #37C0C9; }

.alternate > .label::before {
  background-color: #22537A; }

.warning > .label::before {
  background-color: #F3BC26; }

.danger > .label::before {
  background-color: #DD3B4C; }

.checked > .label::after {
  left: 1.4rem; }

.disabled > .label {
  color: #CED4DA;
  cursor: not-allowed; }
  .disabled > .label::before {
    background-color: #CED4DA; }
  .disabled > .label::after {
    background-color: #E6E9EE; }