_i-mixins.scss

/* ==========================================================================
   Mixins
   ---
   Internal SCSS mixins
   ========================================================================== */

@mixin style-warning($message) {
   position: relative;

   outline: .3rem solid $auk-red-500;
   outline-offset: .3rem;

   &:after {
      position: absolute;
      display: block;
      top: 100%;
      left: -.6rem;

      min-width: 15rem;
      width: calc(100% + 1.2rem);
      padding: .3rem .6rem;
      background-color: $auk-red-500;

      color: $auk-white;
      content: $message;
   }
}