_patterns_form-validation.scss

@import 'settings';

// form validation styling for form inputs
@mixin vf-p-form-validation {
  $icon-size: map-get($icon-sizes, default);

  %vf-validation-wrapper {
    background-position: left, center;
    background-repeat: no-repeat;
    padding-left: calc($icon-size + $sph--small);
    padding-top: 0;
  }

  .p-form-validation__message {
    @extend %small-text;
    @extend %vf-validation-wrapper;

    .is-dense + & {
      margin-top: 0;
    }

    margin-top: -$sp-unit;
  }

  .is-caution {
    .p-form-validation__input {
      background-color: $colors--theme--background-caution-default;
      border-bottom-color: $colors--theme--border-caution;

      &:hover {
        background-color: $colors--theme--background-caution-hover;
      }

      &:focus {
        background-color: $colors--theme--background-caution-active;
      }
    }

    .p-form-validation__message {
      @include vf-icon-warning-themed;
      color: $colors--theme--border-caution;
    }
  }

  .is-error {
    .p-form-validation__input {
      background-color: $colors--theme--background-negative-default;
      border-bottom-color: $colors--theme--border-negative;

      &:hover {
        background-color: $colors--theme--background-negative-hover;
      }

      &:focus {
        background-color: $colors--theme--background-negative-active;
      }
    }

    .p-form-validation__message {
      @include vf-icon-error-themed;
      color: $colors--theme--border-negative;
    }
  }

  .is-success {
    .p-form-validation__input {
      background-color: $colors--theme--background-positive-default;
      border-bottom-color: $colors--theme--border-positive;

      &:hover {
        background-color: $colors--theme--background-positive-hover;
      }

      &:focus {
        background-color: $colors--theme--background-positive-active;
      }
    }

    .p-form-validation__message {
      @include vf-icon-success-themed;
      color: $colors--theme--border-positive;
    }
  }
}