// Dependencies.
@import 'components/status/status';

// Messages
//
// System alerts.
//
// Style guide: components.messages

// Messages
//
// Weight: -1
//
// Markup: messages-single.hbs
//
// .messages--warning   - Warning messages.
// .messages--error     - Error messages.
//
// Style guide: components.messages.single

// Messages
//
// Markup: messages-multiple.hbs
//
// .messages--warning   - Warning messages.
// .messages--error     - Error messages.
//
// Style guide: components.messages.multiple

.messages,
%messages {
  @extend %status--ok;
  @extend .fa-check;
  @include output-rhythm(margin, rhythm(1) 0);
  padding: 22px 15px 22px 90px;
  border: 1px solid color(message-ok);
  position: relative;
  display: inline-block;
  width: 100%;
  font-size: 16px;
  font-family: $font-body;

  @include rtl() {
    padding: 10px 50px 10px 10px;
    background-position: 99% 8px;
  }

  &:before {
    @extend .fa;
    font-size: 32px;
    position: absolute;
    top: 50%;
    left: 0;
    margin-top: -18px;
    color: color(message-color);
    width: 60px;
    text-align: center;
    z-index: 1;
  }

  &:after {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    background: color(message-ok);
    width: 60px;
    height: 100%;
    content: '';
  }

  &--warning {
    @extend %messages;
    @extend .fa-warning;
    @extend %status--warning;
    border-color: color(warning-border);

    &:after {
      background: color(message-warning);
    }
  }

  &--error {
    @extend %messages;
    @extend .fa-close;
    @extend %status--error;
    border-color: color(error-border);

    &:after {
      background: color(message-error);
    }
  }

  &--error__highlighted-text {
    color: color(status-highlight);
  }

  &__list {
    margin: 0;
    text-indent: 0;
    padding-left: 15px;
  }

  &__item {
    list-style-image: none;
    margin-bottom: 12px;

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

//
// Drupal selectors.
//

.messages {
  &.warning {
    @extend %messages--warning;
  }

  &.error {
    @extend %messages--error;
  }
}

.messages--error .error,
.messages.error .error {
  @extend %messages--error__highlighted-text;
}
