@mixin error($message: none) {
  outline: 5px solid red !important;
  @include message;

  &:after {
    content: $message !important;
    background: red !important;
    color: white !important;
  }
}

@mixin warning($message: none) {
  outline: 5px solid yellow;
  @include message;

  &:after {
    content: $message;
    background: yellow;
    color: black;
  }
}

@mixin message() {
  &:not([class*="position-"]) {
    position: relative;
  }
  &:after {
    position: absolute;
    bottom: 100%;
    left: -5px;
    padding: 2px 4px 1px 4px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    text-align: left;
    text-decoration: none;
    text-indent: 0;
    text-shadow: none;
    text-transform: none;
    word-wrap: none;
    white-space: nowrap;
  }
}