/* ============================================
TOAST NOTIFICATIONS - Accessible
============================================ */
.astra-child-toast-container {
position: fixed;
top: 20px;
right: 20px;
z-index: var(--z-toast);
display: flex;
flex-direction: column;
gap: 10px;
max-width: 400px;
pointer-events: none;
}
.astra-child-toast {
display: flex;
align-items: center;
gap: 12px;
padding: 16px 20px;
background: var(--med-bg);
border-radius: var(--med-radius-sm);
box-shadow: var(--med-shadow-hover);
border-left: 4px solid;
pointer-events: auto;
color: var(--med-text);
border: 1px solid var(--med-border);
}
.astra-child-toast--success {
border-left-color: var(--toast-success);
background: #f1f8e9;
}
.astra-child-toast--error {
border-left-color: var(--toast-error);
background: #ffebee;
}
.astra-child-toast--warning {
border-left-color: var(--toast-warning);
background: #fff3e0;
}
.astra-child-toast--info {
border-left-color: var(--toast-info);
background: #e3f2fd;
}
.toast-icon {
font-size: 1.25rem;
flex-shrink: 0;
}
.toast-message {
flex: 1;
font-size: 0.95rem;
color: var(--med-text);
}
.toast-close {
background: none;
border: none;
font-size: 1.5rem;
color: var(--med-text-muted);
cursor: pointer;
padding: 0;
width: var(--touch-target-min);
height: var(--touch-target-min);
display: flex;
align-items: center;
justify-content: center;
transition: color 0.2s;
border-radius: 4px;
}
.toast-close:hover {
color: var(--med-text);
background: var(--med-bg-light);
}
.toast-close:focus-visible {
outline: 3px solid var(--med-focus);
outline-offset: 2px;
}
@media (max-width: 768px) {
.astra-child-toast-container {
left: 20px;
right: 20px;
max-width: none;
}
}