/* VaultToast — fixed container, one or more toasts with type variants */

.vault-toast-container {
  position: fixed;
  /* Above .vault-modal-overlay (10050) and .vault-modal-overlay--above-elevated-drawer (10070); below date picker (1000001). */
  z-index: 10080;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  pointer-events: none;
  max-width: 20rem;
}

.vault-toast-container--top-right {
  top: 1rem;
  right: 1rem;
  left: auto;
  bottom: auto;
}

.vault-toast-container--top-left {
  top: 1rem;
  left: 1rem;
  right: auto;
  bottom: auto;
}

.vault-toast-container--top-center {
  top: 1rem;
  left: 50%;
  right: auto;
  bottom: auto;
  transform: translateX(-50%);
}

.vault-toast-container--bottom-right {
  bottom: 1rem;
  right: 1rem;
  left: auto;
  top: auto;
}

.vault-toast-container--bottom-left {
  bottom: 1rem;
  left: 1rem;
  right: auto;
  top: auto;
}

.vault-toast-container--bottom-center {
  bottom: 1rem;
  left: 50%;
  right: auto;
  top: auto;
  transform: translateX(-50%);
}

.vault-toast {
  pointer-events: auto;
  padding: 0.625rem 0.875rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.4;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  border: 1px solid transparent;
  animation: vault-toast-in 0.2s ease-out;
}
.vault-toast.vault-toast--out {
  animation: vault-toast-out 0.2s ease-in forwards;
}

@keyframes vault-toast-in {
  from {
    opacity: 0;
    transform: translateY(0.5rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes vault-toast-out {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-0.25rem);
  }
}

.vault-toast--success {
  background: var(--vault-bg-elevated);
  border-color: rgba(16, 185, 129, 0.5);
  color: var(--vault-text);
}
.vault-toast--success::before {
  content: '';
  display: inline-block;
  width: 0.875rem;
  height: 0.875rem;
  margin-right: 0.5rem;
  vertical-align: -0.15em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2310b981'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 13l4 4L19 7'/%3E%3C/svg%3E") no-repeat center;
  background-size: contain;
}

.vault-toast--error,
.vault-toast--danger {
  background: rgba(30, 41, 59, 0.98);
  border-color: rgba(239, 68, 68, 0.6);
  color: #fca5a5;
}
.vault-toast--error::before,
.vault-toast--danger::before {
  content: '';
  display: inline-block;
  width: 0.875rem;
  height: 0.875rem;
  margin-right: 0.5rem;
  vertical-align: -0.15em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23ef4444'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 18L18 6M6 6l12 12'/%3E%3C/svg%3E") no-repeat center;
  background-size: contain;
}

.vault-toast--warning {
  background: var(--vault-bg-elevated);
  border-color: rgba(245, 158, 11, 0.6);
  color: var(--vault-text);
}
.vault-toast--warning::before {
  content: '';
  display: inline-block;
  width: 0.875rem;
  height: 0.875rem;
  margin-right: 0.5rem;
  vertical-align: -0.15em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23f59e0b'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z'/%3E%3C/svg%3E") no-repeat center;
  background-size: contain;
}

.vault-toast--default {
  background: var(--vault-bg-elevated);
  border-color: var(--vault-border);
  color: var(--vault-text);
}