.apos-notification-container {
  position: fixed;
  width: 33vw;
  bottom: @apos-padding-2;
  right: @apos-padding-2;
  z-index: @apos-z-index-8;

  @media @apos-breakpoint-desktop-xl
  {
    bottom: @apos-padding-4;
    right: @apos-padding-4;
  }
}

// With and without scoping so these styles
// beat out the defaults inside modals too. -Tom

.apos-notification,
.apos-ui .apos-notification {
  background-color: @apos-white;
  color: @apos-dark;
  .apos-button-border(@apos-dark);
  .apos-rounded();
  .apos-drop-shadow();
  overflow: hidden;
  margin-bottom: @apos-padding-2;
  padding: 0;
  text-align: left;
  line-height: inherit;
  position: relative;
  cursor: pointer;
  .apos-transition;

  &-message {
    font-size: 16px;
    margin-right: 32px;
    padding: @apos-padding-1 @apos-padding-2 !important;

    &-close {
      position: absolute;
      right: 8px;
      top: 50%;
      transform: translateY(-50%);
    }
  }

  &--hidden {
    opacity: 0;
  }
}

.apos-notification.apos-notification--error {
  .apos-button-border(@apos-white);
  background-color: @apos-red;
  color: @apos-white;
}

.apos-notification.apos-notification--warn {
  .apos-button-border(@apos-white);
  background-color: @apos-gold;
  color: @apos-white;
}

.apos-notification.apos-notification--success {
  .apos-button-border(@apos-white);
  background-color: @apos-green;
  color: @apos-white;
}

.apos-notification--pulse {
  animation: aposPulse 2s infinite;
}