htwkalender-pwa/frontend/public/primevue-sass-theme/theme-base/components/messages/_toast.scss

// core
.p-toast {
  width: 25rem;
  white-space: pre-line;
  word-break: break-word;
}

.p-toast-message-icon {
  flex-shrink: 0;
}

.p-toast-message-content {
  display: flex;
  align-items: flex-start;
}

.p-toast-message-text {
  flex: 1 1 auto;
}

.p-toast-top-center {
  transform: translateX(-50%);
}

.p-toast-bottom-center {
  transform: translateX(-50%);
}

.p-toast-center {
  min-width: 20vw;
  transform: translate(-50%, -50%);
}

.p-toast-icon-close {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

.p-toast-icon-close.p-link {
  cursor: pointer;
}

/* Animations */
.p-toast-message-enter-from {
  opacity: 0;
  -webkit-transform: translateY(50%);
  -ms-transform: translateY(50%);
  transform: translateY(50%);
}

.p-toast-message-leave-from {
  max-height: 1000px;
}

.p-toast .p-toast-message.p-toast-message-leave-to {
  max-height: 0;
  opacity: 0;
  margin-bottom: 0;
  overflow: hidden;
}

.p-toast-message-enter-active {
  -webkit-transition:
    transform 0.3s,
    opacity 0.3s;
  transition:
    transform 0.3s,
    opacity 0.3s;
}

.p-toast-message-leave-active {
  -webkit-transition:
    max-height 0.45s cubic-bezier(0, 1, 0, 1),
    opacity 0.3s,
    margin-bottom 0.3s;
  transition:
    max-height 0.45s cubic-bezier(0, 1, 0, 1),
    opacity 0.3s,
    margin-bottom 0.3s;
}

// theme
.p-toast {
  opacity: $toastOpacity;

  .p-toast-message {
    margin: $toastMargin;
    box-shadow: $toastShadow;
    border-radius: $borderRadius;

    .p-toast-message-content {
      padding: $toastPadding;
      border-width: $toastBorderWidth;

      .p-toast-message-text {
        margin: $toastMessageTextMargin;
      }

      .p-toast-message-icon {
        font-size: $toastIconFontSize;

        &.p-icon {
          width: $toastIconFontSize;
          height: $toastIconFontSize;
        }
      }

      .p-toast-summary {
        font-weight: $toastTitleFontWeight;
      }

      .p-toast-detail {
        margin: $toastDetailMargin;
      }
    }

    .p-toast-icon-close {
      width: $toastIconFontSize;
      height: $toastIconFontSize;
      border-radius: $actionIconBorderRadius;
      background: transparent;
      transition: $actionIconTransition;
      outline-color: transparent;

      &:hover {
        background: rgba(255, 255, 255, 0.5);
      }

      &:focus-visible {
        @include focused();
      }
    }

    &.p-toast-message-info {
      background: $infoMessageBg;
      border: $infoMessageBorder;
      border-width: $messageBorderWidth;
      color: $infoMessageTextColor;

      .p-toast-message-icon,
      .p-toast-icon-close {
        color: $infoMessageIconColor;
      }
    }

    &.p-toast-message-success {
      background: $successMessageBg;
      border: $successMessageBorder;
      border-width: $messageBorderWidth;
      color: $successMessageTextColor;

      .p-toast-message-icon,
      .p-toast-icon-close {
        color: $successMessageIconColor;
      }
    }

    &.p-toast-message-warn {
      background: $warningMessageBg;
      border: $warningMessageBorder;
      border-width: $messageBorderWidth;
      color: $warningMessageTextColor;

      .p-toast-message-icon,
      .p-toast-icon-close {
        color: $warningMessageIconColor;
      }
    }

    &.p-toast-message-error {
      background: $errorMessageBg;
      border: $errorMessageBorder;
      border-width: $messageBorderWidth;
      color: $errorMessageTextColor;

      .p-toast-message-icon,
      .p-toast-icon-close {
        color: $errorMessageIconColor;
      }
    }

    @if variable-exists(secondaryMessageBg) {
      &.p-toast-message-secondary {
        background: $secondaryMessageBg;
        border: $secondaryMessageBorder;
        border-width: $messageBorderWidth;
        color: $secondaryMessageTextColor;

        .p-toast-message-icon,
        .p-toast-icon-close {
          color: $secondaryMessageIconColor;
        }
      }
    }

    @if variable-exists(contrastMessageBg) {
      &.p-toast-message-contrast {
        background: $contrastMessageBg;
        border: $contrastMessageBorder;
        border-width: $messageBorderWidth;
        color: $contrastMessageTextColor;

        .p-toast-message-icon,
        .p-toast-icon-close {
          color: $contrastMessageIconColor;
        }
      }
    }
  }
}