.wolfo-button.btn-outline {
    border-color: $primary_color;
    @include transition(all .4s, color 0s);

    a {
        background: none;
        color: $primary_color;
        @include transition(all .4s);

        &:after {
            line-height: 1;
            @include transition(all .4s, color 0s);
        }
    }

    &:hover {
        //border-color: transparent !important;
        //background: $hover_color;

        a {
            //color: $light_color;
            //background: $hover_color;
        }
    }

    &.btn-effect-1 {
        @include transition(all .4s);
    }

    &.btn-effect-2 {
        @include button-layout-effect-2();
    }

    &.btn-effect-3 {
        @include button-layout-effect-3();
    }

    &.btn-effect-4 {
        @include button-layout-effect-4();
    }
}

.wolfo-button-sc.btn-outline {
    &:hover {
        border-color: var(--outline-hover-bd-color) !important;
        background: var(--outline-hover-bg-color) !important;

        a {
            color: var(--outline-hover-tag-a-color) !important;
            background: var(--outline-hover-tag-a-background) !important;
        }
    }

    &.btn-effect-4:hover {
        border-color: var(--outline-hover-ef4-border) !important;
    }
}