//
// Notification
// --------------------------------------------------

@mixin notificaion($background-color, $text-color) {
  background-color: $background-color;
  color: $text-color;
}

.notification {
  padding: $padding-base-vertical;
  background-color: $color-grey-1;
  color: $color-white;
  font-size: $font-size-large;
  line-height: $grid-unit-y * 3;
  text-align: center;
  position: relative;

  .list-unstyled {
    margin-bottom: 0;
  }

  .close {
    float: none;
    position: absolute;
    top: 50%;
    right: $grid-unit-y * 2;
    transform: translateY(-50%);
  }

  // Style variations
  // ---------------------

  &-danger {
    @include notificaion($state-danger-bg, $brand-danger);
  }

  &-success {
    @include notificaion($state-success-bg, $brand-success);
  }

  &-info {
    @include notificaion($state-info-bg, $brand-info);
  }

  &-warning {
    @include notificaion($state-warning-bg, $brand-warning);
  }
}