// Dependencies from other packages --------------------------------------------
@import '~sui-settings/src/settings';

@if $is-theme == false {
  @import '~sui-reset/src/reset';
  @import '~sui-typography/src/typography';
  @import '~sui-main/src/main';
}

/*
Notifications

Contextual notifications for messages.

Use class `.Notification` for default notification.
The modifier classes are `.Notification--error` for errors, `.Notification--success` for success and `.Notification--warning` for warnings.<br>
Wrap in div with class `.Notification--toastFixed` to fix at top of the page.

Markup:
<!-- Notification -->
<div class="Notification">
	<p class="Notification-title">Lorem ipsum dolor sit</p>
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget.<!-- <a href="#" class="link-underline">Link underline</a> --></p>
</div>
<!-- /Notification -->
<!-- Notification success -->
<div class="Notification Notification--success">
	<p class="Notification-title">Lorem ipsum dolor sit</p>
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget.</p>
</div>
<!-- /Notification success -->
<!-- Notification warning -->
<div class="Notification Notification--warning">
	<p class="Notification-title">Lorem ipsum dolor sit</p>
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget.</p>
</div>
<!-- /Notification warning -->
<!-- Notification error -->
<div class="Notification Notification--error">
	<p class="Notification-title">Lorem ipsum dolor sit</p>
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget.</p>
</div>
<!-- /Notification error -->

Styleguide Notifications-1
*/

.Notification {
  background: $c-dark-mid;
  color: $c-contrast;
  font-size: $fz-base;
  line-height: $lh-base-body;
  padding: $gap-medium;

  a,
  a:hover,
  a:focus {
    color: $c-contrast;
  }

  .Notification--toastFixed & {
    max-width: 970px;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 9998;

    @include mediaquery($mq-tablet) {
      margin: 0 auto;
    }
  }
}

.Notification--error {
  background: $c-error;
}

.Notification--success {
  background: $c-success;
}

.Notification--warning {
  background: $c-warning;
  color: $c-text;

  a,
  a:hover,
  a:focus {
    color: $c-text;
  }

  .Notification-title {
    color: $c-text;
	}
}

.Notification-title {
  color: $c-contrast;
  font-family: $ff-base-bold;
  font-size: $fz-large;
  line-height: $lh-base-body;
  margin-bottom: $gap-base;
}

.Notification-close {
  color: inherit;
  position: absolute;
  right: $gap-base;
  top: $gap-base;
}