%nio-toggle {
  position: relative;
  display: block;
}

%nio-toggle__input {
  display: none;
}

%nio-toggle__label {
  display: inline-block;
  position: relative;
  font-size: $font-size-medium;
  cursor: pointer;

  &::before {
    content: '';
    position: absolute;
    top: -0.79rem;
    left: 0;
    width: 2.35rem;
    height: 0.79rem;
    background-color: $palette-light;
    border-radius: 20px;
    transition: background-color 300ms;
  }

  &::after {
    content: '';
    display: inline-block;
    position: absolute;
    background-color: $palette-white;
    box-shadow: 0 3px 10px -3px $palette-dark;
    top: -1.14rem;
    left: -0.36rem;
    width: 1.29rem;
    height: 1.29rem;
    border-radius: 50%;
    transition: all 300ms;
  }
}

%nio-toggle__text {
  display: inline;
  margin-right: 1.29rem;
}

%nio-toggle__label--primary {
  &::before {
    background-color: $palette-primary;
  }
}

%nio-toggle__label--affirmative {
  &::before {
    background-color: $palette-affirmative;
  }
}

%nio-toggle__label--alternate {
  &::before {
    background-color: $palette-alternate;
  }
}

%nio-toggle__label--warning {
  &::before {
    background-color: $palette-warning;
  }
}

%nio-toggle__label--danger {
  &::before {
    background-color: $palette-danger;
  }
}

%nio-toggle__label--checked {
  &::after {
    left: 1.4rem;
  }
}

%nio-toggle__label--disabled {
  color: $palette-light;
  cursor: not-allowed;
  &::before {
    background-color: $palette-light;
  }
  &::after {
    background-color: $palette-snow;
  }
}