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

:root {
    --tr: all 0.5s ease 0s;
    --ch1: #05478a;
    --ch2: #0070e0;
    --ch3: #0070e040;
    --cs1: #005e38;
    --cs2: #03a65a;
    --cs3: #03a65a40;
    --cw1: #c24914;
    --cw2: #fc8621;
    --cw3: #fc862140;
    --ce1: #851d41;
    --ce2: #db3056;
    --ce3: #db305640;
}

@property --bg-help {
    syntax: '<percentage>';
    inherits: false;
    initial-value: -10%;
}

@property --bg-success {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 145%;
}

@property --bg-warning {
    syntax: '<percentage>';
    inherits: false;
    initial-value: -55%;
}

@property --bg-error {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 112%;
}

@property --bsc {
    syntax: '<color>';
    inherits: false;
    initial-value: red;
}

.toast-item {
    overflow: hidden;
    max-height: 25rem;
    transition: var(--tr);
    position: relative;
    animation: show-toast 1s ease 0s 1;
}

@keyframes show-toast {
    0% {
        max-height: 0;
        opacity: 0;
    }

    25% {
        max-height: 15rem;
        opacity: 1;
    }
}

.toast {
    background: linear-gradient(90deg, #1f2333, #22232b);
    color: #f5f5f5;
    padding: 1rem 2rem 1rem 6rem;
    text-align: center;
    border-radius: 0.25rem;
    position: relative;
    font-weight: 300;
    margin: 1rem 0;
    text-align: left;
    max-width: 20rem;
    transition: var(--tr);
    opacity: 1;
    border: 0.15rem solid #fff2;
    box-shadow: inset 0 0 0.5rem 0 #1d1e26;
    min-height: 60px;
}

    .toast:before {
        content: "";
        position: absolute;
        width: 6.5rem;
        height: 6.15rem;
        bottom: -0.15rem;
        left: -0.15rem;
        z-index: 0;
        border-radius: 0.35rem;
        background: radial-gradient(circle at 0% 50%, var(--clr), #fff0 5rem), radial-gradient(circle at -50% 50%, var(--bg), #fff0 5rem);
        opacity: 0.5;
    }

    .toast:after {
        content: "";
        position: absolute;
        width: 3.5rem;
        height: 3.5rem;
        background: radial-gradient(circle at 50% 50%, var(--clr) 1.25rem, var(--brd) calc(1.25rem + 1px) 100%);
        top: 1.2rem;
        left: 1rem;
        border-radius: 3rem;
        padding-top: 0.2rem;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.75rem;
        box-sizing: border-box;
    }

    .toast h3 {
        font-size: 1.35rem;
        margin: 0;
        line-height: 1.35rem;
        font-weight: 300;
        position: relative;
    }

    .toast p {
        position: relative;
        font-size: 0.95rem;
        z-index: 1;
        margin: 0.25rem 0 0;
    }

.close {
    position: absolute;
    width: 1.35rem;
    height: 1.35rem;
    text-align: center;
    right: 1rem;
    cursor: pointer;
    border-radius: 35%;
}

    .close:after {
        position: absolute;
        font-family: 'Varela Round', san-serif;
        width: 100%;
        height: 100%;
        left: 0;
        font-size: 1.8rem;
        content: "+";
        transform: rotate(45deg);
        border-radius: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .close:hover {
        background: var(--clr);
        color: #22232c;
    }





.toast.help {
    --bg: var(--ch1);
    --clr: var(--ch2);
    --brd: var(--ch3);
}

    .toast.help:after,
    .icon-help:after {
        content: "?";
    }

.toast.success {
    --bg: var(--cs1);
    --clr: var(--cs2);
    --brd: var(--cs3);
}

    .toast.success:after,
    .icon-success:after {
        content: "L";
        font-size: 1.5rem;
        font-weight: bold;
        padding-bottom: 0.35rem;
        transform: rotateY(180deg) rotate(-38deg);
        text-indent: 0.1rem;
    }

.toast.warning {
    --bg: var(--cw1);
    --clr: var(--cw2);
    --brd: var(--cw3);
}

    .toast.warning:after,
    .icon-warning:after {
        content: "!";
        font-weight: bold;
    }

.toast.error {
    --bg: var(--ce1);
    --clr: var(--ce2);
    --brd: var(--ce3);
}

    .toast.error:after,
    .icon-error:after {
        content: "+";
        font-size: 2.85rem;
        line-height: 1.2rem;
        transform: rotate(45deg);
    }






.toast a {
    color: #fff;
}

    .toast a:hover {
        color: var(--clr);
    }

.toast-item.closed {
    max-height: 0;
}






.toast-item.help {
    --clr: #0070e0;
    --brd: #0070e040;
}

.toast-item.success {
    --clr: #03a65a;
    --brd: #03a65a40;
}

.toast-item.warning {
    --clr: #fc8621;
    --brd: #fc862140;
}

.toast-item.error {
    --clr: #db3056;
    --brd: #db305640;
}