$alert-colors: error, warning, success, info;

@keyframes toast-enter-screen {
    from {
        transform: translateX(100%);
    }

    to {
        transform: translateX(0);
    }
}

@keyframes toast-exit-screen {
    from {
        opacity: 1;
        transform: translateX(0);
    }

    to {
        opacity: 0;
        transform: translateX(100%);
    }
}

.Toast {
    --alert-warning: var(--warning-600, #eb8100);
    --alert-info: var(--info-550, #067df4);
    --alert-error: var(--error-500, #ee3b2b);
    --alert-success: var(--success-600, #49a22f);

    margin-top: 15px;

    @each $color in $alert-colors {
        &-#{$color} {
            .Toast-line {
                background-color: var(--alert-#{$color}) !important;
            }

            .Toast-indicator {
                color: var(--alert-#{$color});
            }
        }
    }

    &-body {
        padding: var(--padding-medium-small, 8px);
        display: flex;
        align-items: center;
        background-color: var(--sidenav-background);
        border-radius: 8px;
        color: var(--white);
    }

    &-content {
        display: flex;
        gap: var(--padding-medium-large, 12px);
        width: 100%;
        height: 100%;
        min-height: 32px;
        align-items: center;
    }

    &-line {
        width: 4px;
        align-self: stretch;
        border-radius: 2px;
    }

    &-message {
        display: flex;
        align-items: center;
        width: 100%;
        font-size: 14px;
        margin-right: 15px;

        a {
            padding-top: var(--padding-small, 4px);
            color: var(--toasts-semantics-hyperlink-default, #7cb5de);
        }
    }

    &-begin-animation {
        animation: toast-enter-screen 0.7s;
        transition: transform 0.6s ease-in-out;
    }

    &-end-animation {
        animation: toast-exit-screen 0.7s;
        opacity: 0;
        transition: transform 0.6s ease-in;
    }

    &-close {
        align-self: flex-start;

        &.btn {
            color: var(--gray-300);

            &:hover:not(:active):not(:disabled) {
                color: var(--gray-100);
            }
        }
    }
}

.ToastContainer {
    max-width: 330px;
    width: 100%;
    bottom: 70px;
    position: fixed;
    right: 20px;
    z-index: 1080;
}

@supports selector([popover]) {
    /* stylelint-disable selector-pseudo-class-no-unknown */
    .ToastContainer:popover-open {
        top: auto;
        left: auto;
        padding: 0;
        margin: 0;
        background: transparent;
        border: none;
        overflow: hidden;
    }
}