// Messages
//
// Status message styles. These should be used to provide feedback to the user for
// events that occur outside the normal application flow (such as application errors).
// Close button is added using JavaScript. See `system-messages.js`.
//
// .-error - Used to display errors. Be careful not to blame the user for a mistake.
//
// Markup:
//   <div class="messages {{modifier_class}}">
//     <strong>There's something <em>I need</em></strong> to tell you.
//   </div>
//
// Styleguide Messages

.messages {
  @include rgba(color, #fff, 0.7);
  position: relative;
  width: 100%;
  max-width: $max-width;
  background: $purple;
  text-align: left;
  margin: 0 auto;
  padding: $base-spacing;
  padding-right: 72px;

  b, strong, a {
    font-weight: $weight-bold;
    color: #fff;
  }

  // Accepts plain 'error' class for Drupal compatability
  &.-error, &.error {
    background: $error-color;
  }
}

.messages__close {
  position: absolute;
  top: 6px;
  right: 27px;
  font-size: 45px;
  font-weight: bold;
  color: $white;
  opacity: 0.4;
  text-decoration: none;

  span {
    display: none;
  }

  &:after {
    content: "\00d7";
  }

  &:hover {
    opacity: 0.7;
    text-decoration: none;
  }

  &:active {
    opacity: 1;
  }
}