@import "colors";

@mixin blueprint-interaction {
  .feedback  { @include feedback-base;     }
  .error     { @include error(feedback);   }
  .alert     { @extend .error;             }
  .notice    { @include notice(feedback);  }
  .success   { @include success(feedback); }
  .info      { @include info(feedback);    }
  .hide      { display: none;              }
  .highlight { @include highlight;         }
  .added     { @include added;             }
  .removed   { @include removed;           }
}

@mixin feedback-base {
  padding: 0.8em;
  margin-bottom: 1em;
  border: 2px solid $feedback-border-color; }

@mixin error($feedback-base-class: false) {
  @if $feedback-base-class { @extend .#{$feedback-base-class}; }
  @else                    { @include feedback-base;           }
  background: $error-bg-color;
  color: $error-color;
  border-color: $error-border-color;
  a { color: $error-color; }
}

@mixin notice($feedback-base-class: false) {
  @if $feedback-base-class { @extend .#{$feedback-base-class}; }
  @else                    { @include feedback-base;           }
  background: $notice-bg-color;
  color: $notice-color;
  border-color: $notice-border-color;
  a { color: $notice-color; }
}

@mixin success($feedback-base-class: false) {
  @if $feedback-base-class { @extend .#{$feedback-base-class}; }
  @else                    { @include feedback-base;           }
  background: $success-bg-color;
  color: $success-color;
  border-color: $success-border-color;
  a { color: $success-color; }
}

@mixin info($feedback-base-class: false) {
  @if $feedback-base-class { @extend .#{$feedback-base-class}; }
  @else                    { @include feedback-base;           }
  background: $info-bg-color;
  color: $info-color;
  border-color: $info-border-color;
  a { color: $info-color; }
}

@mixin highlight {
  background: $highlight-color; }

@mixin added {
  background: $added-bg-color;
  color: $added-color; }

@mixin removed {
  background: $removed-bg-color;
  color: $removed-color; }
