$notification-background-color: $white !default;

$notification-default-color: $grey-light !default;

$notification-padding-sides: 1.125rem !default;
$notification-padding: .825rem $notification-padding-sides !default;
$notification-border-left-width: 5px !default;
$notification-shadow: 0 4px 8px rgba($black, 0.1) !default;
$notification-text-color: $darker-grey !default;

$notification-title-margin: .5rem !default;

$notification-body-padding: 0 1rem 0 0 !default;

$notification-bordered-border-width: 1px !default;

.notification {
  display: flex;
  align-items: center;
  background-color: $notification-background-color;
  padding: $notification-padding;
  box-shadow: $notification-shadow;
  border: 0 solid $notification-default-color;
  border-left-width: $notification-border-left-width;

  .icon {
    width: 3rem;
    margin-left: -$notification-padding-sides;
    color: $notification-default-color;
  }

  .delete {
    margin-left: auto;
  }

  &.is-bordered {
    box-shadow: none;
    border-top-width: $notification-bordered-border-width;
    border-bottom-width: $notification-bordered-border-width;
    border-right-width: $notification-bordered-border-width;
  }

  @each $name, $pair in $colors {
    $color: nth($pair, 1);

    &.is-#{$name} {
      border-color: $color;

      .icon {
        color: $color;
      }
    }
  }
}

.notification-body {
  color: $notification-text-color;
  padding: $notification-body-padding;

  .title {
    font-weight: bold;
    margin-bottom: $notification-title-margin;
  }
}