input, textarea {
  border: 1px solid $input-border-gray;

  padding-top: calculateRem(6);
  padding-right: calculateRem(12);
  padding-bottom: calculateRem(6);
  padding-left: calculateRem(12);

  background-color: transparent;
  color: $builda-darkgray;

  outline: none;

  &::placeholder {
    color: $input-border-gray;
  }

  &:hover {
    border-color: $input-hover-gray;
  }

  &:focus {
    border-color: $admin-primary-color;
  }
}

input[type=radio] {
  display: none;
  &:checked + label:before {
    border-color: $admin-primary-color;
    box-shadow: 0px 0px 0px 15px rgba(0, 0, 0, 0);
  }
  &:checked + label {
    //color: white;
  }
  &:checked + label:after {
    transform: scale(1);
  }
  & + label {
    //color: $lightgray;
    position: relative;
    display: inline-block;

    margin-bottom: 0;

    padding: calculateRem(3) calculateRem(30);
    height: calculateRem(20);

    font-size: 14px;
    line-height: 16px;

    cursor: pointer;
    vertical-align: bottom;

    &:before, &:after {
      position: absolute;
      content: '';
      border-radius: 50%;
      transition: all .3s ease;
      transition-property: transform, border-color;
    }

    &:before {
      top: 0;
      left: 0;
      width: calculateRem(20);
      height: calculateRem(20);
      border: 2px solid $input-border-gray;
    }

    &:after {
      top: calculateRem(5);
      left: calculateRem(5);
      width: calculateRem(10);
      height: calculateRem(10);
      transform: scale(0);
      background-color: $admin-primary-color;
    }
  }
}

input[type=checkbox] {
  position: relative;

  height: calculateRem(16);
  width: calculateRem(16);

  margin-right: calculateRem(15);

  border: 2px solid $input-border-gray;
  border-radius: 2px;

  background-color: transparent;

  outline: none;

  appearance: none;

  &:after {
    position: absolute;
    top: -12px;
    left: -3px;

    height: calculateRem(16);
    width: calculateRem(16);

    font-size: calculateRem(31);
    line-height: 1;
  }

  &:checked {
    border-color: $builda-darkgray;
  }

  &:checked:after {
    content: '\00d7';
    color: $builda-darkgray;
  }

  &:hover:not(:checked) {
    border-color: $input-hover-gray;
  }
}

input[type=checkbox].toggle {
  display: none;

  & + .toggle-label {
    position: relative;
    display: inline-block;

    min-width: 112px;

    padding-right: 0;
    padding-left: calculateRem(44);

    text-align: left;

    cursor: pointer;
    &:before, &:after {
      content: "";
      position: absolute;
      top: 50%;

      margin: 0;

      outline: 0;

      transform: translate(0, -50%);
      transition: all 0.3s ease;
    }

    &:before {
      left: 1px;
      width: calculateRem(34);
      height: calculateRem(14);

      border-radius: 8px;

      background-color: $builda-midgray;
    }

    &:after {
      left: 0;
      width: calculateRem(20);
      height: calculateRem(20);

      border-radius: 50%;

      background-color: $builda-lightgray;

      box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.14), 0 2px 2px 0 rgba(0, 0, 0, 0.098), 0 1px 5px 0 rgba(0, 0, 0, 0.084);
    }

    .toggle--on {
      display: none;
    }

    .toggle--off {
      display: inline-block;
    }
  }

  &:checked + .toggle-label {
    &:before {
      background-color: darken($admin-primary-color, 30%);
    }
    &:after {
      background-color: $admin-primary-color;
      transform: translate(80%, -50%);
    }

    .toggle--on {
      display: inline-block;
    }

    .toggle--off {
      display: none;
    }
  }
}

.editr {
  border: solid 1px $input-border-gray;

  &:hover {
    border-color: $input-hover-gray;
  }

  &:focus, &:focus-within {
    border-color: $admin-primary-color;
  }
}