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

/* region toast*/
/*toast-item和toast不能合并,因为toast上的小组件需要一个relative定位的父元素*/
.toast-item {
    /*管理a:hover*/
    --cs1: #00daa1;
    /*关闭按钮,a,引用竖线,h3颜色*/
    --cs2: #0079cc;
    --ch1: #005e38;
    --ch2: #03a65a;
    --cw1: #c24914;
    --cw2: #fc8621;
    --ce1: #851d41;
    --ce2: #db3056;
    --toast-max-height: 10rem;
    /*close叉号的过渡时间,过久还是会出现bug*/
    /*--transition-close-duration-time: 0.6s;*/
    --transition-duration-time: 0.4s;
    /*适用于浅色主题*/
    --toast-content-bgclr: rgba(239, 239, 239, 0.5);
    --toast-content-color: #19695e;
    /*适用于深色主题*/
    /*--toast-content-bgclr: rgba(1, 1, 24, 0.4);*/
    /*--toast-content-color: #affcec;*/

    box-sizing: border-box;
    border-radius: 1rem;
    background: var(--toast-content-bgclr);
    box-shadow: 0 0  5px #808080;
    z-index: 9999;
    overflow: hidden;
    position: fixed;
    top: 90px;
    left: 50%;
    transform: translateX(-50%) scaleY(0);
    opacity: 0;
    /* font-family: "Varela Round", sans-serif; */
}
.toast-item.show {
    backdrop-filter: blur(6px);
    transform: translateX(-50%) scaleY(1);
    opacity: 1;
}
.toast-item.show .toast-content .close {
    /*不隐藏的话, close叉号在关闭后鼠标可能还维持选中叉号的状态*/
    display: block;
}
/*region 过渡. 单独提出来,因为仅设置toast-item会导致content:before h3 a在出画时直接消失*/
.toast-item {
    /*origin中使用动画,应该也可以用过渡代替, 过渡感觉更简单. 过渡需要setTimeout控制show的remove和add且可以实现续期*/
    /*如果opacity和height都变化的话,必须设置opacity的过渡才能让height过渡,因为没有opacity就认为没有内容,则height直接变为0*/
    transition: transform var(--transition-duration-time) ease,opacity var(--transition-duration-time) ease
    ,backdrop-filter var(--transition-duration-time) ease
    /*加transition会出现bug,当opacity变为最终结果时,如果背景中含有文字,则blur会重新计算导致轻微抖动.*/
    ;
}
.toast-content:before {
    transition: height var(--transition-duration-time) ease, background-color var(--transition-duration-time) ease;
}

.toast-content h3 {
    transition: color var(--transition-duration-time) ease, position var(--transition-duration-time) ease;
}
.toast-content a {
    transition: color var(--transition-duration-time) ease;
}

/*endregion*/
.toast-content {
    position: relative;
    color: #f5f5f5;
    font-weight: 300;
    text-align: left;
    padding: 1rem 2rem 1rem 3rem;
    max-width: 16rem;
    min-width: 10rem;
/*
    padding: 1rem 2rem 1rem 3rem;
    border-radius: 1rem;
    margin: 1rem 0;
    background: var(--toast-content-bgclr);
    max-width: 16rem;
    backdrop-filter: blur(80px);
    border: 0.15rem solid rgba(129, 97, 97, 0.13);*/
}
/*region toast上的小元素*/
/*引用线*/
.toast-content:before {
    content: "";
    position: absolute;
    width: 0.5rem;
    height: calc(100% - 1.5rem);
    top: 0.75rem;
    left: 0.5rem;
    z-index: 0;
    border-radius: 1rem;
    background: var(--clr);
}

.toast-content h3 {
    font-size: 1.2rem;
    margin: 0;
    line-height: 1.35rem;
    font-weight: 600;
    position: relative;
    color: var(--clr);
}

.toast-content p {
    position: relative;
    font-size: 0.95rem;
    z-index: 1;
    margin: 0.25rem 0 0;
    color: var(--toast-content-color);
    line-height: 1.3rem;
}

.toast-content a {
    color: var(--clr);
    cursor: pointer;
}

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

/*close按钮*/
.toast-content .close {
    display: none;
    position: absolute;
    width: 1.35rem;
    height: 1.35rem;
    text-align: center;
    right: 1rem;
    cursor: pointer;
    border-radius: 100%;
}

.toast-content .close:after {
    position: absolute;
    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;
    color: var(--toast-content-color);
    text-indent: 1px;
}

.toast-content .close:hover:after {
    background: var(--clr);
    color: #fff;
}
/*endregion*/

/*region 单独设置toast-item*/
.toast-item.help {
    --bg: var(--ch1);
    --clr: var(--ch2);
    --brd: var(--ch3);
}

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

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

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