// // Notifications // —————————————- .dark {

.notification {
  background-color: fallback-rgba(#525252, .3, $background-color-regular);
  // background-color: rgba(82, 82, 82, .92); since alpha is to low

  &: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: $font-size-headline-h3;
  font-weight: 600;
  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, $color-bright);
}

.notification-warning {
  @include notification-variant($color-warning, $color-warning, $color-bright);
}

.notification-negative {
  @include notification-variant($color-negative, $color-negative, $color-bright);
}

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

}