@import "../../../theme/global";

/**
* @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, calc(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 rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(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) {
    transition: none;
    will-change: auto;
  }
}


@mixin generate-color($color-name) {
  background: lar-color($color-name, base) !important;
  color: lar-color($color-name, contrast) !important;
  fill: lar-color($color-name, contrast) !important;
  stroke: lar-color($color-name, contrast) !important;
}

@each $color-name, $value in $colors {
  :host(.lar-color-#{$color-name}) .lar-notify-wrapper {
    @include generate-color($color-name);
  }
}