// RAMEN NOTIFICATIONS COMPONENT
//
//
// Required Global Variables:
// $spacing-base
// @mixin text-link
// @mixin list
// @mixin list-unordered
//
//
// Required Component Variables:
//
// $notification-background-color: Background color for the standard notification
// $notification-background-color-success: Background color for the success notification
// $notification-background-color-error: Background color for the error notification
// $notification-color: Text color for the notification
// $notification-padding: Padding around the notification
// $notification-font-size: Notification font size
// $notification-line-height: (18 / 16);
// $notification-icon-color: $c-white;
// $notification-icon-size: $spacing-small;
//
//

@mixin notification {
  background-color: $notification-background-color;
  color: $notification-color;
  font-size: $notification-font-size;
  line-height: $notification-line-height;
  padding: $notification-padding $notification-padding $notification-padding
    $notification-padding + $notification-icon-size + $notification-padding;
  position: relative;
}

@mixin notification-icon {
  display: block;
  fill: $notification-icon-color;
  height: $notification-icon-size;
  left: $notification-padding;
  position: absolute;
  top: $notification-padding;
  width: $notification-icon-size;
}

@mixin notification-message {
  margin-bottom: 0;
}

@mixin notification-link {
  &,
  &:link {
    border-color: $notification-color;
    color: $notification-color;

    &:visited,
    &:active {
      color: $notification-color;
    }

    &:hover {
      color: $notification-color;
    }
  }
}

@mixin notification-list {
  font-size: $notification-font-size;
  line-height: $notification-line-height;
  margin: $spacing-base 0 0;

  @include breakpoint($bp-medium) {
    font-size: $notification-font-size;
    line-height: $notification-line-height;
  }

  li:before {
    background-color: $notification-color;
  }
}

@mixin notification-success {
  background-color: $notification-background-color-success;
}

@mixin notification-error {
  background-color: $notification-background-color-error;
}

.c-notification {
  @include notification;

  &__icon {
    @include notification-icon;
  }

  &__message {
    @include notification-message;

    a {
      @include text-link;
      @include notification-link;
    }
  }

  &__list {
    @include list;
    @include list-unordered;
    @include notification-list;
  }

  &--success {
    @include notification-success;
  }

  &--error {
    @include notification-error;
  }
}