//
// @file
// Generate styles for message color variants.
//

// Declare a list of message styles that can be overriden.
$message-icon-size: 1.5em !default;
$message-variants: (status $color-success success) (warning $color-warning warning) (error $color-error error) !default;

@mixin message($name, $border, $icon: null) {
  /* Specific styles for the #{$name} message. */
  %message-#{$name} {
    background: $color-background;

    [dir="ltr"] & {
      border-left-color: $border;
    }

    [dir="rtl"] & {
      border-right-color: $border;
    }

    @if $icon != null {
      @extend %message-with-icon;

      &:before {
        background-image: image-url($icon + ".svg");
      }
    }
  }
}

@mixin messages($variants: $message-variants) {
  /* General message styles. */
  %message {
    @include box-sizing(border-box);
    margin: $rhythm-space 0;
    padding: $rhythm-space;
    border-width: $base-border-width;
    border-style: solid;
    border-color: $color-border;

    [dir="ltr"] & {
      border-left-width: $rhythm-space-short;
      @include border-top-right-radius;
      @include border-bottom-right-radius;
    }

    [dir="rtl"] & {
      border-right-width: $rhythm-space-short;
      @include border-top-left-radius;
      @include border-bottom-left-radius;
    }

    > :first-child {
      margin-top: 0;
    }

    > :last-child {
      margin-bottom: 0;
    }
  }

  /* Messages with icons. */
  %message-with-icon {
    $icon-padding: $message-icon-size + ($rhythm-space * 2);
    $icon-margin: -($message-icon-size + $rhythm-space);

    [dir="ltr"] & {
      padding-left: $icon-padding;
    }

    [dir="rtl"] & {
      padding-right: $icon-padding;
    }

    &:before {
      content: "";
      display: inline-block;
      width: $message-icon-size;
      height: $message-icon-size;
      background: {
        color: transparent;
        repeat: no-repeat;
        position: center center;
        size: 100%;
      }

      [dir="ltr"] & {
        float: left;
        margin-left: -($message-icon-size + $rhythm-space);
      }

      [dir="rtl"] & {
        float: right;
        margin-right: -($message-icon-size + $rhythm-space);
      }
    }
  }

  @each $variant in $variants {
    @include message($variant...);
  }
}
