.alert-info, .alert-warning, .page-info, .page-warning {
  background-color: $YELLOW_BACKGROUND_COLOR;
  border: 1px solid $PRIMARY_BORDER_COLOR;
  padding: 10px 18px 10px 10px;
  @include border-radius($DEFAULT_BORDER_RADIUS);
  @include clearfix();

  .alert-icon, .warning-icon {
    font-size: $EXTRA_LARGE_FONT_SIZE;
    margin-right: 10px;
    float:left;
  }

  .message-container {
    color: $SECONDARY_FONT_COLOR;
    font-size: $MEDIUM_FONT_SIZE;
    height: 24px;
    display: table-cell;
    vertical-align: middle;

    h3 {
      color: $SECONDARY_FONT_COLOR;
      font-size: $LARGE_FONT_SIZE;
      margin: 0;
      margin-bottom: 5px;
    }

    p {
      margin: 0;
    }
  }

  .action-link {
    color: $LINK_COLOR;
    font-size: $MEDIUM_FONT_SIZE;
    font-weight: bold;
    float: right;
    padding-left: 10px;
  }

  .close-icon {
    @extend .delete-icon;
    float: right;
    padding-left: 10px;
  }
}

.alert-success {
  @extend .alert-info;
  background-color: $GREEN_BACKGROUND_COLOR;
  .message-container {
    h3 {
      color: $SUCCESS_COLOR;
    }
  }
}

.alert-error {
  @extend .alert-info;
  background-color: $RED_BACKGROUND_COLOR;
}

.alert--slim {
  .message-container {
    height: auto;
  }

  .alert-icon {
    font-size: $LARGE_FONT_SIZE;
  }
}