/*
 * NEXUS TOAST NOTIFICATION COMPONENT
 * Pill-style toasts with type label badge and arrow icon.
 */

:root {
  color-scheme: light;

  /* Toast – Layout & Spacing */
  --nexus-sys-toast-z-index: 10000;
  --nexus-sys-toast-container-gap: var(--nexus-ref-spacing-12);
  --nexus-sys-toast-container-offset: var(--nexus-ref-spacing-24);
  --nexus-sys-toast-inner-height: 30px;
  --nexus-sys-toast-inner-padding-block: 0;
  --nexus-sys-toast-inner-padding-inline-start: var(--nexus-ref-spacing-4);
  --nexus-sys-toast-inner-padding-inline-end: var(--nexus-ref-spacing-12);
  --nexus-sys-toast-inner-gap: var(--nexus-ref-spacing-10);
  --nexus-sys-toast-radius: 999px;
  --nexus-sys-toast-transition: 0.25s ease;

  /* Toast – Label Badge */
  --nexus-sys-toast-label-height: 22px;
  --nexus-sys-toast-label-padding: 0 var(--nexus-ref-spacing-10);
  --nexus-sys-toast-label-radius: 999px;
  --nexus-sys-toast-label-font-size: 11px;
  --nexus-sys-toast-label-font-weight: var(--nexus-ref-font-weight-semibold);
  --nexus-sys-toast-label-gap: var(--nexus-ref-spacing-6);

  /* Toast – Message */
  --nexus-sys-toast-message-font-weight: var(--nexus-ref-font-weight-medium);

  /* Toast – Size MD (default) */
  --nexus-sys-toast-md-message-font-size: var(--nexus-ref-text-font-size-xs);
  --nexus-sys-toast-md-message-line-height: var(--nexus-ref-text-line-height-xs);
  --nexus-sys-toast-md-label-font-size: var(--nexus-ref-text-font-size-xs);
  --nexus-sys-toast-md-inner-height: 30px;
  --nexus-sys-toast-md-label-height: 22px;

  /* Toast – Size LG */
  --nexus-sys-toast-lg-message-font-size: var(--nexus-ref-text-font-size-sm);
  --nexus-sys-toast-lg-message-line-height: var(--nexus-ref-text-line-height-sm);
  --nexus-sys-toast-lg-label-font-size: var(--nexus-ref-text-font-size-xs);
  --nexus-sys-toast-lg-inner-height: 32px;
  --nexus-sys-toast-lg-label-height: 24px;

  /* Toast – Arrow Icon */
  --nexus-sys-toast-arrow-size: 16px;
  --nexus-sys-toast-arrow-icon-size: 14px;
  --nexus-sys-toast-label-arrow-size: 12px;

  /* Toast – Progress Bar */
  --nexus-sys-toast-progress-height: 3px;

  /* Toast – Success Colors */
  --nexus-sys-toast-success-background: var(--nexus-ref-success-100);
  --nexus-sys-toast-success-label-background: var(--nexus-ref-success-30);
  --nexus-sys-toast-success-label-text: var(--nexus-ref-primary-100);
  --nexus-sys-toast-success-message: var(--nexus-ref-success-20);
  --nexus-sys-toast-success-arrow: var(--nexus-ref-success-50);

  /* Toast – Warning Colors */
  --nexus-sys-toast-warning-background: var(--nexus-ref-warning-100);
  --nexus-sys-toast-warning-label-background: var(--nexus-ref-warning-50);
  --nexus-sys-toast-warning-label-text: var(--nexus-ref-primary-100);
  --nexus-sys-toast-warning-message: var(--nexus-ref-error-80);
  --nexus-sys-toast-warning-arrow: var(--nexus-ref-warning-20);

  /* Toast – Error Colors */
  --nexus-sys-toast-error-background: var(--nexus-ref-error-95);
  --nexus-sys-toast-error-label-background: var(--nexus-ref-error-50);
  --nexus-sys-toast-error-label-text: var(--nexus-ref-primary-100);
  --nexus-sys-toast-error-message: var(--nexus-ref-error-50);
  --nexus-sys-toast-error-arrow: var(--nexus-ref-error-90);

  /* Toast – Info Colors */
  --nexus-sys-toast-info-background: var(--nexus-ref-info-90);
  --nexus-sys-toast-info-label-background: var(--nexus-ref-info-50);
  --nexus-sys-toast-info-label-text: var(--nexus-ref-primary-100);
  --nexus-sys-toast-info-message: var(--nexus-ref-info-20);
  --nexus-sys-toast-info-arrow: var(--nexus-ref-info-20);
}

/* Container: fixed top-right, stack vertically */
.nexus-toast-container {
  position: fixed;
  top: var(--nexus-sys-toast-container-offset);
  inset-inline-end: var(--nexus-sys-toast-container-offset);
  z-index: var(--nexus-sys-toast-z-index);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--nexus-sys-toast-container-gap);
  pointer-events: none;
}

.nexus-toast-container[data-position="bottom-right"] {
  top: auto;
  bottom: var(--nexus-sys-toast-container-offset);
}

.nexus-toast-container[data-position="top-left"] {
  inset-inline-end: auto;
  inset-inline-start: var(--nexus-sys-toast-container-offset);
  align-items: flex-start;
}

.nexus-toast-container[data-position="bottom-left"] {
  top: auto;
  inset-inline-end: auto;
  bottom: var(--nexus-sys-toast-container-offset);
  inset-inline-start: var(--nexus-sys-toast-container-offset);
  align-items: flex-start;
}

.nexus-toast-container[data-position="top-center"] {
  inset-inline-end: 50%;
  transform: translateX(50%);
  align-items: center;
}

[dir="rtl"] .nexus-toast-container[data-position="top-center"] {
  transform: translateX(-50%);
}

.nexus-toast-container[data-position="bottom-center"] {
  top: auto;
  bottom: var(--nexus-sys-toast-container-offset);
  inset-inline-end: 50%;
  transform: translateX(50%);
  align-items: center;
}

[dir="rtl"] .nexus-toast-container[data-position="bottom-center"] {
  transform: translateX(-50%);
}

/* Single toast: pill shape */
.nexus-toast {
  pointer-events: auto;
  border-radius: var(--nexus-sys-toast-radius);
  overflow: hidden;
  animation: nexus-toast-in var(--nexus-sys-toast-transition) forwards;
  font-family: Manrope, sans-serif;
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
}

.nexus-toast.nexus-toast-exit {
  animation: nexus-toast-out 0.2s ease forwards;
}

@keyframes nexus-toast-in {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes nexus-toast-out {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-10px);
  }
}

.nexus-toast-inner {
  height: var(--nexus-sys-toast-md-inner-height);
  padding-block: var(--nexus-sys-toast-inner-padding-block);
  padding-inline-start: var(--nexus-sys-toast-inner-padding-inline-start);
  padding-inline-end: var(--nexus-sys-toast-inner-padding-inline-end);
  display: flex;
  align-items: center;
  gap: var(--nexus-sys-toast-inner-gap);
}

/* Type label badge */
.nexus-toast-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--nexus-sys-toast-md-label-height);
  padding: var(--nexus-sys-toast-label-padding);
  border-radius: var(--nexus-sys-toast-label-radius);
  font-size: var(--nexus-sys-toast-md-label-font-size);
  font-weight: var(--nexus-sys-toast-label-font-weight);
  line-height: 1;
  white-space: nowrap;
  gap: var(--nexus-sys-toast-label-gap);
}

/* Arrow inside badge (for trailing position) */
.nexus-toast-label-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.nexus-toast-label-arrow svg {
  width: var(--nexus-sys-toast-label-arrow-size);
  height: var(--nexus-sys-toast-label-arrow-size);
  stroke: currentColor;
}

.nexus-toast-message {
  flex: 1;
  min-width: 0;
  font-size: var(--nexus-sys-toast-md-message-font-size);
  font-weight: var(--nexus-sys-toast-message-font-weight);
  line-height: var(--nexus-sys-toast-md-message-line-height);
  white-space: nowrap;
}

/* Arrow icon button */
.nexus-toast-arrow {
  flex-shrink: 0;
  width: var(--nexus-sys-toast-arrow-size);
  height: var(--nexus-sys-toast-arrow-size);
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease;
}

.nexus-toast-arrow:hover {
  transform: translateX(2px);
}

.nexus-toast-arrow:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
  border-radius: var(--nexus-ref-spacing-4);
}

.nexus-toast-arrow svg {
  width: var(--nexus-sys-toast-arrow-icon-size);
  height: var(--nexus-sys-toast-arrow-icon-size);
}

/* ========================================
   SUCCESS TYPE
   ======================================== */
.nexus-toast[data-type="success"] {
  background: var(--nexus-sys-toast-success-background);
}

.nexus-toast[data-type="success"] .nexus-toast-label {
  background: var(--nexus-sys-toast-success-label-background);
  color: var(--nexus-sys-toast-success-label-text);
}

.nexus-toast[data-type="success"] .nexus-toast-message {
  color: var(--nexus-sys-toast-success-message);
}

.nexus-toast[data-type="success"] .nexus-toast-arrow {
  color: var(--nexus-sys-toast-success-arrow);
}

/* ========================================
   WARNING TYPE
   ======================================== */
.nexus-toast[data-type="warning"] {
  background: var(--nexus-sys-toast-warning-background);
}

.nexus-toast[data-type="warning"] .nexus-toast-label {
  background: var(--nexus-sys-toast-warning-label-background);
  color: var(--nexus-sys-toast-warning-label-text);
}

.nexus-toast[data-type="warning"] .nexus-toast-message {
  color: var(--nexus-sys-toast-warning-message);
}

.nexus-toast[data-type="warning"] .nexus-toast-arrow {
  color: var(--nexus-sys-toast-warning-arrow);
}

/* ========================================
   ERROR TYPE
   ======================================== */
.nexus-toast[data-type="error"] {
  background: var(--nexus-sys-toast-error-background);
}

.nexus-toast[data-type="error"] .nexus-toast-label {
  background: var(--nexus-sys-toast-error-label-background);
  color: var(--nexus-sys-toast-error-label-text);
}

.nexus-toast[data-type="error"] .nexus-toast-message {
  color: var(--nexus-sys-toast-error-message);
}

.nexus-toast[data-type="error"] .nexus-toast-arrow {
  color: var(--nexus-sys-toast-error-arrow);
}

/* ========================================
   INFO TYPE (default)
   ======================================== */
.nexus-toast[data-type="info"],
.nexus-toast:not([data-type]) {
  background: var(--nexus-sys-toast-info-background);
}

.nexus-toast[data-type="info"] .nexus-toast-label,
.nexus-toast:not([data-type]) .nexus-toast-label {
  background: var(--nexus-sys-toast-info-label-background);
  color: var(--nexus-sys-toast-info-label-text);
}

.nexus-toast[data-type="info"] .nexus-toast-message,
.nexus-toast:not([data-type]) .nexus-toast-message {
  color: var(--nexus-sys-toast-info-message);
}

.nexus-toast[data-type="info"] .nexus-toast-arrow,
.nexus-toast:not([data-type]) .nexus-toast-arrow {
  color: var(--nexus-sys-toast-info-arrow);
}

/* ========================================
   OPTIONAL PROGRESS BAR
   ======================================== */
.nexus-toast-progress-wrap {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--nexus-sys-toast-progress-height);
  background: rgba(0, 0, 0, 0.1);
  overflow: hidden;
  border-radius: 0 0 var(--nexus-sys-toast-radius) var(--nexus-sys-toast-radius);
}

.nexus-toast-progress-fill {
  height: 100%;
  width: 100%;
  transition: none;
}

.nexus-toast[data-type="success"] .nexus-toast-progress-fill {
  background: var(--nexus-sys-toast-success-label-background);
}

.nexus-toast[data-type="error"] .nexus-toast-progress-fill {
  background: var(--nexus-sys-toast-error-label-background);
}

.nexus-toast[data-type="warning"] .nexus-toast-progress-fill {
  background: var(--nexus-sys-toast-warning-label-background);
}

.nexus-toast[data-type="info"] .nexus-toast-progress-fill,
.nexus-toast:not([data-type]) .nexus-toast-progress-fill {
  background: var(--nexus-sys-toast-info-label-background);
}

/* Toast with progress needs relative positioning */
.nexus-toast:has(.nexus-toast-progress-wrap) {
  position: relative;
  padding-bottom: var(--nexus-sys-toast-progress-height);
}

/* Toast without arrow - adjust padding */
.nexus-toast[data-no-arrow="true"] .nexus-toast-inner {
  padding-inline-end: var(--nexus-ref-spacing-12);
}

/* Label position trailing - adjust padding */
.nexus-toast[data-label-position="trailing"] .nexus-toast-inner {
  padding-inline-start: var(--nexus-ref-spacing-12);
  padding-inline-end: var(--nexus-ref-spacing-4);
}

.nexus-toast[data-label-position="trailing"][data-no-arrow="true"] .nexus-toast-inner {
  padding-inline-end: var(--nexus-ref-spacing-4);
}

/* Trailing badge with arrow - adjust badge padding */
.nexus-toast[data-label-position="trailing"] .nexus-toast-label {
  padding-inline-end: var(--nexus-ref-spacing-8);
}

/* ========================================
   SIZE VARIANTS
   ======================================== */

/* Size MD (default) - already applied via base styles */
.nexus-toast[data-size="md"] .nexus-toast-inner {
  height: var(--nexus-sys-toast-md-inner-height);
}

.nexus-toast[data-size="md"] .nexus-toast-label {
  height: var(--nexus-sys-toast-md-label-height);
  font-size: var(--nexus-sys-toast-md-label-font-size);
}

.nexus-toast[data-size="md"] .nexus-toast-message {
  font-size: var(--nexus-sys-toast-md-message-font-size);
  line-height: var(--nexus-sys-toast-md-message-line-height);
}

/* Size LG */
.nexus-toast[data-size="lg"] .nexus-toast-inner {
  height: var(--nexus-sys-toast-lg-inner-height);
}

.nexus-toast[data-size="lg"] .nexus-toast-label {
  height: var(--nexus-sys-toast-lg-label-height);
  font-size: var(--nexus-sys-toast-lg-label-font-size);
}

.nexus-toast[data-size="lg"] .nexus-toast-message {
  font-size: var(--nexus-sys-toast-lg-message-font-size);
  line-height: var(--nexus-sys-toast-lg-message-line-height);
}

@media (prefers-reduced-motion: reduce) {
  .nexus-toast {
    animation: none;
  }
  .nexus-toast.nexus-toast-exit {
    animation: none;
  }
}