.button-single,
.button,
.button-first,
.button-last
{
    --background-color:transparent;
    --foreground-color:#ddd;
    --hover-foreground-color:#222;
    --border-color:#ddd;
    --border-size:.1rem;
    --edge-size:.5rem;
	--padding-vertical:.5rem;
	--padding-horizontal:1rem;

    position:relative;

    font-size:clamp(1rem,1.5rem,2rem);

    background-color:var(--background-color);
    color:var(--foreground-color);
    padding:var(--padding-vertical) calc(var(--edge-size) + var(--padding-horizontal));
    border:0;
    
    transition: color 500ms;
}

.button-single:before,
.button:before,
.button-first:before,
.button-last:before
{
    content:'';
    position:absolute;
    inset:0;
    background-color:var(--border-color);
    z-index: -1;
    
	transition: clip-path 500ms;
}

.button-single:hover,
.button:hover,
.button-first:hover,
.button-last:hover
{
    color: var(--hover-foreground-color);
}





/* double line label */
.button-single:has(p),
.button:has(p),
.button-first:has(p),
.button-last:has(p)
{
	padding:.217rem calc(var(--edge-size) + .8rem);
    font-size:1.25rem;
}
.button-single > p,
.button > p,
.button-first > p,
.button-last > p
{
	margin:0;
	padding:0;
}
.button-single > p:first-child,
.button > p:first-child,
.button-first > p:first-child,
.button-last > p:first-child
{
	
}
.button-single > p:last-child,
.button > p:last-child,
.button-first > p:last-child,
.button-last > p:last-child
{
	font-size:0.75rem;
}






.button
{
	clip-path:polygon(
        /* top left */
        0 0,
        /* top right */
        100% 0,
        /* bottom right */
        100% 100%,
        /* bottom left */
        0 100%
    );
}
.button-bar > form:first-child > .button,
.button-bar >  .button:first-child,
.button-first
{
	clip-path:polygon(
        /* top left */
        0 var(--edge-size),
        var(--edge-size) 0,
        /* top right */
        100% 0,
        /* bottom right */
        100% 100%,
        /* bottom left */
        0 100%
    );
}
.button-bar > form:last-child > .button,
.button-bar > .button:last-child,
.button-last
{
	clip-path:polygon(
        /* top left */
        0 0,
        /* top right */
        100% 0,
        /* bottom right */
        100% calc(100% - var(--edge-size)),
        calc(100% - var(--edge-size)) 100%,
        /* bottom left */
        0 100%
    );
}






.button:before
{
	clip-path:polygon(
        /* outer */
            /* left bottom cut */
            0 calc(100% - var(--border-size)),
            /* top left */
            0 0,
            /* top right */
            100% 0,
            /* bottom right */
            100% 100%,
            /* bottom left */
            0 100%,
            /* left bottom cut */
            0 calc(100% - var(--border-size)),
        /* inner */
            /*  left bottom cut */
            var(--border-size) calc(100% - var(--border-size)),
            /* bottom right */
            calc(100% - var(--border-size)) calc(100% - var(--border-size)),
            /* top right */
            calc(100% - var(--border-size)) var(--border-size),
            /* top left */
            var(--border-size) var(--border-size),
            /* left bottom cut */
            var(--border-size) calc(100% - var(--border-size))
    );
}
.button-bar > form:first-child > .button:before,
.button-bar > .button:first-child:before,
.button-first:before
{
	clip-path:polygon(
        /* outer */
            /* left bottom cut */
            0 calc(100% - var(--border-size)),
            /* top left */
            0 var(--edge-size),
            var(--edge-size) 0,
            /* top right */
            100% 0,
            /* bottom right */
            100% 100%,
            /* bottom left */
            0 100%,
            /* left bottom cut */
            0 calc(100% - var(--border-size)),
        /* inner */
            /*  left bottom cut */
            var(--border-size) calc(100% - var(--border-size)),
            /* bottom right */
            calc(100% - var(--border-size)) calc(100% - var(--border-size)),
			calc(100% - var(--border-size)) calc(100% - var(--edge-size) - (var(--border-size) * .5)),
            /* top right */
            calc(100% - var(--border-size)) var(--border-size),
            /* top left */
            calc(var(--edge-size) + (var(--border-size) * .5)) var(--border-size),
            var(--border-size) calc(var(--edge-size) + (var(--border-size) * .5)),
            /* left bottom cut */
            var(--border-size) calc(100% - var(--border-size))
    );
}
.button-bar > form:last-child > .button:before,
.button-bar > .button:last-child:before,
.button-last:before
{
	clip-path:polygon(
        /* outer */
            /* left bottom cut */
            0 calc(100% - var(--border-size)),
            /* top left */
            0 0,
            /* top right */
            100% 0,
            /* bottom right */
            100% calc(100% - var(--edge-size)),
            calc(100% - var(--edge-size)) 100%,
            /* bottom left */
            0 100%,
            /* left bottom cut */
            0 calc(100% - var(--border-size)),
        /* inner */
            /*  left bottom cut */
            var(--border-size) calc(100% - var(--border-size)),
            /* bottom right */
            calc(100% - var(--edge-size) - (var(--border-size) * .5)) calc(100% - var(--border-size)),
            calc(100% - var(--border-size)) calc(100% - var(--edge-size) - (var(--border-size) * .5)),
            /* top right */
            calc(100% - var(--border-size)) var(--border-size),
            /* top left */
            var(--border-size) var(--border-size),
            /* left bottom cut */
            var(--border-size) calc(100% - var(--border-size))
    );
}







.button:hover:before
{
    clip-path:polygon(
        /* outer */
            /* left bottom cut */
            0 calc(100% - var(--border-size)),
            /* top left */
            0 0,
            /* top right */
            100% 0,
            /* bottom right */
            100% 100%,
            /* bottom left */
            0 100%,
            /* left bottom cut */
            0 calc(100% - var(--border-size)),
        /* inner */
            /*  left bottom cut */
            var(--border-size) calc(100% - var(--border-size)),
            /* bottom right */
            var(--border-size) calc(100% - var(--border-size)),
            /* top right */
            var(--border-size) var(--border-size), /* and here */
            /* top left */
            var(--border-size) var(--border-size),
            /* left bottom cut */
            var(--border-size) calc(100% - var(--border-size))
    );
}
.button-bar > form:first-child > .button:hover:before,
.button-bar > .button:first-child:hover:before,
.button-first:hover:before
{
    clip-path:polygon(
        /* outer */
            /* left bottom cut */
            0 calc(100% - var(--border-size)),
            /* top left */
            0 var(--edge-size),
            var(--edge-size) 0,
            /* top right */
            100% 0,
            /* bottom right */
            100% 100%,
            /* bottom left */
            0 100%,
            /* left bottom cut */
            0 calc(100% - var(--border-size)),
        /* inner */
            /*  left bottom cut */
            var(--border-size) calc(100% - var(--border-size)),
            /* bottom right */
            var(--border-size) calc(100% - var(--border-size)), 
			var(--border-size) calc(var(--edge-size) + (var(--border-size) * .5)), 
			/* top right */
            calc(var(--edge-size) + (var(--border-size) * .5)) var(--border-size), /* and here */
            /* top left */
            calc(var(--edge-size) + (var(--border-size) * .5)) var(--border-size),
            var(--border-size) calc(var(--edge-size) + (var(--border-size) * .5)),
            /* left bottom cut */
            var(--border-size) calc(100% - var(--border-size))
    );
}
.button-bar > form:last-child > .button:hover:before,
.button-bar > .button:last-child:hover:before,
.button-last:hover:before
{
    clip-path:polygon(
        /* outer */
            /* left bottom cut */
            0 calc(100% - var(--border-size)),
            /* top left */
            0 0,
            /* top right */
            100% 0,
            /* bottom right */
            100% calc(100% - var(--edge-size)),
            calc(100% - var(--edge-size)) 100%,
            /* bottom left */
            0 100%,
            /* left bottom cut */
            0 calc(100% - var(--border-size)),
        /* inner */
            /*  left bottom cut */
            var(--border-size) calc(100% - var(--border-size)),
            /* bottom right */
            var(--border-size) calc(100% - var(--border-size)), /* here */
            var(--border-size) calc(var(--edge-size) + (var(--border-size) * .5)), /* here */
            /* top right */
            var(--border-size) var(--border-size), /* and here */
            /* top left */
            var(--border-size) var(--border-size),
            /* left bottom cut */
            var(--border-size) calc(100% - var(--border-size))
    );
}






.button-bar > form:first-child:last-child > .button,
.button-bar > .button:first-child:last-child,
.button-single
{
	clip-path:polygon(
        /* top left */
        0 var(--edge-size),
        var(--edge-size) 0,
        /* top right */
        100% 0,
        /* bottom right */
        100% calc(100% - var(--edge-size)),
        calc(100% - var(--edge-size)) 100%,
        /* bottom left */
        0 100%
    );
}
.button-bar > form:first-child:last-child > .button:before,
.button-bar > .button:first-child:last-child:before,
.button-single:before
{
	clip-path:polygon(
        /* outer */
            /* left bottom cut */
            0 calc(100% - var(--border-size)),
            /* top left */
            0 var(--edge-size),
            var(--edge-size) 0,
            /* top right */
            100% 0,
            /* bottom right */
            100% calc(100% - var(--edge-size)),
            calc(100% - var(--edge-size)) 100%,
            /* bottom left */
            0 100%,
            /* left bottom cut */
            0 calc(100% - var(--border-size)),
        /* inner */
            /*  left bottom cut */
            var(--border-size) calc(100% - var(--border-size)),
            /* bottom right */
            calc(100% - var(--edge-size) - (var(--border-size) * .5)) calc(100% - var(--border-size)),
            calc(100% - var(--border-size)) calc(100% - var(--edge-size) - (var(--border-size) * .5)),
            /* top right */
            calc(100% - var(--border-size)) var(--border-size),
            /* top left */
            calc(var(--edge-size) + (var(--border-size) * .5)) var(--border-size),
            var(--border-size) calc(var(--edge-size) + (var(--border-size) * .5)),
            /* left bottom cut */
            var(--border-size) calc(100% - var(--border-size))
    );
}
.button-bar > form:first-child:last-child > .button:hover:before,
.button-bar > .button:first-child:last-child:hover:before,
.button-single:hover:before
{
    clip-path:polygon(
        /* outer */
            /* left bottom cut */
            0 calc(100% - var(--border-size)),
            /* top left */
            0 var(--edge-size),
            var(--edge-size) 0,
            /* top right */
            100% 0,
            /* bottom right */
            100% calc(100% - var(--edge-size)),
            calc(100% - var(--edge-size)) 100%,
            /* bottom left */
            0 100%,
            /* left bottom cut */
            0 calc(100% - var(--border-size)),
        /* inner */
            /*  left bottom cut */
            var(--border-size) calc(100% - var(--border-size)),
            /* bottom right */
            var(--border-size) calc(100% - var(--border-size)), /* here */
            var(--border-size) calc(var(--edge-size) + (var(--border-size) * .5)), /* here */
            /* top right */
            calc(var(--edge-size) + (var(--border-size) * .5)) var(--border-size), /* and here */
            /* top left */
            calc(var(--edge-size) + (var(--border-size) * .5)) var(--border-size),
            var(--border-size) calc(var(--edge-size) + (var(--border-size) * .5)),
            /* left bottom cut */
            var(--border-size) calc(100% - var(--border-size))
    );
}






.button-bar
{
	
}