/* ===============================
   DS TOAST – Design System Component
   =============================== */

/* Container (layout only) */
.ds-toast-container {
    position: fixed;
    inset-block-start: var(--ds-size-8);
    inset-inline-end: var(--ds-size-8);
    display: flex;
    flex-direction: column;
    gap: var(--ds-size-4);
    z-index: 1000;
    pointer-events: none;
}

/* Component root */
.ds-toast {
    --dsc-toast-background: var(--ds-color-info-surface-tinted);
    --dsc-toast-border-width: var(--ds-border-width-default);
    --dsc-toast-border-style: solid;
    --dsc-toast-border-color: var(--ds-color-info-border-default);
    --dsc-toast-border-radius: var(--ds-border-radius-md);
    --dsc-toast-color: var(--ds-color-info-text-default);
    --dsc-toast-shadow: var(--ds-shadow-lg, 0 8px 24px rgba(0, 0, 0, 0.2));
    --dsc-toast-padding-block: var(--ds-size-4);
    --dsc-toast-padding-inline: var(--ds-size-6);
    --dsc-toast-gap: var(--ds-size-4);
    --dsc-toast-motion-duration: var(--ds-motion-duration-moderate, 200ms);
    --dsc-toast-motion-easing: var(--ds-motion-easing-standard, ease);
    --dsc-toast-icon-url: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M3.25 4A.75.75 0 0 1 4 3.25h16a.75.75 0 0 1 .75.75v16a.75.75 0 0 1-.75.75H4a.75.75 0 0 1-.75-.75zM11 7.75a1 1 0 1 1 2 0 1 1 0 0 1-2 0m-1.25 3a.75.75 0 0 1 .75-.75H12a.75.75 0 0 1 .75.75v4.75h.75a.75.75 0 0 1 0 1.5h-3a.75.75 0 0 1 0-1.5h.75v-4h-.75a.75.75 0 0 1-.75-.75'/%3E%3C/svg%3E");
    --dsc-toast-icon-color: var(--ds-color-info-text-subtle);
    --dsc-toast-icon-size: var(--ds-size-7);
    pointer-events: auto;
    background: var(--dsc-toast-background);
    border: var(--dsc-toast-border-width) var(--dsc-toast-border-style) var(--dsc-toast-border-color);
    border-radius: var(--dsc-toast-border-radius);
    color: var(--dsc-toast-color);
    box-shadow: var(--dsc-toast-shadow);
    padding-block: var(--dsc-toast-padding-block);
    padding-inline: var(--dsc-toast-padding-inline);
    box-sizing: border-box;
    max-inline-size: 28rem;
    display: flex;
    align-items: center;
    gap: var(--dsc-toast-gap);
    opacity: 0;
    translate: 0 -0.5rem;
    transition: opacity var(--dsc-toast-motion-duration) var(--dsc-toast-motion-easing), translate var(--dsc-toast-motion-duration) var(--dsc-toast-motion-easing);
}

    /* Visible state */
    .ds-toast[data-state="open"] {
        opacity: 1;
        translate: 0 0;
    }

    /* Exit state */
    .ds-toast[data-state="closing"] {
        opacity: 0;
        translate: 0 -0.5rem;
    }

    /* Icon (similar to alert) */
    .ds-toast::before {
        background: var(--dsc-toast-icon-color);
        content: "";
        height: var(--dsc-toast-icon-size);
        width: var(--dsc-toast-icon-size);
        mask: var(--dsc-toast-icon-url) center / contain no-repeat;
        -webkit-mask: var(--dsc-toast-icon-url) center / contain no-repeat;
        flex-shrink: 0;
    }

/* Content */
.ds-toast__content {
    flex: 1;
}

/* Close button */
.ds-toast__close {
    appearance: none;
    border: none;
    background: none;
    cursor: pointer;
    color: var(--ds-color-accent-text-subtle);
    width: var(--ds-sizing-6, 24px);
    height: var(--ds-sizing-6, 24px);
    display: flex;
    align-items: center;
    justify-content: center;
    mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.53033 5.46967C6.23744 5.17678 5.76256 5.17678 5.46967 5.46967C5.17678 5.76256 5.17678 6.23744 5.46967 6.53033L10.9393 12L5.46967 17.4697C5.17678 17.7626 5.17678 18.2374 5.46967 18.5303C5.76256 18.8232 6.23744 18.8232 6.53033 18.5303L12 13.0607L17.4697 18.5303C17.7626 18.8232 18.2374 18.8232 18.5303 18.5303C18.8232 18.2374 18.8232 17.7626 18.5303 17.4697L13.0607 12L18.5303 6.53033C18.8232 6.23744 18.8232 5.76256 18.5303 5.46967C18.2374 5.17678 17.7626 5.17678 17.4697 5.46967L12 10.9393L6.53033 5.46967Z'/%3E%3C/svg%3E") center / contain no-repeat;
    -webkit-mask: same;
    background-color: currentColor;
}

/* Variants */
.ds-toast[data-color] {
    --dsc-toast-background: var(--ds-color-surface-tinted);
    --dsc-toast-border-color: var(--ds-color-border-default);
    --dsc-toast-icon-color: var(--ds-color-text-subtle);
    --dsc-toast-color: var(--ds-color-text-default)
}

.ds-toast[data-color="success"] {
    --dsc-toast-icon-url: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 21.75a9.75 9.75 0 1 0 0-19.5 9.75 9.75 0 0 0 0 19.5m4.95-12.47a.81.81 0 0 0-1.24-1.05l-5.39 6.36-2.62-2.62a.81.81 0 0 0-1.15 1.15l3.25 3.25a.81.81 0 0 0 1.2-.05z'/%3E%3C/svg%3E")
}

.ds-toast[data-color="warning"] {
    --dsc-toast-icon-url: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 2.25a.75.75 0 0 1 .66.39l9.52 17.25a.75.75 0 0 1-.65 1.11H2.47a.75.75 0 0 1-.65-1.11l9.52-17.25a.75.75 0 0 1 .66-.39m0 6.5a.75.75 0 0 1 .75.75v4a.75.75 0 0 1-1.5 0v-4a.75.75 0 0 1 .75-.75m-1 7.75a1 1 0 1 1 2 0 1 1 0 0 1-2 0'/%3E%3C/svg%3E")
}

.ds-toast[data-color="danger"] {
    --dsc-toast-icon-url: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M7.74 2.47a.75.75 0 0 1 .53-.22h7.46a.75.75 0 0 1 .53.22l5.27 5.27c.14.14.22.33.22.53v7.46a.75.75 0 0 1-.22.53l-5.27 5.27a.75.75 0 0 1-.53.22H8.27a.75.75 0 0 1-.53-.22l-5.27-5.27a.75.75 0 0 1-.22-.53V8.27a.75.75 0 0 1 .22-.53zm1.29 5.5a.75.75 0 0 0-1.06 1.06L10.94 12l-2.97 2.97a.75.75 0 1 0 1.06 1.06L12 13.06l2.97 2.97a.75.75 0 1 0 1.06-1.06L13.06 12l2.97-2.97a.75.75 0 0 0-1.06-1.06L12 10.94z'/%3E%3C/svg%3E")
}

/* Exit animation state */
.ds-toast[data-state="closing"] {
    opacity: 0;
    translate: 0 -0.5rem;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .ds-toast {
        transition: none;
    }
}