:root {
    --toast-height: 36px;
    --toast-hide-state: -56px;
    --toast-popup-state: 10px;
}
.toast {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: var(--toast-hide-state);
    display: flex;
    width: 344px;
    height: var(--toast-height);
    padding: 10px 0px 10px 16px;
    align-items: center;
    flex-shrink: 0;
    border-radius: 4px;
    background: var(--inverse-surface);
    /* box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.30), 0px 4px 8px 3px rgba(0, 0, 0, 0.15); */
    transition: bottom .5s 0s;
}
.toast-popup {
    bottom: var(--toast-popup-state);
}
.text-toast {
    flex: 1 0 0;
    color: var(--inverse-on-surface);
    font-family: Roboto;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0.25px;
}
.svg-toast {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;border-radius: 100px;
}
.toast-icon {
    display: flex;
    padding: 8px;
    justify-content: center;
    align-items: center;
    gap: 10px
}
.toast-error-icon svg {
    fill: var(--error);
}
.toast-error-container {
    background: var(--error-container);
}
.toast-error-text {
    color: var(--on-error-container);
}