/* components/toast/toast.css */

/**
 * Toast Component
Full accessibility support
 * Temporary notifications with auto-dismiss
 */

/* ========================================
   TOAST CUSTOM PROPERTIES
   ======================================== */

.c-toast-container {
  /* Layout */
  --c-toast-gap: var(--ds-space-s);
  --c-toast-margin: var(--ds-space-m);
  --c-toast-max-width: 24rem;
  --c-toast-z-index: 1050;
}

.c-toast {
  /* Layout properties */
  --c-toast-padding: var(--ds-space-m);
  --c-toast-border-radius: var(--ds-radius-m);
  --c-toast-gap: var(--ds-space-s);
  
  /* Visual properties */
  --c-toast-background: var(--ds-color-surface);
  --c-toast-border-color: var(--ds-color-border);
  --c-toast-border-width: 1px;
  --c-toast-shadow: var(--ds-shadow-xl);
  
  /* Typography */
  --c-toast-title-font-size: var(--ds-font-size-m);
  --c-toast-title-font-weight: var(--ds-font-weight-semibold);
  --c-toast-message-font-size: var(--ds-font-size-s);
  
  /* Animation */
  --c-toast-animation-duration: var(--ds-duration-medium);
  --c-toast-animation-easing: var(--ds-ease-out);
  
  /* Icon */
  --c-toast-icon-size: 1.25rem;
  
  /* Progress bar */
  --c-toast-progress-height: 3px;
  --c-toast-progress-background: var(--ds-color-border);
  --c-toast-progress-color: var(--ds-color-accent);
}

/* ========================================
   TOAST CONTAINER
   ======================================== */

.c-toast-container {
  position: fixed;
  display: flex;
  flex-direction: column;
  gap: var(--c-toast-gap);
  margin: var(--c-toast-margin);
  max-width: var(--c-toast-max-width);
  width: calc(100% - (var(--c-toast-margin) * 2));
  z-index: var(--c-toast-z-index);
  pointer-events: none;
}

/* Position variants */
.c-toast-container--top-right {
  top: 0;
  right: 0;
}

.c-toast-container--top-left {
  top: 0;
  left: 0;
}

.c-toast-container--top-center {
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

.c-toast-container--bottom-right {
  bottom: 0;
  right: 0;
}

.c-toast-container--bottom-left {
  bottom: 0;
  left: 0;
}

.c-toast-container--bottom-center {
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

/* ========================================
   TOAST BASE
   ======================================== */

.c-toast {
  display: flex;
  align-items: flex-start;
  gap: var(--c-toast-gap);
  padding: var(--c-toast-padding);
  background: var(--c-toast-background);
  border: var(--c-toast-border-width) solid var(--c-toast-border-color);
  border-radius: var(--c-toast-border-radius);
  box-shadow: var(--c-toast-shadow);
  position: relative;
  overflow: hidden;
  pointer-events: all;
  
  /* Animation */
  animation: c-toast-slide-in var(--c-toast-animation-duration) var(--c-toast-animation-easing);
}

/* Toast icon */
.c-toast__icon {
  flex-shrink: 0;
  width: var(--c-toast-icon-size);
  height: var(--c-toast-icon-size);
  display: flex;
  align-items: center;
  justify-content: center;
}

.c-toast__icon svg {
  width: 100%;
  height: 100%;
  stroke-width: 2;
}

/* Toast content */
.c-toast__content {
  flex: 1;
  min-width: 0;
}

.c-toast__title {
  margin: 0 0 var(--ds-space-xs) 0;
  font-size: var(--c-toast-title-font-size);
  font-weight: var(--c-toast-title-font-weight);
  color: var(--ds-color-text);
  line-height: var(--ds-line-height-s);
}

.c-toast__message {
  margin: 0;
  font-size: var(--c-toast-message-font-size);
  color: var(--ds-color-text-weak);
  line-height: var(--ds-line-height-m);
}

/* Toast close button */
.c-toast__close {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0.25rem;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--ds-color-icon);
  border-radius: var(--ds-radius-s);
  transition: all var(--ds-duration-fast) var(--ds-ease-out);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: calc(var(--ds-space-xs) * -1) calc(var(--ds-space-xs) * -1) 0 0;
}

.c-toast__close:hover {
  background: var(--ds-color-button-hover);
  color: var(--ds-color-icon-hover);
}

.c-toast__close:focus-visible {
  outline: var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);
  outline-offset: calc(var(--ds-focus-ring-offset) * -1);
}

.c-toast__close svg {
  width: 100%;
  height: 100%;
  stroke-width: 2;
}

/* Toast progress bar */
.c-toast__progress {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--c-toast-progress-height);
  background: var(--c-toast-progress-background);
  overflow: hidden;
}

.c-toast__progress-bar {
  height: 100%;
  background: var(--c-toast-progress-color);
  transform-origin: left;
  animation: c-toast-progress linear forwards;
}

/* Toast actions */
.c-toast__actions {
  display: flex;
  gap: var(--ds-space-s);
  margin-top: var(--ds-space-s);
}

.c-toast__action {
  padding: var(--ds-space-xs) var(--ds-space-s);
  background: transparent;
  border: 1px solid var(--ds-color-border);
  border-radius: var(--ds-radius-s);
  color: var(--ds-color-accent);
  font-size: var(--ds-font-size-s);
  font-weight: var(--ds-font-weight-medium);
  cursor: pointer;
  transition: all var(--ds-duration-fast) var(--ds-ease-out);
}

.c-toast__action:hover {
  background: var(--ds-color-button-hover);
  border-color: var(--ds-color-accent);
}

.c-toast__action:focus-visible {
  outline: var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);
  outline-offset: var(--ds-focus-ring-offset);
}

/* ========================================
   TOAST VARIANTS
   ======================================== */

/* Success */
.c-toast--success {
  --c-toast-border-color: var(--ds-color-border-success);
  --c-toast-progress-color: var(--ds-color-status-success);
}

.c-toast--success .c-toast__icon {
  color: var(--ds-color-status-success);
}

/* Error/Danger */
.c-toast--error,
.c-toast--danger {
  --c-toast-border-color: var(--ds-color-border-danger);
  --c-toast-progress-color: var(--ds-color-status-danger);
}

.c-toast--error .c-toast__icon,
.c-toast--danger .c-toast__icon {
  color: var(--ds-color-status-danger);
}

/* Warning */
.c-toast--warning {
  --c-toast-border-color: var(--ds-color-border-warning);
  --c-toast-progress-color: var(--ds-color-status-warning);
}

.c-toast--warning .c-toast__icon {
  color: var(--ds-color-status-warning);
}

/* Info */
.c-toast--info {
  --c-toast-border-color: var(--ds-color-border-info);
  --c-toast-progress-color: var(--ds-color-status-info);
}

.c-toast--info .c-toast__icon {
  color: var(--ds-color-status-info);
}

/* Filled variants */
.c-toast--filled {
  color: white;
  border: none;
}

.c-toast--filled.c-toast--success {
  background: var(--ds-color-status-success);
}

.c-toast--filled.c-toast--error,
.c-toast--filled.c-toast--danger {
  background: var(--ds-color-status-danger);
}

.c-toast--filled.c-toast--warning {
  background: var(--ds-color-status-warning);
}

.c-toast--filled.c-toast--info {
  background: var(--ds-color-status-info);
}

.c-toast--filled .c-toast__title,
.c-toast--filled .c-toast__message,
.c-toast--filled .c-toast__close,
.c-toast--filled .c-toast__icon {
  color: white;
}

.c-toast--filled .c-toast__close:hover {
  background: rgba(255, 255, 255, 0.2);
}

.c-toast--filled .c-toast__progress {
  background: rgba(255, 255, 255, 0.3);
}

.c-toast--filled .c-toast__progress-bar {
  background: white;
}

/* ========================================
   ANIMATIONS
   ======================================== */

@keyframes c-toast-slide-in {
  from {
    transform: translateX(calc(100% + var(--c-toast-margin)));
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.c-toast-container--top-left @keyframes c-toast-slide-in,
.c-toast-container--bottom-left @keyframes c-toast-slide-in {
  from {
    transform: translateX(calc(-100% - var(--c-toast-margin)));
  }
}

@keyframes c-toast-slide-out {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(calc(100% + var(--c-toast-margin)));
    opacity: 0;
  }
}

.c-toast-container--top-left @keyframes c-toast-slide-out,
.c-toast-container--bottom-left @keyframes c-toast-slide-out {
  to {
    transform: translateX(calc(-100% - var(--c-toast-margin)));
  }
}

@keyframes c-toast-progress {
  from {
    transform: scaleX(1);
  }
  to {
    transform: scaleX(0);
  }
}

/* Exiting state */
.c-toast--exiting {
  animation: c-toast-slide-out var(--c-toast-animation-duration) var(--c-toast-animation-easing) forwards;
}

/* ========================================
   ACCESSIBILITY
   ======================================== */

/* High contrast mode */
@media (prefers-contrast: high) {
  .c-toast {
    border-width: 2px;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .c-toast {
    animation: none;
  }
  
  .c-toast--exiting {
    animation: none;
    opacity: 0;
  }
  
  .c-toast__progress-bar {
    animation: none;
  }
}

/* Screen reader only text */
.c-toast__sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}