/**
 * Toast Variant Styles
 * @countermeasure/web-components
 *
 * Supplements the base cmm-toast styles in ui.css with status variants,
 * structured content, close button, and container positioning.
 */

/* ============================================================================
   TOAST STATUS VARIANTS
   ============================================================================ */
.cmm-toast--success {
  border-left: 3px solid hsl(var(--success));
  background-color: hsl(var(--card));
  color: hsl(var(--foreground));
}

.cmm-toast--success .cmm-toast__icon {
  color: hsl(var(--success));
}

.cmm-toast--error {
  border-left: 3px solid hsl(var(--danger));
  background-color: hsl(var(--card));
  color: hsl(var(--foreground));
}

.cmm-toast--error .cmm-toast__icon {
  color: hsl(var(--danger));
}

.cmm-toast--warning {
  border-left: 3px solid hsl(var(--warning));
  background-color: hsl(var(--card));
  color: hsl(var(--foreground));
}

.cmm-toast--warning .cmm-toast__icon {
  color: hsl(var(--warning));
}

.cmm-toast--info {
  border-left: 3px solid hsl(var(--info));
  background-color: hsl(var(--card));
  color: hsl(var(--foreground));
}

.cmm-toast--info .cmm-toast__icon {
  color: hsl(var(--info));
}

/* ============================================================================
   TOAST ICON
   ============================================================================ */
.cmm-toast__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
}

.cmm-toast__icon svg {
  width: 100%;
  height: 100%;
}

/* ============================================================================
   TOAST CONTENT
   ============================================================================ */
.cmm-toast__content {
  flex: 1;
  min-width: 0;
}

.cmm-toast__title {
  font-size: 0.875rem;
  font-weight: 600;
  color: hsl(var(--foreground));
  line-height: 1.4;
}

.cmm-toast__message {
  font-size: 0.8125rem;
  color: hsl(var(--muted-foreground));
  line-height: 1.4;
  margin-top: 0.125rem;
}

/* ============================================================================
   TOAST CLOSE BUTTON
   ============================================================================ */
.cmm-toast__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: hsl(var(--muted-foreground));
  cursor: pointer;
  opacity: 0.5;
  transition: opacity var(--transition-fast, 150ms),
              background-color var(--transition-fast, 150ms);
}

.cmm-toast:hover .cmm-toast__close {
  opacity: 1;
}

.cmm-toast__close:hover {
  background-color: hsl(var(--accent));
  opacity: 1;
}

/* ============================================================================
   TOAST PROGRESS BAR (auto-dismiss indicator)
   ============================================================================ */
.cmm-toast__progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  border-radius: 0 0 0 var(--radius-md);
  background-color: hsl(var(--muted-foreground) / 0.3);
  animation: cmm-toast-progress linear forwards;
}

.cmm-toast--success .cmm-toast__progress {
  background-color: hsl(var(--success) / 0.5);
}

.cmm-toast--error .cmm-toast__progress {
  background-color: hsl(var(--danger) / 0.5);
}

.cmm-toast--warning .cmm-toast__progress {
  background-color: hsl(var(--warning) / 0.5);
}

.cmm-toast--info .cmm-toast__progress {
  background-color: hsl(var(--info) / 0.5);
}

@keyframes cmm-toast-progress {
  from {
    width: 100%;
  }
  to {
    width: 0%;
  }
}

/* ============================================================================
   CONTAINER POSITION VARIANTS
   ============================================================================ */
.cmm-toast-container--top-right {
  position: fixed;
  top: 1rem;
  right: 1rem;
  bottom: auto;
  left: auto;
  z-index: var(--z-toast, 600);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: 24rem;
}

.cmm-toast-container--top-left {
  position: fixed;
  top: 1rem;
  left: 1rem;
  bottom: auto;
  right: auto;
  z-index: var(--z-toast, 600);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: 24rem;
}

.cmm-toast-container--bottom-right {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  top: auto;
  left: auto;
  z-index: var(--z-toast, 600);
  display: flex;
  flex-direction: column-reverse;
  gap: 0.5rem;
  max-width: 24rem;
}

.cmm-toast-container--bottom-left {
  position: fixed;
  bottom: 1rem;
  left: 1rem;
  top: auto;
  right: auto;
  z-index: var(--z-toast, 600);
  display: flex;
  flex-direction: column-reverse;
  gap: 0.5rem;
  max-width: 24rem;
}

/* ============================================================================
   STACKING
   ============================================================================ */
.cmm-toast-container .cmm-toast {
  position: relative;
  border: 1px solid hsl(var(--border));
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

/* ============================================================================
   RESPONSIVE
   ============================================================================ */
@media (max-width: 480px) {
  .cmm-toast-container--top-right,
  .cmm-toast-container--top-left,
  .cmm-toast-container--bottom-right,
  .cmm-toast-container--bottom-left {
    left: 0.5rem;
    right: 0.5rem;
    max-width: none;
  }
}
