:root {
  --input-padding: 38px;
  --input-icon-top: calc(50% - 11px);
  --inputButton-top: 2px;
  --input-margin: 4px;
  --input-height: 44px;
}

.Input-wrapper {
  position: relative;
  & .Tooltip-wrapper{
    position: absolute;
    top: 0;
    right: 4px;
  }
}

.Input {
  font-size: var(--font-size);
  color: var(--color-neutral-200);
  margin-bottom: var(--space);
}

.Input--light {
  & .InputFeedback--note {
    color: var(--color-white);
    font-size: var(--font-size-tiny);
  }

  & .Input-label {
    color: var(--color-white);
  }

  & .InputFeedback--error {
    display: none;
    color: var(--color-red-100);
  }
}

.Input--dark {
  & .Input-field {
    border: 1px solid var(--color-neutral-300);
    padding: var(--space);
  }

  & .InputFeedback--note {
    color: var(--color-neutral-700);
    font-size: var(--font-size-tiny);
  }

  & .Input-label {
    color: var(--color-neutral-800);
  }

  & .InputFeedback--error {
    display: none;
  }
}

.Input--invalid {
  & .Input-field {
    border: 2px solid var(--color-red-500);
    padding: calc(var(--space) - 1px); /* compensates for the thicker border */
  }

  & .Input-field:hover {
    border: 1px solid var(--color-red-600);
    padding: var(--space);
  }
  
  & .Input-field:focus {
    border: 2px solid var(--color-brand-700);
    outline: 0;
    padding: calc(var(--space) - 1px); /* compensates for the thicker border */
  }
  
  & .InputFeedback--error {
    display: block;
  }
}

.Input-field {
  margin: var(--input-margin) 0;
  padding: var(--space);
  border-radius: var(--border-radius);
  background-color: #fff;

  border: none;
  width: calc(100% - 4px);
  min-height: var(--input-height);
  height: var(--input-height);
  color: var(--color-neutral-text);
  
  /* To make ios happy */
  -webkit-appearance: none;

  &:hover {
    border: 1px solid var(--color-brand-500);
    padding: var(--space);
    outline: 0;
  }

  &:focus, &.Input--focused {
    border: 2px solid var(--color-brand-700);
    padding: calc(var(--space) - 1px); /* compensates for the thicker border */
    outline: 0;
  }

  &.Input-field--textarea {
    height: auto;
    display: flex; /* to remove blank vertical space below the textarea */
  }
}

.Input-fieldWithButton, .Input-fieldWithIcon {
  height: auto;

  & .Input-field {
    position: relative;
    padding: 0 var(--input-padding) 0 0;
    height: auto;

    & input, & textarea {
      border: none;
      outline: none;
      min-height: var(--input-height);
      height: var(--input-height);
      line-height: var(--input-height);
      padding-left: var(--space);
      width: 100%;
    }
  }
}

.Input-fieldWithIcon {
  position: relative;

  & .Icon {
    position: absolute;
    top: var(--input-icon-top);
    right: var(--space);
    color: var(--color-neutral-500);
  }

  & .Input-textareaIcon {
    top: var(--space);
  }

  & .Input-selectIcon {
  /* enable displaying the drop-down list after clicking on custom icon */
  /* does not work in IE < 11 */
    pointer-events: none;
  }
  
  & select.Input-field {
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-left: 8px;
  }

  & select:required:invalid.Input-field {
    color: var(--color-neutral-500);
  }
}

.Input-fieldWithButton {
  position: relative;
  & .Input-field {
    position: relative;
    z-index: 1;
  }

  & .Button {
    position: absolute;
    width: 38px;
    right: 0;
  }
}

.Input-fieldWithButton--showButton {
  & .Input-field {
    padding-right: var(--input-padding);
  }
}

/* PLACEHOLDER */
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: var(--color-neutral-700);
}
::-moz-placeholder { /* Firefox 19+ */
  color: var(--color-neutral-700);
}
:-ms-input-placeholder { /* IE 10+ */
  color: var(--color-neutral-700);
}
:-moz-placeholder { /* Firefox 18- */
  color: var(--color-neutral-700);
}

/* Remove  native arrow in select element */
select::-ms-expand {
  display: none;
}

/* Remove IE 'clear field' X button in inputs */
.Input-field::-ms-clear {
  display: none;
}

/* Hide address book input icon in Safari*/
.Input-field:focus::-webkit-contacts-auto-fill-button {
  display: none !important;
}

/*  firefox vertical aligment of select element text */
@-moz-document url-prefix() {
  .Input-fieldWithIcon {
    & select.Input-field {
      padding-top: 13px;
    }
  }
}