.e-toast.e-toast-container.e-toast-top-right {
    right: 1rem;
    top: 5rem;
}

.e-toast-container .e-toast.oc-toast{
    border-radius: 8px;
    padding: 0.75rem;
    padding-right: 2.5rem;
    box-shadow: 0 4px 6px 0 rgba(102, 106, 107, 0.25);
    
    &:hover {
        box-shadow: 0 2px 6px 0 rgba(102, 106, 107, 0.25);
    }
    
    .e-toast-title { /* font body bold */
        font-size: 1rem;
        font-weight: 600;
        line-height: 1.5;
    }
    
    .e-toast-content { /* font subtext regular */
        font-size: 0.8125rem; /* 13px */
        letter-spacing: 0.02em;
        font-weight: 400;
        line-height: 1.5;
    }

    &::before {
        position: absolute;
        left: 0.75rem;
        top: 0.75rem;
    }

    .e-toast-title,
    .e-toast-content {
        color: var(--clr-blk, #112333);
        margin-left: 2rem;
    }

    &.oc-toast-warn {
        background-color: var(--clr-warn50, #fef2ec);
        &::before { content: var(--svg-warn-symbol-big); }

        .e-toast-progress { background-color: var(--clr-warn300, #f77845); }

        .e-toast-title,
        .e-toast-content{ color: var(--clr-warn500, #97492a); }
        .e-toast-close-icon::before { content: var(--svg-warn-toast-close); }
    }
    &.oc-toast-error {
        background-color: var(--clr-err50, #fbecec);
        &::before {
            margin-top: 0.25rem;
            content: var(--svg-error-symbol-big);
        }

        .e-toast-progress { background-color: var(--clr-err-bld, #d44040); }

        .e-toast-title,
        .e-toast-content{ color: var(--clr-err-deep, #812626) }
        
        .e-toast-close-icon::before { content: var(--svg-error-toast-close); }
    }
    &.oc-toast-success {
        background-color: var(--clr-success50, #eef3ea);
        &::before { content: var(--svg-success-toast); }

        .e-toast-progress { background-color: var(--clr-success300, #51822c); }

        .e-toast-title,
        .e-toast-content { color: var(--clr-success500, #314f1b); }
        .e-toast-close-icon::before { content: var(--svg-success-toast-close); }
    }

    .e-toast-close-icon {
        position: absolute;
        right: 0.75rem;
        top: 50%;
        padding: 0;
        transform: translateY(-50%);
        width: 1rem;
        height: 1rem;
        
        &:hover { opacity: 80%; }

        &::before {
            width: 1rem;
            height: 1rem;
        }
    }

    .e-toast.oc-toast:not(.oc-toast-warn, .oc-toast-error, .oc-toast-success) .e-toast-close-icon::before {
        content: var(--svg-toast-close);
    }
}