/**
 * Toast Styles - Production Ready
 * Customized for your app theme with dynamic borders and shadows
 */

/* Toast Variables - Set once, use everywhere */
:root {
    --toast-shadow-offset: 0.5rem;
    --toast-glow-size: 0.2rem;
}

/* Base toast styles */
.toast {
    --toast-border-width: 1px;
    max-width: 350px;
    font-size: 0.875rem;
    background-color: var(--white);
    border-radius: var(--half-radius);
    margin-bottom: 1rem;
    overflow: hidden; /* Ensures content doesn't overflow rounded corners */
    border: var(--toast-border-width) solid var(--primary-color);
    /* Base drop shadow */
    box-shadow: var(--toast-shadow-offset) var(--toast-shadow-offset) 0 rgba(0, 0, 0, 0.5);
}

/* Toast header */
.toast .toast-header {
    padding: 0.5rem 0.75rem;
    border-bottom: none;
    border-top-left-radius: calc(var(--half-radius) - var(--toast-border-width));
    border-top-right-radius: calc(var(--half-radius) - var(--toast-border-width));
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Toast body */
.toast .toast-body {
    padding: 0.75rem;
    line-height: 1.5;
    border-bottom-left-radius: calc(var(--half-radius) - var(--toast-border-width));
    border-bottom-right-radius: calc(var(--half-radius) - var(--toast-border-width));
}

/* Success variant */
.toast-success {
    --toast-border-width: 2px;
    border-color: var(--md-green-400);
    box-shadow:
        0 0 0 var(--toast-glow-size) var(--success-color-rgba-50),
        var(--toast-shadow-offset) var(--toast-shadow-offset) 0 rgba(0, 0, 0, 0.3);
}

.toast-success .toast-header {
    background-color: var(--md-green-100);
    color: var(--md-green-800);
}

.toast-success .toast-body {
    background-color: var(--md-green-50);
}

/* Danger/Error variant */
.toast-danger {
    --toast-border-width: 2px;
    border-color: var(--md-red-400);
    box-shadow:
        0 0 0 var(--toast-glow-size) var(--danger-color-rgba-50),
        var(--toast-shadow-offset) var(--toast-shadow-offset) 0 rgba(0, 0, 0, 0.3);
}

.toast-danger .toast-header {
    background-color: var(--md-red-100);
    color: var(--md-red-800);
}

.toast-danger .toast-body {
    background-color: var(--md-red-50);
}

/* Info variant */
.toast-info {
    --toast-border-width: 2px;
    border-color: var(--md-blue-400);
    box-shadow:
        0 0 0 var(--toast-glow-size) rgba(66, 165, 245, 0.5),
        var(--toast-shadow-offset) var(--toast-shadow-offset) 0 rgba(0, 0, 0, 0.3);
}

.toast-info .toast-header {
    background-color: var(--md-blue-100);
    color: var(--md-blue-800);
}

.toast-info .toast-body {
    background-color: var(--md-blue-50);
}

/* Warning variant */
.toast-warning {
    --toast-border-width: 2px;
    border-color: var(--md-orange-400);
    box-shadow:
        0 0 0 var(--toast-glow-size) rgba(255, 167, 38, 0.5),
        var(--toast-shadow-offset) var(--toast-shadow-offset) 0 rgba(0, 0, 0, 0.3);
}

.toast-warning .toast-header {
    background-color: var(--md-orange-100);
    color: var(--md-orange-800);
}

.toast-warning .toast-body {
    background-color: var(--md-orange-50);
}

/* Primary variant (uses your yellow primary color) */
.toast-primary {
    --toast-border-width: 2px;
    border-color: var(--primary-color);
    box-shadow:
        0 0 0 var(--toast-glow-size) var(--primary-color-rgba-50),
        var(--toast-shadow-offset) var(--toast-shadow-offset) 0 rgba(0, 0, 0, 0.3);
}

.toast-primary .toast-header {
    background-color: var(--md-yellow-50);
    color: var(--md-yellow-800);
}

.toast-primary .toast-body {
    background-color: var(--md-yellow-50);
}

/* Secondary variant (deep orange) */
.toast-secondary {
    --toast-border-width: 2px;
    border-color: var(--secondary-color);
    box-shadow:
        0 0 0 var(--toast-glow-size) var(--secondary-color-rgba-50),
        var(--toast-shadow-offset) var(--toast-shadow-offset) 0 rgba(0, 0, 0, 0.3);
}

.toast-secondary .toast-header {
    background-color: var(--md-deep-orange-50);
    color: var(--md-deep-orange-800);
}

.toast-secondary .toast-body {
    background-color: var(--md-deep-orange-50);
}

/* Close button styling */
.toast .btn-close {
    padding: 0.5rem;
    margin: -0.5rem -0.5rem -0.5rem 0.5rem;
}

/* Style close button for each variant */
.toast-success .btn-close,
.toast-danger .btn-close,
.toast-primary .btn-close,
.toast-secondary .btn-close {
    filter: brightness(0.7); /* Darken close button for visibility */
}

/* Toast animations */
.toast.showing {
    opacity: 0;
}

.toast.show {
    opacity: 1;
    transition: opacity 0.25s ease-in-out;
}

.toast.hide {
    opacity: 0;
    transition: opacity 0.25s ease-out;
}

/* Toast container positions */
.toast-container {
    z-index: 1060;
    position: fixed;
    padding: 1rem;
}

.toast-container.top-0.end-0 {
    top: 1rem;
    right: 1rem;
}

.toast-container.top-0.start-50 {
    top: 1rem;
    left: 50%;
    transform: translateX(-50%);
}

.toast-container.bottom-0.end-0 {
    bottom: 1rem;
    right: 1rem;
}

.toast-container.bottom-0.start-50 {
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
}

/* Entry animation for toasts */
@keyframes toast-in-right {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes toast-in-left {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes toast-in-up {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes toast-in-down {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Apply animations based on container position */
.toast-container.top-0.end-0 .toast,
.toast-container.bottom-0.end-0 .toast {
    animation: toast-in-right 0.3s ease-in-out;
}

.toast-container.top-0.start-0 .toast,
.toast-container.bottom-0.start-0 .toast {
    animation: toast-in-left 0.3s ease-in-out;
}

.toast-container.top-0.start-50 .toast {
    animation: toast-in-down 0.3s ease-in-out;
}

.toast-container.bottom-0.start-50 .toast {
    animation: toast-in-up 0.3s ease-in-out;
}

/* Focus styling */
.toast .btn-close:focus {
    box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.1);
    opacity: 0.9;
    outline: none;
}