.notifications {
  position: fixed;
  width: 300px;
  z-index: 100;

  &--bottom {
    bottom: scale.$lg-2;
  }

  &--left {
    left: scale.$lg-2;
  }

  .notification {
    margin-top: scale.$sm-1;
    opacity: 0;
    position: relative;
    transition: all 700ms cubic-bezier(0.68, -0.55, 0.265, 1.55);

    &__close {
      background-color: transparent;
      border: 0;
      margin: 0;
      position: absolute;
      right: scale.$sm-2;
      top: scale.$sm-2;
      padding: scale.$sm-1;

      .icon {
        color: color.$ui-gray-500;
      }
    }

    .alertBanner {
      box-shadow: 0px 8px 10px rgba(0, 0, 0, 0.1), 0px 5px 5px rgba(0, 0, 0, 0.08);
    }

    &.active {
      opacity: 1;

      &.exiting {
        opacity: 0;
      }
    }
    // Overrides for the flash-messages content
    .pds-popup__header {
      overflow-wrap: anywhere;
      word-break: break-word;
    }
  }
}
