v-input input {
  font-size: 1em;
  background-color: rgba(0, 0, 0, .4);
  border: none;
  border-bottom: 0.15em solid $primary;
  color: $textColor;
  padding: 0.5em;
}

v-input.focus input,
v-input input:focus {
  border-color: $second;
}

v-input.valid input {
  border-color: $validOnColor;
}

v-input.invalid input {
  border-color: $errorInYourFaceBorder;
}

v-input {
  display: flex;
  flex-direction: column;
  margin-bottom: 0.2em;
  position: relative;
  font-size: 1.3rem;
  padding-top: 1em;

  &.no-space {
    padding-top: .1em;
  }
}

v-input label {
  font-size: .7em;
  position: absolute;
  top: 1.8em;
  left: .5em;
  pointer-events: none;
  vertical-align: middle;
  transform: translateY(50%);
  color: #dcdcdc;
  transition: all .2s ease-out;
}

v-input.focus label,
v-input input:focus ~ label {
  top: 0.3em;
  left: 0;
  transform: translateY(0);
  font-size: .6em;
}

v-input .error {
  display: none;
}

v-input.invalid .error {
  margin-top: 0.2em;
  display: block;
  font-size: .7em;
  color: $errorInYourFace;
}

$height: 1.5rem;
$innerHeight: 1rem;
$width: 3rem;
$innerWidth: 1rem;

v-switch {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top: .5rem;

  input {
    position: absolute;
    appearance: none;
    opacity: 0;
  }

  label {
    display: block;
    border-radius: 9999px;
    width: $width;
    height: $height;
    background-color: $hoverDark;
    position: relative;
    cursor: pointer;
    margin-right: 0.5rem;

    &:after {
      content: '';
      background-color: #dcdcdc;
      position: absolute;
      top: 0.2rem;
      left: 0.25rem;
      height: $innerHeight;
      width: $innerWidth;
      border-radius: 9999px;
      transition: .5s;
    }
  }

  input:checked + label:after {
    transform: translateX($width - $height);
    background-color: $primary;
  }
}