$color_1: #fff;
$color_2: white;
$bgr: #1296d5;

@for $i from 2 through 10 {
    @keyframes icon-loop-#{$i} {
        from {
            margin-top: 0;
        }

        to {
            margin-top: -#{50 * $i}px;
        }
    }
}

.admz_ctg2 {
    cursor: pointer !important;
    user-select: none;

    .button-contact {
        position: fixed;
        z-index: 1041;
        left: 15px;
        bottom: 55px;

        .icon-box {
            background-color: $bgr;
        }

        .icon-close {
            background-color: $bgr;
            color: $color_1;
            display: none;
        }

        .icon-open {
            background-color: $bgr;
            color: $color_1;
            padding: 0;
            display: inline-block;

            >span {
                display: flex;
                flex-direction: column;

                @for $i from 2 through 10 {
                    &.icon-loop-#{$i} {
                        animation: icon-loop-#{$i} #{$i}s steps($i, end) infinite;
                    }
                }

            }
        }

        .text-contact {
            background-color: $bgr;
            border-color: #1296d5;
            visibility: visible;
            opacity: 1;
            transform: translate(0, 0);
            transition: all 0.3s;
            box-sizing: border-box;

            @media (min-width: 549px) {
                display: inline-block !important;
            }
        }

        .button-over {
            position: absolute !important;
            left: 0;
            top: 0;
            z-index: -1;

            &:after {
                background-color: $bgr;
                display: block;
                content: "";
                transform: scale(0);
                animation: shakeOut 2s 5;
                -webkit-animation: shakeOut 2s 5;
                position: absolute;
                border-radius: 50px;
                display: block;
                width: 60px;
                height: 60px;
                z-index: -1;
                top: -10px;
                left: -10px;
                animation-delay: 0.5s;
            }

            &:before {
                background-color: $bgr;
                display: block;
                content: "";
                transform: scale(0);
                animation: shakeOut 2s 5;
                -webkit-animation: shakeOut 2s 5;
                position: absolute;
                border-radius: 50px;
                display: block;
                width: 60px;
                height: 60px;
                z-index: -1;
                top: -10px;
                left: -10px;
            }

            &:hover {
                box-shadow: 0 0 0 !important;
            }
        }
    }

    .button-list {
        position: fixed;
        z-index: 1041;
        left: 15px;
        bottom: 55px;
        list-style: none;
        padding: 0;
        margin: 0;
        bottom: 111px;
        left: -500px;

        .menu_item {
            margin-bottom: 0px;
            visibility: hidden;
            height: 50px;
            opacity: 0;

            .icon-box,
            .text-box {
                transition: all 0.3s;
            }

            .item {
                &:hover {

                    .icon-box,
                    .text-box {
                        box-shadow: 0 0 10px rgba(0, 0, 0, 0.35);
                    }

                    .text-box {
                        margin-left: 15px;
                    }
                }
            }
        }
    }

    a {
        text-decoration: none;
        background-color: transparent !important;
        display: inline-block;
    }



    .text-box {
        border-color: #1296d5;
        position: relative;
        display: inline-block;
        color: $color_1;
        text-align: center;
        height: 40px;
        margin-top: 5px;
        margin-left: 10px;
        padding: 8px 10px;
        border-radius: 5px;
        vertical-align: top;
        box-sizing: border-box;

        &:before {
            top: 13px;
            left: -5px;
            position: absolute;
            border-top-width: 6px;
            border-right-width: 6px;
            border-bottom-width: 6px;
            border-top-style: solid;
            border-right-style: solid;
            border-bottom-style: solid;
            border-color: inherit;
            border-top-color: transparent;
            border-right-color: inherit;
            border-bottom-color: transparent;
            content: "";
        }
    }

    &.extend {
        ul.button-list {
            left: 15px;

            li {
                position: relative;
                margin-bottom: 10px;
                margin-top: 0px;
                visibility: visible;
                opacity: 1;
                transition: all 0.5s;
            }
        }

        .text-contact {
            transform: translate(-15px, 0);
            transition: all 0.3s;
            visibility: hidden;
            opacity: 0;
        }

        .button-contact {
            .icon-open {
                display: none;
            }

            .icon-close {
                display: inline-flex;
            }
        }
    }

    &.right {
        .button-contact {
            right: 17px;
            left: unset;
            display: flex;
            flex-direction: row-reverse;
            bottom: 65px;

            .text-box {
                margin-left: 0px;
                margin-right: 10px;

                &:before {
                    left: unset;
                    right: -5px;
                    transform: rotate(180deg);
                }
            }
        }

        .button-over {
            right: 0px;
            left: unset;
        }

        ul.button-list {
            bottom: 117px;
        }

        &.extend {
            .button-list {
                right: 17px;
                left: unset;

                .menu_item {
                    text-align: right;

                    a {
                        display: flex;
                        justify-content: flex-start;
                        flex-direction: row-reverse;
                        margin-bottom: 5px;

                        .text-box {
                            margin-left: unset;
                            margin-right: 10px;

                            &:before {
                                left: unset;
                                right: -5px;
                                transform: rotate(180deg);
                            }
                        }
                    }
                }
            }
        }
    }

    .icon-box {
        color: $color_2;
        padding: 8px;
        width: 50px;
        height: 50px;
        display: inline-flex;
        position: relative;
        text-decoration: none;
        border: 1px none;
        border-radius: 50%;
        align-items: center;
        overflow: hidden;
        justify-content: center;
        box-sizing: border-box;

        >.dashicons {
            position: absolute;
            font-size: 30px !important;
            width: 30px !important;
            height: 30px !important;
            fill: currentColor;
            // background-color: red;
        }

        >.adminz_svg {
            position: absolute;
            font-size: 30px !important;
            width: 30px !important;
            height: 30px !important;
            fill: currentColor;
            // background-color: blue;
        }
    }

    .item {

        span {
            background-color: $bgr;
            border-color: $bgr;
        }

        &.zalo span {
            background-color: #0180c7;
            border-color: #0180c7;
        }

        &.email span {
            background-color: #1cbbb4;
            border-color: #1cbbb4;
        }

        &.call span {
            background-color: #01af38;
            border-color: #01af38;
        }

        &.gmap span {
            background-color: #cf3d34;
            border-color: #cf3d34;
        }

        &.facebook span {
            background-color: #1877f2;
            border-color: #1877f2;
        }

        &.messenger span {
            background-color: #1877f2;
            border-color: #1877f2;
        }

        &.twitter span {
            background-color: #55acee;
            border-color: #55acee;
        }

        &.linkedin span {
            background-color: #0077b5;
            border-color: #0077b5;
        }

        &.skype span {
            background-color: #00aff0;
            border-color: #00aff0;
        }

        &.dropbox span {
            background-color: #00aff0;
            border-color: #00aff0;
        }

        &.wordpress span {
            background-color: #00aff0;
            border-color: #00aff0;
        }

        &.vimeo span {
            background-color: #1ab7ea;
            border-color: #1ab7ea;
        }

        &.slideshare span {
            background-color: #0077b5;
            border-color: #0077b5;
        }

        &.vk span {
            background-color: #4c75a3;
            border-color: #4c75a3;
        }

        &.tumblr span {
            background-color: #34465d;
            border-color: #34465d;
        }

        &.yahoo span {
            background-color: #410093;
            border-color: #410093;
        }

        &.google-plus span {
            background-color: #dd4b39;
            border-color: #dd4b39;
        }

        &.pinterest span {
            background-color: #bd081c;
            border-color: #bd081c;
        }

        &.youtube span {
            background-color: #cd201f;
            border-color: #cd201f;
        }

        &.stumbleupon span {
            background-color: #eb4924;
            border-color: #eb4924;
        }

        &.reddit span {
            background-color: #ff5700;
            border-color: #ff5700;
        }

        &.quora span {
            background-color: #b92b27;
            border-color: #b92b27;
        }

        &.yelp span {
            background-color: #af0606;
            border-color: #af0606;
        }

        &.weibo span {
            background-color: #df2029;
            border-color: #df2029;
        }

        &.hackernews span {
            background-color: #f60;
            border-color: #f60;
        }

        &.soundcloud span {
            background-color: #f30;
            border-color: #f30;
        }

        &.blogger span {
            background-color: #f57d00;
            border-color: #f57d00;
        }

        &.whatsapp span {
            background-color: #25d366;
            border-color: #25d366;
        }

        &.wechat span {
            background-color: #09b83e;
            border-color: #09b83e;
        }

        &.line span {
            background-color: #40bf05;
            border-color: #40bf05;
        }

        &.medium span {
            background-color: #02b875;
            border-color: #02b875;
        }

        &.vine span {
            background-color: #00b489;
            border-color: #00b489;
        }

        &.slack span {
            background-color: #3aaf85;
            border-color: #3aaf85;
        }

        &.instagram span {
            background-color: #e4405f;
            border-color: #e4405f;
        }

        &.dribbble span {
            background-color: #ea4c89;
            border-color: #ea4c89;
        }

        &.flickr span {
            background-color: #ff0084;
            border-color: #ff0084;
        }

        &.foursquare span {
            background-color: #f94877;
            border-color: #f94877;
        }

        &.behance span {
            background-color: #131418;
            border-color: #131418;
        }

        &.snapchat span {
            background-color: #fffc00;
            border-color: #fffc00;
        }

        &.bebo span {
            background-color: #e61112;
            border-color: #e61112;
        }

        &.delicious span {
            background-color: #3e84d3;
            border-color: #3e84d3;
        }

        &.deviantart span {
            background-color: #01ca3a;
            border-color: #01ca3a;
        }

        &.digg span {
            background-color: #2066a3;
            border-color: #2066a3;
        }

        &.envato span {
            background-color: #8cca4b;
            border-color: #8cca4b;
        }

        &.forrst span {
            background-color: #0d5f36;
            border-color: #0d5f36;
        }

        &.github span {
            background-color: #302f2f;
            border-color: #302f2f;
        }

        &.hangout span {
            background-color: #00a745;
            border-color: #00a745;
        }

        &.html span {
            background-color: #0f9855;
            border-color: #0f9855;
        }

        &.kickstarter span {
            background-color: #dc1a22;
            border-color: #dc1a22;
        }

        &.lastfm span {
            background-color: #003194;
            border-color: #003194;
        }

        &.myspace span {
            background-color: #c42828;
            border-color: #c42828;
        }

        &.path span {
            background-color: #3e9fbe;
            border-color: #3e9fbe;
        }

        &.periscope span {
            background-color: #9958b4;
            border-color: #9958b4;
        }

        &.picasa span {
            background-color: #1dd05d;
            border-color: #1dd05d;
        }

        &.rss span {
            background-color: #dd4b25;
            border-color: #dd4b25;
        }

        &.spotify span {
            background-color: #1dd05d;
            border-color: #1dd05d;
        }

        &.swarm span {
            background-color: #eb8d3a;
            border-color: #eb8d3a;
        }

        &.team-viewer span {
            background-color: #0362c2;
            border-color: #0362c2;
        }

        &.telegram span {
            background-color: #1f9bda;
            border-color: #1f9bda;
        }

        &.twitch span {
            background-color: #5d3da5;
            border-color: #5d3da5;
        }

        &.wattpad span {
            background-color: #f64d09;
            border-color: #f64d09;
        }

        &.xing span {
            background-color: #045d61;
            border-color: #045d61;
        }

        &.viber span {
            background-color: #7360F2;
            border-color: #7360F2;
        }
    }
}