button.sidebar.fixed {
    position: fixed;
    bottom: 50%;
    transform: translateY(50%);
    right: max(0px, calc((100% - var(--pageLimit) - 1px) / 2));
    z-index: 400;
    background: none;
    border: none;
    padding: 20px 0 20px 20px;
    overflow: hidden;

    @media screen and (max-width: 640px) {
        bottom: 5%;
        transform: none;
        width: auto;
        height: auto;
        padding: 15px;
    }

    .stickyElement {
        display: flex;
        flex-direction: column;
        gap: 10px;
        border-color: transparent;
        border-width: 0px;
        border-style: solid;
        border-radius: 50px;
        transition-property: all;
        transition-timing-function: cubic-bezier(.4, 0, .2, 1);
        transition-duration: .3s;
        /* --ssn-shadow: -4px 4px 12px rgba(0, 0, 0, .1);
        --ssn-shadow-colored: -4px 4px 12px var(--ssn-shadow-color);
        box-shadow: var(--ssn-ring-offset-shadow, 0 0 #0000), var(--ssn-ring-shadow, 0 0 #0000), var(--ssn-shadow); */

        @media screen and (max-width: 640px) {
            padding: 0;
        }

        .head {
            display: none;
            gap: 10px;

            .image {
                border-radius: 50%;
                overflow: hidden;
                width: 30px;
                height: 30px;

                img {
                    width: 100%;
                    height: 100%;
                    object-fit: contain;
                }
            }

            .title {
                font-weight: 700;
                color: #000;

                &.hidden {
                    display: none;
                }
            }
        }

        .options {
            display: flex;
            align-items: flex-end;
            flex-direction: column;
            gap: 10px;

            .option {
                height: 60px;
                width: 61px;
                transform: translateX(calc(100% - 60px));
                background-color: white;
                padding: 15px;
                align-items: center;
                display: flex;
                gap: 16px;
                transition: transform .3s ease-in-out;
                box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.15);

                &:last-child {
                    margin-bottom: 5px;
                }

                .icon {
                    height: 30px;
                    width: 30px;
                    display: flex;
                    align-items: center;
                    justify-content: center;

                    img {
                        width: 30px;
                        max-height: 30px;
                        object-fit: contain;
                    }
                }

                .link {
                    a {
                        transition: color .3s ease-in-out;
                        font-size: 15px;
                        line-height: 1.25rem;
                        text-decoration: none;
                        white-space: nowrap;
                    }
                }

                &.divider {
                    hr {
                        margin: 5px 0;
                        background: rgb(206, 206, 206);
                        width: 100%;
                    }
                }

                &.hidden {
                    display: none;
                }

                &:hover,
                &:focus,
                &:focus-within {
                    gap: 10px;
                    transition: transform .3s ease-in-out;
                    width: fit-content;
                    transform: translateX(0);

                    /* .link.hidden {
                        display: block;
                    } */
                }
            }
        }
    }

    .stickyElement {

        @media screen and (max-width: 640px) {
            /* position: absolute;
            bottom: 0; */
            gap: 0;
            /* right: 15px; */
            background-color: white;
            box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.15);
        }

        .head {
            @media screen and (max-width: 640px) {
                display: flex;
                padding: 7px;
            }
        }

        .options {
            @media screen and (max-width: 640px) {
                /* display: none; */
                height: 0;
                width: 0;
                overflow: hidden;
                align-items: flex-start;
                gap: 0;

            }

            .option {
                @media screen and (max-width: 640px) {
                    background-color: unset;
                    box-shadow: unset;
                    width: fit-content;

                }
            }
        }

    }

    &.active .stickyElement {
        border-radius: 10px;

        .head {
            @media screen and (max-width: 640px) {
                display: flex;
                padding: 7px;
            }

            .image {
                @media screen and (max-width: 640px) {
                    height: 45px;
                    width: 45px;
                }
            }
        }

        .options {
            /* display: flex; */
            height: fit-content;
            width: fit-content;

            .option {
                gap: 10px;
                transition: all .3s ease-in-out;
                max-width: fit-content;
                transform: translateX(0);
                height: 50px;
                padding: 10px 15px;
            }
        }
    }
}