@mixin alert-box ($background-img, $background-color) {
  background: url($background-img) no-repeat;
  background-color: $background-color;
  background-position: center;
  background-size: rem(140);
  height: 200px;
  position: relative;
  width: 100%;
}

.elzar-message_container {
  margin: 0 auto;
  min-width: $min-component-width;
  width: 80%;

  @include media(min-width $breakpoint-b) {
    width: 50%;
   }

  @include media(min-width $breakpoint-c) {
    width: 35%;
   }
}

.elzar-alert-box--success {
  @include alert-box (
    'svg/symbol-success.svg',
    $success-color
  );
}

.elzar-alert-box--warning {
  @include alert-box (
    'svg/symbol-alert-warning.svg',
    $warning-color
  );
}

.elzar-alert-box--error {
  @include alert-box (
    'svg/symbol-alert-error.svg',
    $error-color
  );
}

.elzar-close_alert {
  text-align: right;

  &:hover {
    cursor: pointer;
  }

  .elzar-close_icon {
    position: absolute;
    right: rem(7);
    top: rem(7);
  }
}

.elzar-alert_content {
  border: $base-border;
  border-radius: $base-border-radius;
  margin: 0 auto;
  padding: $small-spacing;
  text-align: center;
}

.elzar-alert_text {
  padding-bottom: 10px;
}

.elzar-alert_text--success {
  color: $success-color;
}

.elzar-alert_text--warning {
  color: $warning-color;
}

.elzar-alert_text--error {
  color: $error-color;
}

.elzar-alert_btn {
  color: $nobel;
  padding-left: 60px;

  &:hover {
    color: $pacific-blue;
  }
}