@import "pizza-theme-colors.css";

/* =========================================
   Reset / layout del toast (sin iconos)
   Compatibles con Syncfusion e-toast
   ========================================= */
.e-toast {
    border-radius: var(--toast-radius);
    padding: var(--toast-padding);
    box-shadow: var(--toast-shadow);
    display: grid;
    grid-template-columns: 1fr auto; /* contenido + botón cerrar */
    grid-auto-rows: auto;
    align-items: center;
    gap: var(--toast-gap);
    font-size: var(--toast-font-size);
    line-height: 1.35;
    color: var(--color-olive-black); /* color por defecto (se sobreescribe por estado) */
    border: 1px solid transparent; /* se define por estado */
}

    /* Contenido (título + mensaje) */
    .e-toast .e-toast-message {
        margin: 0;
    }

    /* Título (si existe) */
    .e-toast .e-toast-title {
        font-weight: 700;
        font-size: var(--toast-title-size);
        margin: 0 0 2px 0;
    }

    /* Cuerpo */
    .e-toast .e-toast-content {
        margin: 0;
    }

    /* Quitar iconos por completo */
    .e-toast .e-toast-icon,
    .e-toast .e-icons,
    .toast-icons {
        display: none !important;
    }

    /* Botón cerrar */
    .e-toast .e-toast-close-icon {
        background: transparent;
        border: 0;
        width: 28px;
        height: 28px;
        line-height: 28px;
        text-align: center;
        border-radius: 8px;
        cursor: pointer;
        opacity: .9;
        transition: transform .12s ease, opacity .12s ease, background-color .12s ease;
    }

        .e-toast .e-toast-close-icon:hover {
            opacity: 1;
            transform: scale(1.07);
            background-color: rgba(255,255,255,.12);
        }

    /* =========================================
   Variantes por estado (fondos intensos)
   ========================================= */

    /* SUCCESS */
    .e-toast.e-success,
    .e-toast.e-toast-success {
        background: var(--color-basil-green) !important;
        border-color: var(--color-basil-green) !important;
        color: #ffffff !important;
    }

        .e-toast.e-success .e-toast-close-icon {
            color: #ffffff !important;
        }

    /* ERROR */
    .e-toast.e-error,
    .e-toast.e-toast-danger,
    .e-toast.e-danger {
        background: var(--color-tomato-red) !important;
        border-color: var(--color-tomato-red) !important;
        color: #ffffff !important;
    }

        .e-toast.e-error .e-toast-close-icon,
        .e-toast.e-danger .e-toast-close-icon {
            color: #ffffff !important;
        }

    /* WARNING */
    .e-toast.e-warning,
    .e-toast.e-toast-warning {
        background: var(--color-cheese-yellow) !important;
        border-color: var(--color-cheese-yellow) !important;
        color: var(--color-olive-black) !important;
    }

        .e-toast.e-warning .e-toast-close-icon {
            color: var(--color-olive-black) !important;
        }

    /* INFO */
    .e-toast.e-info,
    .e-toast.e-toast-info {
        background: var(--color-mushroom-brown) !important;
        border-color: var(--color-mushroom-brown) !important;
        color: #ffffff !important;
    }

        .e-toast.e-info .e-toast-close-icon {
            color: #ffffff !important;
        }

    /* =========================================
   Detalles de accesibilidad / focus
   ========================================= */
    .e-toast:focus-within {
        outline: 2px solid rgba(255,255,255,.45);
        outline-offset: 2px;
    }

    .e-toast .e-toast-close-icon:focus {
        outline: 2px solid rgba(255,255,255,.65);
        outline-offset: 2px;
    }

    /* =========================================
   Tamaños opcionales (por si los usas)
   ========================================= */
    .e-toast.small {
        --toast-padding: 8px 10px;
        --toast-title-size: 14px;
        --toast-font-size: 13px;
    }

    .e-toast.large {
        --toast-padding: 16px 18px;
        --toast-title-size: 16px;
        --toast-font-size: 15px;
    }