.side-bar{    
    top: 50%;
    transform: translateY(-50%);
    position:fixed;
    right:10px;
    z-index:999;
}
.side-bar .side-bar-item{
    display: flex;
    cursor:pointer;
    width:46px;
    height:46px;
    line-height:46px;
    background:#fff;
    position:relative;
    text-align:center;
    box-sizing:border-box;
    border-radius:5px;
    align-items: center;
    transition: all 0.3s ease;
    justify-content: center;
}
.side-bar .side-bar-item+.side-bar-item{margin-top:10px;}
.side-bar .side-bar-item i{
    display:inline-block;
    font-size:30px;
    color: var(--color-primary);
}
.side-bar .side-bar-item:hover{
    background:var(--color-primary);
}
.side-bar .side-bar-item:hover i{
    color: #fff;
}