@import '/theme/procademy/vendor/@syncfusion/ej2-base/styles/material.css';
@import '/theme/procademy/vendor/@syncfusion/ej2-notifications/styles/material.css';

/* common */

.e-toast-container.proc-toast {
    z-index: 2147483002 !important;
}

.e-toast-container .e-toast.proc-toast {
    @apply rounded-md p-4;
    border-radius: 0.375rem;
    padding: 16px;
}

.e-toast-container .e-toast.proc-toast .e-toast-message .e-toast-title {
    @apply text-sm font-semibold pb-2;
    font-size: 14px;
    font-weight: 600;
    padding-bottom: 8px;
}
.e-toast-container .e-toast.proc-toast .e-toast-message .e-toast-title:empty {
    @apply pb-0;
    padding: 0;
}

.e-toast-container .e-toast.proc-toast .e-toast-message .e-toast-content {
    @apply text-sm pt-0;
    font-size: 14px;
    padding-top: 0;
}

.e-toast-container .e-toast.proc-toast .e-toast-icon {
    @apply text-xl -mt-0.5;
    font-size: 1.25rem; /* 20px */
    line-height: 1.75rem; /* 28px */
    margin-top: -2px;
}

/* success */
.e-toast-container .e-toast.success {
    @apply bg-slate-800;
}


.e-toast-container .e-toast.success .e-toast-message .e-toast-title {
    @apply text-slate-100
}

.e-toast-container .e-toast.success .e-toast-message .e-toast-content
{
    @apply text-slate-200
}
.e-toast-container .e-toast-close-icon {
    @apply text-slate-400;
}

.e-toast-container .e-toast.success .e-toast-icon {
    @apply text-green-600;
    color: rgb(5 150 105);
}


/* info */
.e-toast-container .e-toast.info {
    @apply bg-blue-50;
    background-color: rgb(239 246 255);
}

.e-toast-container .e-toast.info .e-toast-message .e-toast-title,
.e-toast-container .e-toast.info .e-toast-message .e-toast-content,
.e-toast-container .e-toast.info .e-toast-icon,
.e-toast-container .e-toast.info .e-toast-close-icon{
    @apply text-blue-600;
    color: rgb(37 99 235);
}

/* error */
.e-toast-container .e-toast.error {
    @apply bg-rose-50;
    background-color: rgb(255 241 242);
}

.e-toast-container .e-toast.error .e-toast-message .e-toast-title,
.e-toast-container .e-toast.error .e-toast-message .e-toast-content,
.e-toast-container .e-toast.error .e-toast-icon,
.e-toast-container .e-toast.error .e-toast-close-icon {
    @apply text-rose-600;
    color: rgb(225 29 72);
}

/* warning */
.e-toast-container .e-toast.warning {
    @apply bg-orange-50;
    background-color: rgb(255 247 237);
}

.e-toast-container .e-toast.warning .e-toast-message .e-toast-title,
.e-toast-container .e-toast.warning .e-toast-message .e-toast-content,
.e-toast-container .e-toast.warning .e-toast-icon,
.e-toast-container .e-toast.warning .e-toast-close-icon {
    @apply text-orange-600;
    color: rgb(234 88 12);
}

/*release toast*/
.e-toast-container.release-toast.e-toast .e-toast-actions .e-btn {
    @apply bg-white hover:bg-blue-700 hover:text-white normal-case m-0 text-gray-700 !important;
    border-radius: var(--proc-border-radius);
}

.e-toast-container > .release-toast {
    background-image: url('../../img/confetti.svg');
    background-position: center;
    background-size: cover;
    @apply relative;
}

.e-toast-container > .release-toast::before {
    content: '';
    background-color: black;
    opacity: 0.5;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.e-toast-container.release-toast .e-toast-icon.e-icons.icons8-info,
.e-toast-container.release-toast .e-toast-message,
.e-toast-container.release-toast .e-toast-close-icon.e-icons {
    @apply relative;
    @apply z-10;
}

.e-toast-container.release-toast.e-toast .e-toast-message .e-toast-actions {
    @apply p-0 text-left;
}
.e-toast-container.release-toast.e-toast .e-toast-message .e-toast-content {
    @apply pt-4 pb-6;
}