@mixin eui-input (
  $radius: 4px,
  $line-height: 35px,
  $font-size: 14px,
  $padding: 10px 7px,
  $color: #303030,
  $border-background: linear-gradient(to bottom,  rgba(0, 0, 0, 0.25) 0%,  rgba(0, 0, 0, 0.12) 100%),
  $background: #ffffff,
  $box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.10)
) {
  padding: 1px;
  display: inline-block;
  vertical-align: middle;
  font-family: "Helvetica Neue", Helvetica, Arial, Tahoma, sans-serif;
  border-radius: $radius;
  font-size: $font-size;
  background: $border-background;
  box-sizing: border-box;

  .eui-component-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    border: 0px;
    border-radius: inherit;
    line-height: $line-height;
    box-sizing: border-box;
  }

  input,
  textarea {
    height: 100%;
    width: 100%;
    border: none;
    box-sizing: border-box;
    resize: none;
    font-family: "Helvetica Neue", Helvetica, Arial, Tahoma, sans-serif;
    border-radius: inherit;
    padding: $padding;
    font-size: inherit;
    color: $color;
    box-shadow: $box-shadow;
    background: $background;
  }

  input:disabled,
  textarea:disabled {
    background: #f9f9f9;
    color: #777777;
  }

  input:focus,
  textarea:focus {
    margin: -1px;
    width: calc(100% + 2px);
    height: calc(100% + 2px);
    border: solid 1px #7fb5ff;
    box-shadow:
      0px 0px 4px #0090ff,
      inset 0px 1px 2px rgba(0, 0, 0, 0.15);
    outline: none;
    animation: eui-focus-highlight 0.2s 1;
  }

  &.eui-error input,
  &.eui-error textarea {
    margin: -1px;
    width: calc(100% + 2px);
    height: calc(100% + 2px);
    border: solid 1px #ff7f7f;
    box-shadow:
      0px 0px 4px #ff0000,
      inset 0px 2px 3px rgba(0, 0, 0, 0.1);
    outline: none;
    animation: eui-error-highlight 0.2s 1;
  }
}