// // Notifications // —————————————-

.notification {

background-color: fallback-rgba($notification-bgr-color, .05, $background-color-regular);
// background-color: rgba($notification-bgr-color, .05); since alpha is to low
border: 1px solid $notification-border-color;
border-radius: $notification-border-radius;
@include clearfix();
display: block;
margin-bottom: $notification-margin-bottom;
padding: $notification-padding;
text-align: left;
font-size: $notification-font-size;

&:empty {
  display: none;
}

}

.notification-dismissible {

padding-right: building-units(4);

> .close {
  margin-right: building-units(-3);
  margin-top: -7px;
  margin-left: building-units(1.5);

  &.focus,
  &:focus {
    color: $notification-close-button-focus;
    outline: 0;
  }

  &.hover,
  &:hover {
    color: $notification-close-button-hover;
  }

  &.active,
  &:active {
    color: $notification-close-button-active;
  }

}

}

.notification-content, .notification-left, .notification-right {

overflow: hidden;
zoom: 1;

}

.notification-content > p {

padding: 0;
margin: 0;

}

.notification-left {

float: left;
margin-right: building-units(1);

}

.notification-right {

float: right;
margin-left: building-units(1);

}

.notification-heading {

font-size: $notification-heading-font-size;
font-weight: 400;
padding: 0;
margin: 0;

}

.notification-overlay {

box-shadow: 0 1px 4px rgba(0, 0, 0, .45);

}

.notification-positive {

@include notification-variant($color-positive, $color-positive);

}

.notification-warning {

@include notification-variant($color-warning, $color-warning);

}

.notification-negative {

@include notification-variant($color-negative, $color-negative);

}

.notification-badge {

float: right;
margin-top: building-units(-.5) + 1;
margin-right: building-units(-1);
background-color: $color-gray-dark;
color: #fff;

}

.notification .icon-frame {

padding: 7px 0 0;

.icon-large {
  font-size: 42px;
}

}