#toast-container {
    padding-inline: 15px;
    z-index: 9;

    &.toast-bottom-center,
    &.toast-top-center {
        >div {
            margin-top: calc(15px + (21 - 15) * ((100vw - 320px) / (1920 - 320)));
            opacity: 1;
            box-shadow: unset;
            border-radius: 5px;
            padding: calc(9px + (14 - 9) * ((100vw - 320px) / (1920 - 320))) calc(15px + (24 - 15) * ((100vw - 320px) / (1920 - 320)));
            background: none !important;
            position: relative;
            background-color: $white;
            width: max-content;

            &::before {
                @include pos;
                @include center(vertical);
                left: 0;
                width: 3px;
                border-radius: 0 3px 3px 0;
                height: calc(100% - 12px);

                [dir="rtl"] & {
                    left: unset;
                    right: 0;
                    border-radius: 3px 0 0 3px;
                }
            }

            &::after {
                content: "";
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background-color: $white;
                z-index: -1;

                [dir="rtl"] & {
                    left: unset;
                    right: 0;
                }
            }
        }
    }

    >.toast-success {
        &::before {
            background-color: var(--primary-color);
        }
    }

    .toast-message {
        font-size: calc(16px + (18 - 16) * ((100vw - 320px) / (1920 - 320)));
        font-weight: 600;
        line-height: 1.3;
        display: flex;
        align-items: center;
        gap: calc(8px + (14 - 8) * ((100vw - 320px) / (1920 - 320)));
        color: $success-color;

        svg {
            fill: none;
            width: calc(22px + (24 - 22) * ((100vw - 320px) / (1920 - 320)));
            height: calc(14px + (17 - 14) * ((100vw - 320px) / (1920 - 320)));
            stroke-width: 3px;
        }
    }

    .toast-success {
        background-color: rgba(52, 119, 196, 0.051);
        border: 2px solid var(--primary-color);

        .toast-message {
            color: var(--primary-color);

            svg {
                stroke: var(--primary-color);
            }
        }
    }

    .toast-error {
        background-color: rgba(228, 62, 62, 0.051);
        border: 2px solid #e43e3e;
        background-image: url(../images/svg/error.svg) !important;

        &::before {
            background-color: #e43e3e;
        }

        .toast-message {
            color: #e43e3e;
        }
    }

    .toast-info {
        background-color: rgba(25, 153, 179, 0.05);
        border: 2px solid #1999b3;
        background-image: url(../images/svg/info.svg) !important;

        &::before {
            background-color: #1999b3;
        }

        .toast-message {
            color: #1999b3;
        }
    }

    .toast-warning {
        background-color: rgba(227, 158, 8, 0.051);
        border: 2px solid #e39f08;
        background-image: url(../images/svg/warning.svg) !important;

        &::before {
            background-color: #e39f08;
        }

        .toast-message {
            color: #e39f08;
        }
    }
}