Form Input: Is Error (Example)

.forminput {

  .forminput-x-error,
  .forminput-x-label,
  .forminput-x-note {
    @include textstyle-smallbold;
  }

  .forminput-x-error {
    color: $color-interactive2;
  }

  .forminput-x-label {
    margin-bottom: $gridspacing / 2;
    transition: color $transition-duration $transition-easing;
    will-change: color;
  }

  .forminput-x-note {
    margin-top: $gridspacing;
  }

  .forminput-x-input {

    > input,
    > textarea,
    > select {
      @include textstyle-body;
      background-color: rgba($color-interactive1, .08);
      border-radius: $border-radius;
      box-sizing: border-box;
      color: $color-dark3;
      padding: $gridspacing * 1.5 $gridspacing * 2;
      transition: background-color $transition-duration $transition-easing,
                  box-shadow $transition-duration $transition-easing,
                  color $transition-duration $transition-easing;
      width: 100%;
      will-change: background-color, box-shadow, color;


      &:focus,
      &:hover {
        box-shadow: 0 0 0 1px inset $color-interactive1;
        outline: none;
      }

      &:active {
        box-shadow: 0 0 0 1px inset $color-dark4;
        color: $color-dark2;
      }

    }

    > textarea {
      height: 88px;
    }

  }

  &.forminput-is-disabled {

    .forminput-x-label {
      color: $color-dark3;
    }

    .forminput-x-input {

      > input,
      > textarea,
      > select {
        background-color: $color-light2;
        pointer-events: none;
      }

    }

  }

  &.forminput-is-error {

    .forminput-x-label {
      color: $color-interactive2;
    }

    .forminput-x-input {

      > input,
      > textarea,
      > select {
        box-shadow: 0 0 0 1px $color-interactive2;
      }

    }

  }

}

.forminput-iconbutton {

  .forminput-x-input {
    position: relative;
    display: flex;
    align-items: center;

    input {
      background: $color-light1;
      border-radius: 0;
      padding-right: $gridspacing * 5;
    }
  }

  .forminput-x-button {
    position: absolute;
    right: $gridspacing * 1.5;

    svg {
      width: $gridspacing * 3;
      height: $gridspacing * 3;
      fill: $color-dark1;
    }
  }
}

.forminput-select-inline {
  .forminput-x-label {
    @include textstyle-smallbold;
    margin-right: $gridspacing;
  }

  .forminput-x-input {
    flex-grow: 1;
    position: relative;
    display: flex;
    align-items: center;

    svg {
      fill: $color-dark1;
      width: 16px;
      height: 16px;
      position: absolute;
      right: $gridspacing * 1.5;
      pointer-events: none;
    }

    select {
      padding-right: 30px;
    }
  }
}