$notification-font-size: 14px;
$notification-line-height: 1.3;
$notification-font-weight: 600;
$notification-horizontal-size: 20px;
$notification-vertical-size: 15px;
$notification-border-radius: 4px;

$notification-icon-font-size: 24px;
$notification-icon-horizontal-size: 16px;
$notification-icon-vertical-size: 0px;

.sh-notification {
  font-size: $notification-font-size;
  font-weight: $notification-font-weight;
  line-height: $notification-line-height;
  display: flex;
  align-items: center;
  width: 100%;
  padding: $notification-vertical-size $notification-horizontal-size;
  border-radius: $notification-border-radius;
  box-shadow: 0 rem-calc(5) rem-calc(10) 0 rgba(0, 0, 0, 0.05);
  border: 1px solid;

  &-illustration {
    padding: 0;
    padding-right: $notification-horizontal-size;
  }

  img {
    max-width: 100%;
    padding-right: rem-calc(5);
  }

  i {
    padding-right: $notification-icon-horizontal-size;
    font-size: $notification-icon-font-size;
  }

  span.text {
    padding-right: rem-calc(20);
  }

  div.text {
    .header,
    .desc {
      margin: 0;
      font-weight: 400;
    }

    .header {
      font-size: $font-size-base;
      color: $color-outer-space;
      font-weight: 600;
      line-height: rem-calc(19);
      margin-bottom: rem-calc(3);
    }

    .desc {
      font-size: $font-size-xx-small;
      color: $color-pale-sky;
      line-height: rem-calc(18);
    }
  }

  a.close {
    padding-left: $notification-icon-horizontal-size;
    color: $color-outer-space;

    i {
      padding: 0;
      font-size: rem-calc(12);
    }
  }

  .btn {
    margin-left: $notification-icon-horizontal-size;
  }
}

//background, border, color
$notification: (
  'green': (
    $color-frost,
    $color-frost,
    $color-green-haze
  ),
  'orange': (
    $color-old-lace,
    $color-chablis,
    $color-golden-grass
  ),
  'red': (
    $color-chablis,
    $color-soft-pink,
    $color-mandy
  ),
  'blue': (
    $color-alice-blue,
    $color-pattens-blue,
    $color-cerulean
  ),
  'blue-extended': (
    $color-pattens-blue,
    $color-pattens-blue,
    $color-outer-space
  )
);

@include banners('sh-notification', $notification);

.notification-wrapper {
  padding: 20px 20px 82px 20px;
}
.notifications {
  padding: 20px 15px 20px 20px;
}