@import "../variables/colors";
@import "../variables/dimensions";

&#notification-container, #notification-container {
  position: fixed;
  right: 0;
  top: 0;
  z-index: $zindex-modal + 1;
  width: $notification-width + $grid-gutter-width * 2;
  left: 50%;
  margin-left: -($notification-width / 2) - $grid-gutter-width;
  pointer-events: none;
  .notification-wrapper {
    opacity: 1;
    border-radius: 0;
    .notification {
      pointer-events: auto;
      margin: $notification-toast-top-offset $grid-gutter-width 0;
      box-shadow: $notification-shadow-offset $notification-shadow-color;
    }
  }
}

.notification-wrapper {
  overflow: hidden;
  position: relative;
  transition: all .5s ease;
  opacity: 0;
  border-radius: $input-border-radius;
  pointer-events: none;
}

.notification-open {
  opacity: 1;
}

.notification {
  font-size: $font-size-base;
  line-height: $line-height-base;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  text-align: center;
  background: $notification-neutral;
  color: $notification-text;
  padding: $notification-padding-vertical $notification-padding-horizontal;
  border-radius: $notification-border-radius;
  margin: 0 0 $default-padding;
  pointer-events: auto;
}

.notification-success {
  background: $notification-success;
}

.notification-warning {
  background: $notification-warning;
}

.notification-error {
  background: $notification-error;
}

.notification-danger {
  background: $notification-fatal;
}

.notification-close-button {
  position: absolute;
  cursor: pointer;
  font-size: $notification-close-button-size;
  top: 0;
  right: 0;
  width: $notification-close-button-size;
  padding: ($notification-padding-vertical - 1px) ($notification-padding-vertical + 3px) 0 0;
  box-sizing: content-box;
  &:hover {
    text-shadow: 0 0 1px $notification-text;
  }
}