.cxb-floater {
    position: fixed;
    right: 15px;
    bottom: 15px;
    width: 50px;
    height: 50px;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    opacity: 0.5;
    background: #f6f6f6;
    text-align: center;
    display: flex;
    border-radius: 5px;
    animation: floater-appear 0.5s;

    transition: all 200ms linear;

    &:focus {
        outline: none;
    }

    &.cxs-open {
        width: 200px;
        opacity: 1;

        & > .cxe-floater-button > i {
            transform: rotate(360deg)
        }
    }

    i {
        font-size: 1.3em
    }
}

@keyframes floater-appear {
    from {
        opacity: 1;
        transform: scale(0.1);
        background: red;
    }

    to {
        opacity: 0.5;
        transform: none;
    }
}

.cxe-floater-drawer {
    display: inline-block;
    height: 50px;
    width: 0;
    opacity: 0;
    transition: all 200ms linear;
    overflow: hidden;

    .cxs-open & {
        width: 150px;
        opacity: 1;
    }
}

.cxe-floater-button {
    width: 50px;
    height: 50px;
    line-height: 50px;
    display: inline-block;
    cursor: pointer;

    i {
        transition: all 100ms;
    }
}