@borderRadius: 8px;

.followButton {
    display: inline-flex;
    flex-direction: row;
    align-items: center;

    transition: all 150ms ease-in-out;
    outline: 1px solid var(--border-color);

    border-radius: @borderRadius;

    .counter {
        padding: 5px 15px;
        color: var(--text-color);
    }

    .btn {
        cursor: pointer;

        width: 100px;
        padding: 5px 15px;

        transition: all 150ms ease-in-out;

        border-radius: @borderRadius;
        border-left: 1.5px solid var(--border-color);
        border-top: 0;
        border-right: 0;
        border-bottom: 0;

        text-align: center;
        letter-spacing: 1px;

        span {
            user-select: none !important;
            transition: all 150ms ease-in-out;
            color: white !important;
        }

        opacity: 0.9;

        background : linear-gradient(120deg, #6559ae, #ff7159, #6559ae);
        background-size : 400% 400%;
        background-position: 14% 0%;

        &:hover {
            opacity: 1;

            animation: gradientMove 2s forwards ease-in-out infinite;
            background: linear-gradient(120deg, #6559ae, #ff7159, #6559ae);
            background-size: 400% 400%;
            background-position: 14% 0%;
        }

        // make an click animation transforming size
        &:active {
            transform: scale(0.95);
        }

        &.followed {
            background: none;

            span {
                color: #7e7e7e !important;
            }
        }
    }
}

@keyframes gradientMove {
    0% {
        background-position: 14% 0%;
    }

    50% {
        background-position: 87% 100%;
    }

    100% {
        background-position: 14% 0%;
    }
}