@larva.io/webcomponents/dist/collection/components/internal/notify/notify.css

Fentrica SmartUnits WebComponents package

slot-fb[hidden], slot[hidden] {
  display: initial !important;
}

/**
* @prop --lar-notify-padding-block: Block (vertical) padding of the notification
* @prop --lar-notify-padding-inline: Inline (horizontal) padding of the notification
* @prop --lar-notify-padding-top: Top padding of the notification (legacy)
* @prop --lar-notify-padding-right: Right padding of the notification (legacy)
* @prop --lar-notify-padding-bottom: Bottom padding of the notification (legacy)
* @prop --lar-notify-padding-left: Left padding of the notification (legacy)
* @prop --lar-notify-border-radius: Border radius of the notification
* @prop --lar-notify-backdrop-filter: Backdrop filter for modern glass effect
* @prop --lar-notify-box-shadow: Box shadow for the notification
* @prop --lar-notify-font-size: Font size of the notification text
* @prop --lar-notify-line-height: Line height of the notification text
*/
:host {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  width: 100%;
  height: auto;
  overflow: visible;
  z-index: 3;
  pointer-events: none;
}

.lar-notify-wrapper {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  /* Modern padding with fallback */
  padding-block: var(--lar-notify-padding-block, var(--lar-notify-padding-top, 1rem) var(--lar-notify-padding-bottom, 1rem));
  padding-inline: var(--lar-notify-padding-inline, var(--lar-notify-padding-right, 1rem) var(--lar-notify-padding-left, 1rem));
  margin-block-start: 1rem;
  margin-inline: auto;
  width: 100%;
  max-width: min(600px, 100% - 2rem);
  height: auto;
  min-height: fit-content;
  /* Layout */
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  /* Typography */
  font-size: var(--lar-notify-font-size, 1rem);
  line-height: var(--lar-notify-line-height, 1.5);
  text-align: center;
  /* Text overflow handling */
  overflow-wrap: break-word;
  word-wrap: break-word;
  hyphens: auto;
  /* Visual */
  border-radius: var(--lar-notify-border-radius, 0.5rem);
  box-shadow: var(--lar-notify-box-shadow, 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1));
  backdrop-filter: var(--lar-notify-backdrop-filter, blur(8px));
  /* Animation defaults */
  opacity: 0;
  transform: translateZ(0);
  will-change: transform, opacity;
  /* Interaction */
  pointer-events: auto;
  cursor: pointer;
  user-select: none;
  /* Accessibility */
  z-index: 250;
  /* Smooth transitions */
  transition: opacity 0.2s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .lar-notify-wrapper {
    transition: none;
    will-change: auto;
  }
}

:host(.lar-color-primary) .lar-notify-wrapper {
  background: var(--lar-color-primary, #780bb7) !important;
  color: var(--lar-color-primary-contrast, #fff) !important;
  fill: var(--lar-color-primary-contrast, #fff) !important;
  stroke: var(--lar-color-primary-contrast, #fff) !important;
}

:host(.lar-color-secondary) .lar-notify-wrapper {
  background: var(--lar-color-secondary, #7fb800) !important;
  color: var(--lar-color-secondary-contrast, #fff) !important;
  fill: var(--lar-color-secondary-contrast, #fff) !important;
  stroke: var(--lar-color-secondary-contrast, #fff) !important;
}

:host(.lar-color-tertiary) .lar-notify-wrapper {
  background: var(--lar-color-tertiary, #00a6ed) !important;
  color: var(--lar-color-tertiary-contrast, #fff) !important;
  fill: var(--lar-color-tertiary-contrast, #fff) !important;
  stroke: var(--lar-color-tertiary-contrast, #fff) !important;
}

:host(.lar-color-success) .lar-notify-wrapper {
  background: var(--lar-color-success, #7fb800) !important;
  color: var(--lar-color-success-contrast, #fff) !important;
  fill: var(--lar-color-success-contrast, #fff) !important;
  stroke: var(--lar-color-success-contrast, #fff) !important;
}

:host(.lar-color-warning) .lar-notify-wrapper {
  background: var(--lar-color-warning, #ffb400) !important;
  color: var(--lar-color-warning-contrast, #fff) !important;
  fill: var(--lar-color-warning-contrast, #fff) !important;
  stroke: var(--lar-color-warning-contrast, #fff) !important;
}

:host(.lar-color-danger) .lar-notify-wrapper {
  background: var(--lar-color-danger, #f6511d) !important;
  color: var(--lar-color-danger-contrast, #fff) !important;
  fill: var(--lar-color-danger-contrast, #fff) !important;
  stroke: var(--lar-color-danger-contrast, #fff) !important;
}

:host(.lar-color-light) .lar-notify-wrapper {
  background: var(--lar-color-light, #f4f5f8) !important;
  color: var(--lar-color-light-contrast, #000) !important;
  fill: var(--lar-color-light-contrast, #000) !important;
  stroke: var(--lar-color-light-contrast, #000) !important;
}

:host(.lar-color-medium) .lar-notify-wrapper {
  background: var(--lar-color-medium, #d6d6d6) !important;
  color: var(--lar-color-medium-contrast, #000) !important;
  fill: var(--lar-color-medium-contrast, #000) !important;
  stroke: var(--lar-color-medium-contrast, #000) !important;
}

:host(.lar-color-dark) .lar-notify-wrapper {
  background: var(--lar-color-dark, #222428) !important;
  color: var(--lar-color-dark-contrast, #fff) !important;
  fill: var(--lar-color-dark-contrast, #fff) !important;
  stroke: var(--lar-color-dark-contrast, #fff) !important;
}