﻿.actionButton {
    position: fixed;
    right: 0;
    cursor: pointer;
    display: inline;
    z-index: 999;
    vertical-align: middle;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

    .actionButton i, .actionButton img {
        width: 40px;
        height: 40px;
        color: #fff;
        font-size: 18px;
        background: #222;
        position: relative;
        text-align: center;
        line-height: 40px;
        border-top-left-radius: 5px;
        border-bottom-left-radius: 5px;
    }

        .actionButton i:after, .actionButton img:after {
            content: "";
            border: 8px solid;
            border-color: transparent transparent transparent #222;
            position: absolute;
            top: 12px;
            right: -16px;
        }

    .actionButton span {
        height: 40px;
        width: 0;
        color: #fff;
        font-size: 13px;
        font-weight: 600;
        overflow: hidden;
        align-items: center;
        white-space: nowrap;
        display: none;
        letter-spacing: 1px;
        justify-content: center;
        transition: width 500ms ease;
        background-color: #333;
        padding-top:3px;
    }

    .actionButton:hover span {
        width: 155px;
        display: inline-flex !important;
    }

@media screen and (max-width: 767.98px) {
    .actionButton:hover span {
        display: none !important;
    }
}

@media screen and (max-width: 575.98px) {
    .actionButton i {
        width: 35px;
        height: 35px;
        line-height: 35px;
    }

    .actionButton img {
        width: 35px;
        height: 35px;
        line-height: 35px;
    }
}

.lazada img {
    background: #0b0f80;
}

.shopee img {
    background: #ff5722;
}

.lazada span, .shopee span {
    padding-top: 0px !important;
    padding-bottom: 2px;
}

.facebook i {
    background: #4267B2;
}

.youtube i {
    background: #FF0000;
}

.twitter i {
    background: #1da1f2;
}

.instagram i {
    background: #d6249f;
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%);
    box-shadow: 0px 3px 10px rgba(0,0,0,.25);
}

.linkedIn i {
    background: #0077b5;
}

.whatsapp i {
    background: #25d366;
}

.wechat i {
    background: #7bb32e;
}
