body {
    background-color: var(--color-bg-bottom);
    display: flex;
    flex-direction: column;
    container-type: inline-size;

    > main {
        margin-bottom: 8rem;
        min-height: 80vh;
        container-type: inline-size;
    }
}


/* Toast Container */
.toast-container {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    z-index: 200;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-width: min(24rem, calc(100% - 2rem));
}

/* Toast Base */
.toast {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    background-color: white;
    border-radius: 1rem;
    corner-shape: squircle;
    box-shadow: 0 10px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    border-left: 4px solid var(--color-primary);
    transform: translateX(0);
    opacity: 1;
    transition: transform 300ms ease-out, opacity 300ms ease-out;

    /* Slide-in animation */
    animation: toast-slide-in 300ms ease-out;

    &.closed {
        transform: translateX(calc(100% + 2rem));
        opacity: 0;
        pointer-events: none;
    }

    /* Toast Icon */
    .toast-icon {
        flex-shrink: 0;
        font-size: 1.5rem;
        line-height: 1;
    }

    /* Toast Content */
    .toast-content {
        flex: 1;
        min-width: 0;

        .toast-title {
            font-weight: 600;
            font-size: 0.9375rem;
            color: #1f2937;
            margin-bottom: 0.125rem;
        }

        .toast-message {
            font-size: 0.875rem;
            color: #6b7280;
            line-height: 1.4;
        }
    }

    /* Close Button */
    .toast-close {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 1.75rem;
        height: 1.75rem;
        border-radius: 0.5rem;
        corner-shape: squircle;
        color: #9ca3af;
        background: transparent;
        border: none;
        cursor: pointer;
        transition: background-color 150ms ease-out, color 150ms ease-out;

        &:hover {
            background-color: #f3f4f6;
            color: #374151;
        }

        .material-symbols-outlined {
            font-size: 1.25rem;
        }
    }

    /* Toast Variants */
    &.toast-success {
        border-left-color: #22c55e;

        .toast-icon {
            color: #22c55e;
        }
    }

    &.toast-error {
        border-left-color: #ef4444;

        .toast-icon {
            color: #ef4444;
        }
    }

    &.toast-warning {
        border-left-color: #f59e0b;

        .toast-icon {
            color: #f59e0b;
        }
    }

    &.toast-info {
        border-left-color: var(--color-primary);

        .toast-icon {
            color: var(--color-primary);
        }
    }
}

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

hgroup {
    p {
        color: var(--color-text-muted);
        font-size: 1.2rem;
    }
}