.wolfo-button.btn-fancy {
    &[class*='size-'] {
        border: 0;
        background: none;
    }

    a {
        --offset: 3px;
        --border-size: 1px;
        color: $primary_color;
        background: none;
        box-shadow: inset 0 0 0 var(--border-size) currentcolor;
        @include transition(background .8s ease);

        &:hover {
            color: $hover_color;

            .top {
                @include transform(scaleX(0));
            }

            .bottom {
                @include transform(scaleY(0));
            }
        }
    }

    .btn-line {
        position: absolute;
        top: var(--horizontal-offset, 0);
        right: var(--vertical-offset, 0);
        bottom: var(--horizontal-offset, 0);
        left: var(--vertical-offset, 0);
        transition: -webkit-transform .8s ease;
        transition: transform .8s ease;
        transition: transform .8s ease, -webkit-transform .8s ease;
        will-change: transform;

        &:before, &:after {
            content: '';
            position: absolute;
            border: inherit;
        }
    }

    .top {
        --vertical-offset: calc(var(--offset) * -1);
        border-top: var(--border-size) solid currentcolor;
        border-bottom: var(--border-size) solid currentcolor;

        &:before {
            top: calc(var(--vertical-offset) - var(--border-size));
            bottom: calc(var(--vertical-offset) - var(--border-size));
            left: calc(var(--vertical-offset) * -1);
            right: calc(var(--vertical-offset) * -1);
        }
    }

    .bottom {
        --horizontal-offset: calc(var(--offset) * -1);
        border-left: var(--border-size) solid currentcolor;
        border-right: var(--border-size) solid currentcolor;

        &:before {
            top: calc(var(--horizontal-offset) * -1);
            bottom: calc(var(--horizontal-offset) * -1);
            left: calc(var(--horizontal-offset) - var(--border-size));
            right: calc(var(--horizontal-offset) - var(--border-size));
        }
    }
}

.wolfo-button-sc.btn-fancy {
    &:hover {
        a {
            color: var(--fancy-hover-tag-a-color) !important;
        }
    }
}