<template>
    <div class="svg-btn-outline">
        <svg
            class="side left"
            width="16"
            height="28"
            viewBox="0 0 16 28"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
        >
            <path
                d="M15.7207 0.5H14.7207L0.720634 14.8612L14.7207 27.5H15.7207"
                stroke="currentColor"
            />
        </svg>

        <div class="fill">
            <div class="borders" />
        </div>

        <svg
            class="side right"
            width="16"
            height="28"
            viewBox="0 0 16 28"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
        >
            <path
                d="M15.7207 0.5H14.7207L0.720634 14.8612L14.7207 27.5H15.7207"
                stroke="currentColor"
            />
        </svg>
    </div>
</template>

<style lang="scss">
.svg-btn-outline {
    grid-template-columns: auto 1fr auto;
    display: grid;
    align-items: center;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;

    .side {
        height: 100%;

        &.right {
            transform: scaleX(-1);
        }
    }
    .fill {
        height: 100%;
        position: relative;

        .borders {
            position: absolute;
            inset: 0 -1px;
            border: solid currentColor;
            border-width: 1px 0;
        }
    }
}
</style>
