@import "bourbon";

$btn-color: #3CA2A2;

@include keyframes(orbit) {
    0% {
        @include transform(rotateY(90deg) rotate(0deg));
    }

    60% {
        @include transform(rotateY(90deg) rotate(-180deg));
    }

    100% {
        @include transform(rotateY(90deg) rotate(-360deg));
    }
}

.button {
    display: inline-block;
    border-radius: 10px;
    border: 1px solid rgba(#000, 0.05);
    position: relative;
    padding: 20px 30px 20px 70px;
    background: rgba($btn-color, 0.6);
    color: rgba(#000, 0.5);
    cursor: pointer;
    @include transform-style(preserve-3d);
    @include transition(all 500ms ease-in-out);

    &:hover {
        @include transform(translateY(-5px));
        color: rgba(#000, 0.8);
        background: rgba($btn-color, 0.8);

        >span {
            @include transition(all 800ms ease-in-out);
            @include transform(rotateY(90deg) rotate(-360deg));
        }
    }

    >span {
        width: 80px;
        display: block;
        position: absolute;
        left: 0;
        top: -40px;
        bottom: -40px;
        border-radius: 50%;
        @include transform-style(preserve-3d);
        @include transform(rotateY(90deg) rotate(0deg));

        >span {
            position: absolute;
            background: rgba(0, 0, 0, 0.6);
            width: 16px;
            height: 17px;
            left: 0;
            top: 50px;
            @include transform(rotateY(-90deg));

            &::before {
                position: absolute;
                content: '';
                top: 100%;
                left: 0;
                margin-left: -7px;

                border: {
                    top: 16px solid rgba(0, 0, 0, 0.6);
                    bottom: 0 solid transparent;
                    left: 15px solid transparent;
                    right: 15px solid transparent;
                }
            }
        }
    }
}