.button-circle {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    background: #fff;
    border-radius: 100vh;
    transition: background-color 0.8s var(--ease-quart);

    & > * {
        width: 22px;
        height: 22px;
        object-fit: contain;
        transition: opacity 0.4s var(--ease-quart), filter 0.4s var(--ease-quart);
    }

    // Clones
    .clone {
        display: flex;
        justify-content: center;
        align-items: center;
        transform-origin: center center;
        transition: opacity 0.7s var(--ease-quart), transform 0.7s var(--ease-quart);

        &:last-child {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            transform: translate3d(-100%, 0, 0);
        }
    }


    /*
    ** States
    */
    // Hover
    &:hover {
        .clone {
            &:first-child {
                opacity: 0;
                transform: scale(0.9) translate3d(30%, 0, 0);
            }
            &:last-child {
                opacity: 1;
                transform: translate3d(0,0,0);
            }
        }
    }

    // Disabled
    &[disabled] {
        background: $color-primary;
        border: 3px solid #ffffff20;

        svg {
            fill: $color-primary-tertiary20;
        }
    }


    /*
    ** Variants
    */
    // Small size
    &--small {
        height: 32px;
        width: 32px;

        img, svg {
            width: 16px;
            height: 16px;
            object-fit: contain;
        }
    }

    // Pink color
    &--pink {
        background-color: $color-secondary;

        &:hover {
            background-color: darken($color-secondary, 7);
        }
    }

    // Purple color
    &--purple {
        background-color: $color-primary-tertiary20;

        &:hover {
            background-color: $color-lightpurple;
        }
    }
}