@import "./../../../style-config/colors";
@import "./../../../style-config/input-field";
@import "./../../../style-config/mixins";
@import "./../../../style-config/general";
@import "./../../../style-config/z-index";

.common-input {
  position: relative;

  .common-input__message {
    opacity: 0;
    transition: opacity 0.2s 1.3s, visibility 0s 1.5s;
    visibility: hidden;
  }

  &--message-hidden .common-input__message {
    opacity: 0;
    transition: none;
    visibility: hidden;
  }

  &--message-shown .common-input__message.common-input__message {
    opacity: 1;
    transition: opacity 0s 0s, visibility 0s 0s;
    visibility: visible;
  }

  .carbon-fieldset + &,
  + .carbon-fieldset,
  + .common-input {
    margin-top: 10px;
  }

  &:hover .common-input__field .common-input__input {
    border-color: $input-active-border-color;
  }
}

.common-input--readonly {
  .common-input__input {
    background-color: transparent;
    border: none;

    &:active,
    &:focus {
      box-shadow: none;
    }
  }
}

.common-input--align-left {
  .common-input__input {
    text-align: left;
  }

  .carbon-icon.common-input__icon {
    left: auto;
    right: 0;
  }
}

.common-input--align-right {
  .common-input__input {
    text-align: right;
  }

  .carbon-icon.common-input__icon {
    left: 5px;
    right: auto;
  }
}

.common-input--align-right.common-input--label-inline {
  .carbon-icon.common-input__icon {
    left: auto;
    margin: 7px -40px;
    right: 70%;
    &.icon-error {
      top: 0;
    }
  }
}

.common-input__field {
  position: relative;
}

.common-input__input {
  background-color: $white;
  border-radius: $input-border-radius;
  border: $input-common-border;
  box-sizing: border-box;
  color: $input-common-color;
  font-family: $input-common-font;
  font-size: $input-common-font-size;
  height: $input-common-height;
  line-height: $input-common-line-height;
  margin: 0px;
  outline: none;
  padding: $input-common-padding;
  width: 100%;
  vertical-align: baseline;

  &::-ms-clear {
    // Hide x icon in IE
    display: none;
  }

  &:active,
  &:focus {
    border-color: $input-active-border-color;
    box-shadow: 0 0 6px rgba(25, 99, 246, 0.6);
    @include transition(box-shadow linear 0.1s);
  }

  .common-input--disabled &,
  &[disabled] {
    background-color: $grey-light !important; // this is the correct use of !important
    border-color: $grey !important; // this is the correct use of !important

    &:active,
    &:focus {
      box-shadow: none;
    }
  }

  &::-webkit-input-placeholder,
  &::-moz-placeholder {
    color: $grey-dark-blue-40;
  }

  &:-ms-input-placeholder {
    color: $grey-dark-blue-40;
  }
}

.common-input__message-wrapper {
  top: 0;
  position: absolute;
  width: 260px;
}

.common-input__message {
  $arrow-size: 5px;

  border-radius: 3px 3px 3px 0;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
  box-sizing: border-box;
  font-weight: 600;
  opacity: 0;
  left: 9999px; // show offscreen until it is positioned correctly
  margin-top: $arrow-size;
  max-width: 260px;
  min-width: 50px;
  padding: 10px;
  position: absolute;
  text-align: center;
  width: fit-content;
  width: -moz-fit-content;
  z-index: $z-validation-message;

  &:before {
    border-top: 14px solid transparent;
    border-right: 16px solid transparent;
    content: '';
    display: block;
    position: absolute;
    left: 0;
    bottom: -14px;
  }
}

.common-input__message--warning .carbon-link__anchor {
  color: white;
  text-decoration: underline;
}

.common-input__message--warning:before {
  border-top-color: $warning;
}

.common-input__message--error:before {
  border-top-color: $error;
}

.common-input__message--hidden {
  display: none;
}

.common-input__message--locked.common-input__message {
  opacity: 1;
  transition: none;
  visibility: visible;
}

.common-input__message--flipped {
  border-radius: 3px 3px 0 3px;

  &:before {
    border-left: 16px solid transparent;
    border-right: none;
    left: auto;
    right: 0;
  }
}

.carbon-icon.common-input__icon {
  height: 15px;
  position: absolute;
  right: 5px;
  top: 28px;

  &:before {
    font-size: 20px;
  }

  &.common-input__icon--warning {
    color: $warning;
  }
}

.common-input--label-inline {
  .icon-error {
    right: 5px;
    top: 6px;
  }
}

.common-input--error .common-input__label,
.common-input__icon {
  color: $error;
}

.common-input__input--warning,
.common-input__input--warning:hover {
  border-color: $warning !important; // this is the correct use of !important
  position: relative;
  z-index: 1;
}

.common-input__input--error,
.common-input__input--error:hover {
  border-color: $error !important; // this is the correct use of !important
}

.common-input__message--warning {
  background-color: $warning;
  color: $white;
}

.common-input__message--error {
  background-color: $error;
  color: $white;
}

.common-input__prefix {
  font-weight: bold;
  font-size: $input-common-font-size;
  left: 7px;
  position: absolute;
  top: 8px;
}

.common-input__input-icon {
  font-weight: bold;
  left: 7px;
  position: absolute;
  top: 6px;

  ~ .common-input__prefix,
  + .common-input__input {
    text-indent: 21px;
  }
}

.common-input--label-inline {
  .common-input__input-icon,
  .common-input__prefix {
    left: 23px;
  }
}

.common-input__input--fake {
  text-align: left;
  overflow: hidden;
}

.common-input__input-help {
  position: absolute;
  top: 6px;
  right: -24px;
}