$btn--circle---background: $btn--primary---background;
$btn--circle---color: $color-secondary;
$btn--circle--hover---background: $btn--primary--hover---background;

.#{$namespace}-btn--circle {
    background: $btn--circle---background;
    color: $btn--circle---color;
    line-height: 50px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: none;
    cursor: pointer;

    &:hover {
        background: $btn--circle--hover---background;
    }
}

$btn--circle---background: $btn--primary---background;
$btn--circle---color: $color-secondary;
$btn--circle--hover---background: $btn--primary--hover---background;

.#{$namespace}-btn--circle {
    background: $btn--circle---background;
    color: $btn--circle---color;
    line-height: 50px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: none;
    cursor: pointer;

    &--big {
        line-height: 70px;
        width: 70px;
        height: 70px;
    }

    &:hover {
        background: $btn--circle--hover---background;
    }
}

Add modifier --big to big circle button
Add modifier --big to big circle button
