@import url('https://fonts.googleapis.com/css2?family=Varela+Round&display=swap');

.toast-item{
    font-family: "Varela Round",
    sans-serif;
    position: relative;
}

.toast{
    background: #000000;
    color:#000000;
    border: 0.15rem solid #fff2;
    padding: 1.2rem;
    text-align: center;
    border-radius: 1rem;
    font-weight: 300;
    text-align: left;
    max-width: 16rem;
    box-shadow: 0 0 1.5rem 0 #1a1f4360;
    position: relative;
    --bg:#03a65a;
}

.toast:before{
    content:"";
    position:absolute;
    background: var(--bg);
    width: 0.5rem;
    height: calc(100%-1.5rem);
    top:0.75rem;
    left:0.5rem;
    border-radius: 1rem;
}

h7 {
    color:var(--bg);
    font-size: 1.2rem;
    margin:0 0 0 0.5rem;
    line-height: 1.35rem;
    font-weight: 600;
    position: relative;
}

p {
    color:#595959;
    font-size: 0.95rem;
    margin:0 0 0 0.5rem;
    line-height: 1.3rem;
}

.toast.warning{
    --bg:#fc8621;
}

.toast.error{
    --bg:#db3056;
}