@mixin message-color($color) {
  color: $color;

  .input-message__icon svg {
    fill: $color;
  }
}

.input-message {
  display: none;
  padding: 0 16px;
  margin-top: 8px;
  margin-right: auto;
  position: relative;

  &__icon {
    display: inline-block;

    .svg-inline--fa {
      width: 16px;
      height: 16px;
    }
  }

  &__text {
    font-size: $font-size-base;
    font-weight: 500;
    margin-left: 8px;
  }

  &__success {
    @include message-color($yellow-green);
  }

  &__error {
    @include message-color($rose-pink);
  }
}