@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 dropdown {
  position: relative;

  // sass-lint:disable no-vendor-prefixes
  select {
    @include field-base;
    padding-right: 44px;
    appearance: none;

    &:hover,
    &:focus {
      @include field-hover;

      &::-ms-value {
        background: $white;
        color: $gray-dark;
      }
    }

    &:not(:disabled) {
      cursor: pointer;
    }

    &:disabled {
      @include field-disabled;
      color: $warm-grey;

      & ~ .icon {
        color: $gray;
      }
    }

    &::-ms-expand {
      display: none;
    }
  }

  .icon {
    color: $blue;
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 1;

    .fa-chevron-down {
      padding: 5px;
      height: 100%;
      width: 100%;
    }
  }
}

@mixin dropdown-small {
  padding-top: 5px;
  padding-bottom: 5px;
}

@mixin search-field {
  position: relative;

  &__input {
    @include inputfield;
    padding-right: 100px;

    // ie11, edge remove default clear button
    // sass-lint:disable no-vendor-prefixes
    &::-ms-clear {
      display: none;
    }
  }

  &__submit {
    position: absolute;
    top: 50%;
    right: 16px;
    padding: 0;
    color: $blue;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.5rem;
    border: 0;
    background: none;
    cursor: pointer;

    &:hover {
      color: $blue-dark;
    }

    @include media-breakpoint-up(md) {
      transform: translateY(-50%);
    }
  }

  &__submit-label {
    position: relative;
    display: none;
    line-height: normal;

    @include media-breakpoint-up(md) {
      display: inline;
      padding: 0 0 0 6px;
    }
  }

  &__submit-icon {
    position: relative;
    line-height: normal;
  }

  &-results {
    h2 {
      margin: 20px 0;
    }
  }
}

@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;
  }
}