@keyframes show-toast {
    0% {opacity: 0;}
    100% {opacity: 1;}
}
@keyframes hide-toast {
    0% {opacity: 1;}
    100% {opacity: 0;}
}
.ToastCollection{
    display: grid;
    grid-auto-flow: row;
    gap: 1rem;
    position: fixed;
    bottom: 90px;
    right: 24px;
    margin-left: 24px;
    z-index: 99999999;
    @media(width < 1380px){
        bottom: 110px;
    }
}
[data-toastplaceholder]{
    display:none;
}
.Toast{
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1);
    border-radius: var(--borderRadiusStandardBox);
    background-color: var(--colorWhite);
    color: var(--colorText);
    opacity: 1;
    animation: show-toast 1s;
    @media(width < 1380px){
        font-size: var(--fontSizeSubStandard);
    }
    & .Toast-container{
        padding: 1.5rem;
        max-width: 550px;
        @media(width < 1380px){
            padding: 1.3rem;
        }
        & .Toast-containerWrapper{
            display: grid;
            position: relative;
            grid-template-areas: "icon content close";
            grid-template-columns: auto 1fr auto;
            gap: 1rem;
            place-items: baseline;
            & .Toast-icon{
                grid-area: icon;
                font-size: var(--fontSizeFourthBiggest);
                & .Toast-iconContainer{
                    & .Toast-iconContainerGraphic{

                    }
                }
            }
            & .Toast-content{
                grid-area: content;
                & .Toast-contentContainer{
                    display: table;
                    table-layout: fixed;
                    width: 100%;
                    & .Toast-contentContainerHeadline{
                        margin: 0;
                        font-size: var(--fontSizeThirdBiggest);
                        @media(width < 1380px){
                            font-size: var(--fontSizeFourthBiggest);
                        }
                    }
                    & .Toast-contentContainerText{
                        margin: 0;
                        padding-top: 0.5rem;
                        padding-right: 0.5rem;
                        max-height: 20vh;
                        overflow: auto;
                    }
                }
            }
            & .Toast-close{
                grid-area: close;
                display: grid;
                place-self: center end;
                cursor: pointer;
                & .Toast-closeContainer{
                    & .Toast-closeContainerGraphic{
                        font-size: var(--fontSizeThirdBiggest);
                        padding: 0.2rem;
                        color: var(--colorTextPale);
                    }
                }
            }
        }
    }
    /* states */
    &.is-hiding{
        opacity: 0;
        animation: hide-toast 1s;
    }
    /* /states */
    /* modifiers */
    &.Toast--customer{

    }
    &.Toast--success{
        & .Toast-icon{
            & .Toast-iconContainer{
                & .Toast-iconContainerGraphic{
                    color: var(--colorSuccess);
                }
            }
        }
    }
    &.Toast--warning{
        & .Toast-icon{
            & .Toast-iconContainer{
                & .Toast-iconContainerGraphic{
                    color: var(--colorWarning);
                }
            }
        }
    }
    &.Toast--error{
        & .Toast-icon{
            & .Toast-iconContainer{
                & .Toast-iconContainerGraphic{
                    color: var(--colorDanger);
                }
            }
        }
    }
    &.Toast--info{
        & .Toast-icon{
            & .Toast-iconContainer{
                & .Toast-iconContainerGraphic{
                    color: var(--colorInfo);
                }
            }
        }
    }
    /* /modifiers */
}