@import '../../../assets/scss/utils/variables';

.hawk-input {
  width: -webkit-fill-available;
  display: block;
  height: 25px;
  padding: 4px 10px;
  font-size: $standard-font-size;
  line-height: 1.42857143;
  color: $gray-1;
  background-color: $white;
  background-image: none;
  border: 1px solid $gray-2;
  border-radius: 4px;
  outline: none;
  -moz-appearance: textfield;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
  -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
  transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
  &::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    color: $gray-2;
  }
  &::-moz-placeholder { /* Firefox 19+ */
    color: $gray-2;
  }
  &:-ms-input-placeholder { /* IE 10+ */
    color: $gray-2;
  }
  &:-moz-placeholder { /* Firefox 18- */
    color: $gray-2;
  }
  &::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  &::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  &:focus {
    border-color: $blue-1;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
  }
  &__label {
    margin-bottom: 5px;
  }
  &__description {
    font-size: 12px;
    margin-top: 6px;
    color: $blue-5;
  }
  &__error {
    border-color: $red-1;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(255, 134, 134, 0.6);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(255, 134, 134, 0.6);
    &-message {
      color: $red-1;
      font-size: 13px;
    }
  }
  &__wrapper {
    position: relative;
    .hawk-tooltip {
      display: block;
      &__content-top {
        left: unset;
        right: -38px;
        margin-left: 0;
      }
    }
  }
  &__copy {
    &-icon {
      cursor: pointer;
      position: absolute;
      right: 16px;
      top: 12px;
      opacity: .8;
      margin: -3px;
      -webkit-transition: opacity .1s ease;
      transition: opacity .1s ease;
      color: $gray-1;
    }
    &-text {
      padding: 4px 35px 4px 10px;
    }
  }
  &__read-only {
    cursor: default;
  }
  &__disabled {
    background-color: $gray-3;
    cursor: not-allowed;
  }
}

.hawk-textarea {
  width: -webkit-fill-available;
  display: block;
  resize: none;
  padding: 4px 10px;
  font-size: $standard-font-size;
  line-height: 1.42857143;
  color: $gray-1;
  font-family: inherit;
  background-color: $white;
  background-image: none;
  border: 1px solid $gray-2;
  border-radius: 4px;
  outline: none;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
  -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
  transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
  &::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    color: $gray-2;
  }
  &::-moz-placeholder { /* Firefox 19+ */
    color: $gray-2;
  }
  &:-ms-input-placeholder { /* IE 10+ */
    color: $gray-2;
  }
  &:-moz-placeholder { /* Firefox 18- */
    color: $gray-2;
  }
  &:focus {
    border-color: $blue-1;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
  }
  &__label {
    margin-top: 5px;
  }
  &__error {
    border-color: $red-1;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(255, 134, 134, 0.6);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(255, 134, 134, 0.6);
    &-message {
      color: $red-1;
      font-size: 13px;
    }
  }
  &__disabled {
    background-color: $gray-3;
    cursor: not-allowed;
  }
  &__read-only {
    cursor: default;
  }
}