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

// core
.p-message-wrapper {
  display: flex;
  align-items: center;
}

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

.p-message-close {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.p-message-close.p-link {
  margin-left: auto;
  overflow: hidden;
  position: relative;
}

.p-message-enter-from {
  opacity: 0;
}

.p-message-enter-active {
  transition: opacity 0.3s;
}

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

.p-message.p-message-leave-to {
  max-height: 0;
  opacity: 0;
  margin: 0;
}

.p-message-leave-active {
  overflow: hidden;
  transition:
    max-height 0.3s cubic-bezier(0, 1, 0, 1),
    opacity 0.3s,
    margin 0.15s;
}

.p-message-leave-active .p-message-close {
  display: none;
}

// theme
.p-message {
  margin: $messageMargin;
  border-radius: $borderRadius;

  .p-message-wrapper {
    padding: $messagePadding;
  }

  .p-message-close {
    width: $actionIconWidth;
    height: $actionIconHeight;
    border-radius: $actionIconBorderRadius;
    background: transparent;
    transition: $actionIconTransition;
    outline-color: transparent;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .p-message-text {
    font-size: $messageTextFontSize;
    font-weight: $messageTextFontWeight;
  }

  .p-message-icon {
    font-size: $messageIconFontSize;
    margin-right: $inlineSpacing;
  }

  .p-icon:not(.p-message-close-icon) {
    width: $messageIconFontSize;
    height: $messageIconFontSize;
  }
}