/*--- button block ----*/

.wp-element-button {
	display:inline-block; 
	padding:0.7rem 1.8rem;
	font-size:0.9em;
	color:#eee;
	line-height:1.05;
	text-decoration:none;
	font-weight:bold;
	background: var(--bg, #333);
	border-radius: 32px;
	cursor:pointer;
	transition:60ms ease-out;
}
.wp-element-button:not(.has-background) {
	--bg:#222;
}

.wp-element-button:hover {text-decoration:none; background: var(--bg, #333); filter: brightness(1.1) saturate(1.18); color:#fff; }

.wp-element-button:active {
	translate:0 1px;
	box-shadow: 0px 1px 0px #000000;
	filter:brightness(1.05); 
	transition:0ms ease-out;
}
.wp-element-button:after {
	filter: brightness(20)
}
.wp-element-button strong {font-weight:900;}

/*.wp-block-buttons>.wp-block-button.wp-block-button__width-100 { width:100%; flex-basis:100%}*/
.wp-block-buttons.is-vertical>.wp-block-button.wp-block-button__width-25 { width:25%}
.wp-block-buttons.is-vertical>.wp-block-button.wp-block-button__width-50 { width:50%}
.wp-block-buttons.is-vertical>.wp-block-button.wp-block-button__width-75 { width:75% }
.wp-block-buttons.is-vertical>.wp-block-button.wp-block-button__width-100  {width:100%;}
.wp-block-buttons {gap:16px;}



/*-- buttons with custom width ---*/
.has-custom-width .wp-element-button { width:100%; height:100%; text-align:center; flex-shrink:1;}
.wp-block-button__width-25 {flex-basis:25%;  flex-basis:calc(25% - var(--wp--style--block-gap, .5em)*.75); }
.wp-block-button__width-50 {flex-basis:50%; flex-basis:calc(50% - var(--wp--style--block-gap, .5em)*.5); }
.wp-block-button__width-75 {flex-basis:75%; flex-basis:calc(75% - var(--wp--style--block-gap, .5em)*.25); }
.wp-block-button__width-100 {flex-basis:100%}

@media( max-width:500px ) {
	.wp-block-buttons {flex-wrap: wrap; gap:4px;}
	.wp-block-button {   }
	.wp-element-button { }
}