.isa-input {
  height: $input-height-size-l;
  font-family: $font-family;
  font-size: $input-font-size;
  font-weight: $font-weight-bold;
  letter-spacing: $input-letter-spacing;
}

.isa-text-input {
  border: inherit;
  border-radius: inherit;
  padding: 0 5%;
  overflow: hidden;
  width: 75%;
  outline: none;
  caret-color: $isa-red;

  &:placeholder-shown {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  &::placeholder {
    color: rgba(90, 114, 138, 1);
  }

  &.error {
    width: 30%;
  }
}

.isa-input-submit {
  background: $content-background-color;
  background-image: url('assets/images/Search_Icon.svg');
  border: inherit;
  border-radius: inherit;
  position: absolute;
  outline: none;
  right: 20px;
  height: 27px;
  width: 27px;
  background-size: cover;
  top: 17px;
  cursor: pointer;

  &.scan {
    top: 0;
    right: 0;
    height: 58px;
    width: 58px;
    background-image: url('assets/images/Search_Icon_Scan.svg');
  }
}

.isa-input-reset {
  width: 22px;
  height: 22px;
  right: 65px;
  top: 19px;
  outline: none;
  position: absolute;
  background: none;
  cursor: pointer;
  background-image: url('assets/images/close.svg');
  border: none;
  background-size: contain;
  background-repeat: no-repeat;
}

.isa-input-reset-sm {
  width: 17px;
  height: 17px;
  outline: none;
  background: none;
  cursor: pointer;
  background-image: url('assets/images/close.svg');
  border: none;
  background-size: contain;
  background-repeat: no-repeat;
}

.isa-input-error {
  color: $isa-red;
  font-size: 14px;
  font-weight: 700;
  animation: errorShake 0.3s cubic-bezier(0.7, 0.07, 0.19, 0.97) both;
}

.isa-input-warning {
  color: $isa-neutral-info;
  font-size: 20px;
  font-weight: 700;
  line-height: 28px;
  animation: errorShake 0.3s cubic-bezier(0.7, 0.07, 0.19, 0.97) both;
}

@keyframes errorShake {
  10% {
    transform: translate3d(-1px, 0, 0);
  }

  50% {
    transform: translate3d(2px, 0, 0);
  }

  70% {
    transform: translate3d(-3px, 0, 0);
  }

  90% {
    transform: translate3d(3px, 0, 0);
  }
}
