textarea {
  min-height: 120px;
}



textarea:focus {
  // BUG : Text areas seem to need additional offset to stop pixel jumping
}

select:disabled {
  @extend %input-disabled;
}

.text-input-disabled {
  i {
    color: rgba(0, 0, 0, 0.3);
  }
}

.text-input {
  position: relative;



  &.text-input-icon-right,
  &.text-input-icon-left {
    i {
      position: absolute;
      z-index: 2;
      top: 50%;
      transform: translateY(-50%);
    }
  }

  &.text-input-icon-left {
    i {
      left: $spacing-small;
    }

    input {
      padding-left: calc(#{$spacing-large} * 0.9);
    }
  }

  &.text-input-icon-right {
    i {
      right: $spacing-small;
    }

    input {
      padding-right: calc(#{$spacing-large} * 0.9);
    }
  }

  &.has-text-overlay-right {
    input,
    textarea {
      padding-right: calc(#{$spacing-large} * 0.9);
    }
  }

  &.has-text-overlay-left {
    input,
    textarea {
      padding-left: calc(#{$spacing-large} * 0.9);
    }
  }
}

.input-overlay-text-right {
  position: absolute;
  top: 12px;
  right: 18px;
  opacity: 0.4;
}

.input-overlay-text-left {
  position: absolute;
  top: 12px;
  left: 18px;
  opacity: 0.4;
}