.input-container {
  position: relative;
  display: inline-block;
  width: 265px;
  display: flex;

  .input-icon {
    position: absolute;
    right: $base-spacing-triple;
    top: 50%;
    transform: translateY(-50%);
    font-size: $text-small;
    font-weight: $font-weight-semibold;
    color: $color-grey;
  }

  .input-component:focus + .input-icon {
    color: $color-blue;
  }

  .input-component:focus + .number-input-button-wrapper > .number-input-button {
    color: $color-blue;
  }

  .input-component {
    font-size: $text-smallest;
    padding-left: $base-spacing-quad;
    background-color: $color-white;
    color: $color-black;
    border: 1px solid $color-light-grey;
    border-radius: $border-radius-small;
    // margin is set to counteract the different border widths (same applies to all the margin: 0)
    margin: 1px;

    &.invalid {
      border: 2px solid $color-red;
      margin: 0px;

      :focus {
        border: 2px solid $color-blue;
        outline: none;
        margin: 0px;
      }
    }

    &.valid {
      border: 2px solid $color-green;
      margin: 0px;
    }

    &.disabled {
      opacity: 0.5;

      &::placeholder {
        opacity: 0.3;
      }

      &:hover::placeholder {
        opacity: 0.3;
      }
    }

    &:focus {
      border: 2px solid $color-blue;
      outline: none;
      margin: 0px;

      &.valid {
        border: 2px solid $color-green;
        margin: 0px;
      }

      &.number {
        border-right: 2px solid $color-blue;
      }
    }

    &.round {
      border-radius: 36px;
    }

    &.number {
      width: 230px;
      margin-right: 0px;
      border-right: none;
      border-radius: $border-radius-small 0px 0px $border-radius-small;
    }
  }

  input {
    width: 245px;
    padding-top: $base-spacing-triple;
    padding-bottom: $base-spacing-triple;
    padding-left: $base-spacing-quad;

    &::placeholder {
      color: $color-grey;
      opacity: 0.6;
    }

    &:hover::placeholder {
      opacity: 0.8;
    }
  }


  textarea {
    padding-top: 10px;
    height: 120px;
    width: 262px;

    &::placeholder {
      color: $color-grey;
      opacity: 0.6;
    }

    &:hover::placeholder {
      opacity: 0.8;
    }

    &.fixedSize {
      resize: none;
    }
  }

  .number-input-button-wrapper {
    display: flex;
    flex-direction: column;
    border: 1px solid transparent;
    border-left: 0px;

    .number-input-button {
      cursor: pointer;
      width: 32px;
      height: 50%;
      padding: 0px;
      border: 1px solid $color-light-grey;
      background-color: $color-lightest-grey;
      color: $color-grey;
      display: flex;
      align-items: center;
      justify-content: center;

      &:hover {
        color: lighten($color-grey, 10%);
      }

      &:active, &:hover {
        color: $color-blue;
      }

      &.up {
        border-radius: 0 $border-radius-small 0 0;
      }

      &.down {
        border-radius: 0 0 $border-radius-small 0;
        border-top: none;
      }
    }
  }
}