.social-block {
    bottom: 80px;
    /* left: 16px; */
    right: 20px;
    position: fixed;
    z-index: 1000;        
}
.rs-chat-btn {
    align-items: center;
    animation: 5s ease-in 0s fadeInSoc;
    /* background: var(--color-brand); */
    border-radius: 50%;
    /* box-shadow: 0 3px 10px rgb(0 0 0 / 40%);*/
    cursor: pointer;
    display: flex;
    justify-content: center;
    height: 54px;
    transition: all .2s;
    width: 54px;
    &:hover {
        box-shadow: var(--shadow-medium);
    }
}
.soc-btns__list {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 16px;
    left: 1px;
    position: absolute;
    flex-direction: row;
    /* top: -280px;*/
    top: 0;
    transition: all .3s;
    /* z-index: 100;*/

    @include media-breakpoint-up(md) {
        flex-direction: row;
        /* transform: translate(0, 0);*/
    }
}
.social-block.open .soc-btns__list {
    right: 1px;
    /*top: -280px;*/
    z-index: 100;
    top: 1px;

    @include media-breakpoint-up(md) {
        /* transform: translateX(0);*/
        left: -280px;
        top: 1px;
    }
}
.soc-btns__item {
    height: 50px;
    position: relative;
    width: 50px;
    
    a {
        height: 100%;
        align-items: center;
        cursor: pointer;
        display: flex;
        justify-content: center;
        width: 100%;
    }
    
    &:hover:after {
        box-shadow: var(--shadow-medium);
    }
}
.soc-btns__item:after {
    border-radius: 50%;
    content: "";
    left: 0;
    height: 100%;
    position: absolute;
    top: 0;
    transition: var(--transition);
    width: 100%;
    z-index: -1;
}
.soc-btns__item:nth-child(1):after {
    background-image: radial-gradient(58.52% 53.5% at 33.5% 100%, #FEDA75 9.37%, #FA7E1E 47.5%, rgba(250, 126, 30, 0) 100%), radial-gradient(187.41% 126% at 84.5% 113.5%, #F50B5E 19.76%, #DF0897 52.03%, #962FBF 76.88%, #4F5BD5 93.34%);
}
.soc-btns__item:nth-child(2):after {
    background-color: #4BC759;
}
.soc-btns__item:nth-child(3):after {
    background-color: #23AAE9;
}
.soc-btns__item:nth-child(4):after {
    background-image: linear-gradient(74.53deg, #2771E9 0.04%, #792EE7 27.39%, #A82ACC 58%, #D5504B 90.58%);
}

.soc-btns__item {
    opacity: 0;
    transition: all .3s;
}
.soc-btns__item.open {
    transform: scale(1.1) !important;
    /* z-index: 20 !important; */
    opacity: 1;
}
.social-block.js-soc-block-2.open .soc-btns__item {
    opacity: 1;
    transform: scale(1) translate(0, 0) !important;
}

.js-soc-block-2 .rs-chat-btn {
    align-items: center;
    background: transparent;
    border-radius: 50%;
    /* box-shadow: 0 3px 10px rgb(0 0 0 / 40%);*/
    cursor: pointer;
    display: flex;
    justify-content: center;
    height: 54px;
    transition: all .2s;
    width: 54px;
    z-index: 12;
}
.js-soc-block-2.open .rs-chat-btn {
    background: var(--color-brand);
}
.js-soc-block-2 .soc-btns__list {
    /* left: 0;*/
    transform: translateY(0);
    z-index: 10;
    top: 0;
}
.js-soc-block-2 .soc-btns__item {
    height: 54px;
    position: relative;
    width: 54px;
    
}
.js-soc-block-2:not(.open) .soc-btns__item {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
}

@keyframes fadeInSoc {
    from { opacity: 0; }
    to { opacity: 1; }
}