/* @file
 * Messages
 *
 */

%message-style-warning {
  background-color: $warning-bg !important;
  color: $white;
}

%message-style-error {
  background: $error-bg !important;
  color: $white;
}

%message-style-status {
  background: $status-bg !important;
  color: $white;
}

// Some sections in the admin call this div directly but do not use the template - so accommodate that here.
.messages.messages--status {
  @extend %message-style-status;
}

.messages.messages--warning {
  @extend %message-style-warning;
}

.messages.messages--error {
  @extend %message-style-error;
}

// Standard message styling for status, warning, error.
.messages {
  padding: 10px;
  &::before,
  .message-number {
    padding-right: 10px;
  }
  &.ma-status-messages {
    background: $body-background !important;
  }
  &.messages--status {
    .card {
      @extend %message-style-status;
    }
  }
  &.messages--warning {
    .card {
      @extend %message-style-warning;
    }
  }
  &.messages--error {
    .card {
      @extend %message-style-error;
    }
  }
}

// Drawer message styling for status, warning, error.
.messages-clone {
  background: $body-background !important;
  &.messages--status {
    .card-content {
      border: 2px solid $status-bg !important;
      color: $black;
      .message-header .card-title {
        &::before {
          @extend .material-icons;

          color: $status-bg;
          content: 'check';
        }
      }
    }
  }
  &.messages--warning {
    .card-content {
      border: 2px solid $warning-bg !important;
      color: $black;
      .message-header .card-title {
        &::before {
          @extend .material-icons;

          color: $warning-bg;
          content: 'warning';
        }
      }
    }
  } // Drawer error message styling
  &.messages--error {
    .card-content {
      border: 2px solid $error-bg !important;
      color: $black;
      .message-header .card-title {
        &::before {
          @extend .material-icons;

          color: $error-bg;
          content: 'error';
        }
      }
    }
  }
  .card-title {
    &::before,
    .message-number {
      padding-right: 10px;
    }
  }
  .card-content {
    .messages__list {
      margin-top: 0;
      padding-left: 30px;
      li.messages__item {
        margin-bottom: 10px;
        border-bottom: 1px solid color($utility, 'darken-2');
        padding-bottom: 10px;
        &:last-child {
          border-bottom: 0;
        }
      }
    }
  }
}

.toast,
.badge {
  &.messages--status {
    @extend %message-style-status;
  }
  &.messages--warning {
    @extend %message-style-warning;
  }
  &.messages--error {
    @extend %message-style-error;
  }
}


.message-trigger {
  color: $black;
  .mt-text {
    margin-right: 5px;
    margin-left: 5px;
    color: $black;
  }
  i.material-icons {
    color: $white;
    font-size: 24px; //set font size the same size as badges
  }
  i,
  span {
    vertical-align: middle;
  }
  span.badge {
    display: none;
    margin-left: 5px;
    border-radius: 1em;
    min-width: 2em;
    height: 2em;
    vertical-align: middle;
    text-align: center;
    line-height: 2em;
    color: $white;
    font-size: .8em;
  }
}

.material_login .message-trigger i.material-icons {
  color: $black;
}

.message-action {
  margin-right: 0;
  margin-left: 3rem;
  font-size: .8rem;
  font-weight: 500;
}

.messages--warning,
.messages--status,
.messages--error {
  box-shadow: none !important;
  background-image: none !important;
  &.messages-clone .card {
    @extend .z-depth-0;
  }
  &.toast {
    color: $white;
  }
}

#notification-wrapper {
  //hide by default, if there is a badge, JS will enable
  display: none;
  margin-top: 1.5em;
}

// Trigger notifications button
a.modal-trigger {
  transition: color .3s ease;
  padding: .5em;
  text-transform: uppercase;
  text-decoration: none;
  color: $black;
  &:hover {
    color: color($utility, 'darken-2');
  }
}

.description.modal-trigger {
  display: block;
  margin: 10px 5px;
  padding: 0;
  text-transform: none;
  color: color($primary, 'darken-1');
  font-size: .8em;
}

.modal-content .notification-title {
  border-bottom: 1px solid color($utility, 'darken-2');
  padding-bottom: 10px;
  font-size: 1.7rem;
}