:root {
    --rt-toast-radius: var(--rt-layout-radius);

    --rt-toast-success-bg: #e8f5e9;
    --rt-toast-success-border: #a5d6a7;
    --rt-toast-success-color: #1b5e20;

    --rt-toast-info-bg: #e5f2ff;
    --rt-toast-info-border: #a6d1ff;
    --rt-toast-info-color: #003d7a;

    --rt-toast-warning-bg: #fff8e1;
    --rt-toast-warning-border: #ffd54f;
    --rt-toast-warning-color: #7f5f01;

    --rt-toast-error-bg: #ffebee;
    --rt-toast-error-border: #ef9a9a;
    --rt-toast-error-color: #b71c1c;
}

#toast-overlay {
    position: fixed;
    top: calc(54px + 15px);
    right: 50%;
    transform: translateX(50%);
    max-width: var(--rt-content-size);
    width: calc(100% - 10px);
    z-index: var(--rt-z-toast);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.toast {
    display: flex;
    padding: 10px 15px;
    border: 1px solid;
    border-radius: var(--rt-toast-radius);
    animation: toast-appear 0.4s steps(4) forwards;
}

.toast.fade-out {
    animation: toast-disappear 0.4s steps(4) forwards;
}

@keyframes toast-appear {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes toast-disappear {
    from { opacity: 1; }
    to { opacity: 0; }
}

.toast__button {
    cursor: pointer;
    background: none;
    border: none;
    font-size: 18px;
    margin-left: auto;
    margin-bottom: auto;
    line-height: 1rem;
}

.toast__icon {
    width: 20px;
    height: 20px;
}

.toast__message {
    margin-left: 5px;
    font-size: 16px;
}

.toast--success {
    background: var(--rt-toast-success-bg);
    border-color: var(--rt-toast-success-border);
    color: var(--rt-toast-success-color);
}

.toast--info {
    background: var(--rt-toast-info-bg);
    border-color: var(--rt-toast-info-border);
    color: var(--rt-toast-info-color);
}

.toast--warning {
    background: var(--rt-toast-warning-bg);
    border-color: var(--rt-toast-warning-border);
    color: var(--rt-toast-warning-color);
}

.toast--error {
    background: var(--rt-toast-error-bg);
    border-color: var(--rt-toast-error-border);
    color: var(--rt-toast-error-color);
}