[data-toast="container"] {
    position: fixed;
    bottom: 10%;
    right: 30px;
    z-index: 1;
}

[data-toast="wrapper"] {

    z-index: 1;
    background-color: var(--color1);
    color: var(--color3);
    overflow: hidden;
    border-radius: 7px;
    margin: 10px 0;
    box-shadow: 5px 5px 5px #0000001d;
    border: 1px solid var(--color2);

    & [data-toast="content"] {
        position: relative;
        padding: 10px;
    }

    & [data-toast="timer"] {
        width: 100%;
        background-color: var(--color3);
        height: 3px;
        position: absolute;
        top: 0;
        left: 0;
        transition: width 100ms;
    }
}