@mixin field-base {
  @include normal-text;
  background: $white;
  border: 1px solid $gray;
  border-radius: 3px;
  color: $gray-dark;
  padding: 8px 16px;
  outline: none;
  height: 40px;
  width: 100%;

  // To avoid inputs auto zoom on devices, font-size is set to 1rem (not less than 16px)
  .touch-device & {
    font-size: 1rem;
    line-height: 1.4rem;
  }
}

@mixin field-hover {
  border-color: $blue;
}

@mixin field-disabled {
  background-color: $gray-light;
  border-color: $gray;
  color: $gray-dark;
  -webkit-text-fill-color: $gray-dark;
  opacity: 1;
}

@mixin field-error {
  border-color: $red;
}

@mixin inputfield {
  @include field-base;

  &:focus {
    @include field-hover;
  }

  &:disabled {
    @include field-disabled;
  }

  &::placeholder {
    color: $warm-grey;
    opacity: 1;
  }

  &:-ms-input-placeholder {
    color: $warm-grey;
    opacity: 1;
  }
}

@mixin radiocheckbox-base {
  @include normal-text;
  position: relative;
  padding-left: 34px;
  line-height: 24px;
  cursor: pointer;
  margin-bottom: 0;

  ins {
    display: inline-block;
    background: $white;
    border: 1px solid $gray;
    position: absolute;
    top: 0;
    left: 0;
    height: 24px;
    width: 24px;
    cursor: pointer;

    .fa-check,
    &::after {
      display: none;
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      margin: auto;
    }
  }

  &:hover {
    ins {
      @include field-hover;
    }
  }

  input {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    height: 24px;
    width: 24px;

    &:focus + ins {
      @include field-hover;
    }

    &:disabled + ins {
      @include field-disabled;
    }
  }
}

@mixin radiocheckbox-base-new {
  @include normal-text;
  position: relative;
  padding-left: 34px;
  line-height: 24px;
  cursor: pointer;
  margin-bottom: 0;

  ins {
    display: inline-block;
    background: $white;
    border: 1px solid $gray;
    position: absolute;
    top: 0;
    left: 0;
    height: 24px;
    width: 24px;
    cursor: pointer;

    .fa-check,
    &::after {
      display: none;
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      margin: auto;
    }
  }

  &:hover {
    ins {
      @include field-hover;
    }
  }

  input {
    opacity: 0;
    position: relative;
    top: 0;
    left: 0;
    height: 24px;
    width: 24px;

    &:focus + ins {
      @include field-hover;
    }

    &:disabled + ins {
      @include field-disabled;
    }
  }
}

@mixin radiobutton {
  @include radiocheckbox-base;

  ins {
    border-radius: 50%;

    &::after {
      content: '';
      border-radius: 50%;
      height: 14px;
      width: 14px;
    }
  }

  input {
    &:checked + ins {
      &::after {
        display: block;
        background-color: $blue;
      }
    }

    &:checked {
      &:disabled + ins {
        &::after {
          background-color: $gray;
        }
      }
    }
  }
}

@mixin checkbox {
  @include radiocheckbox-base;

  ins {
    border-radius: 3px;

    .fa-check {
      color: $white;
      padding: 3px;
      height: 100%;
      width: 100%;
    }
  }

  input {
    cursor: pointer;

    &:checked {
      & + ins {
        .fa-check {
          display: block;
        }
      }

      &:hover,
      &:focus {
        &:not(:disabled) + ins {
          &::before {
            content: '';
            background: $black-transparent20;
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
          }
        }
      }
    }

    &:checked {
      &:not(:disabled) + ins {
        background: $blue;
        border-color: $blue;
      }
    }

    &:checked {
      &:disabled + ins {
        .fa-check {
          color: $gray;
        }
      }
    }
  }

  span {
    cursor: pointer;
  }
}

@mixin checkbox-new {
  @include radiocheckbox-base-new;

  ins {
    border-radius: 3px;

    .fa-check {
      color: $white;
      padding: 3px;
      height: 100%;
      width: 100%;
    }
  }

  input {
    cursor: pointer;

    &:checked {
      & + ins {
        .fa-check {
          display: block;
        }
      }

      &:hover,
      &:focus {
        &:not(:disabled) + ins {
          &::before {
            content: '';
            background: $black-transparent20;
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
          }
        }
      }
    }

    &:checked {
      &:not(:disabled) + ins {
        background: $blue;
        border-color: $blue;
      }
    }

    &:checked {
      &:disabled + ins {
        .fa-check {
          color: $gray;
        }
      }
    }
  }

  span {
    cursor: pointer;
  }
}
