.auf-button-snippet {
	--icon-gap: 1rem;
	--min-height: auto;
	--padding: auto;
}
.auf-button-snippet * {
	color: inherit;
	box-sizing: border-box;
	font-family: inherit;
}
.auf-button-snippet.debug * {
	outline: 1px dashed red;
}
.auf-button-snippet .tag {
	display: block; 
	width: 100%;
	border: none;
	margin: 0;
	padding: 0;
	background-color: transparent;
}
.auf-button-snippet.align--right  .tag { text-align: right;  }
.auf-button-snippet.align--left   .tag { text-align: left;   }
.auf-button-snippet.align--center .tag { text-align: center; }

.auf-button-snippet .wrapper {
	display: inline-block;
}
.auf-button-snippet .button {
	display: flex;
	flex-direction: column-reverse;
	justify-content: center;
	align-items: center;
	gap: var(--icon-gap);
	min-height: var(--min-height);
	padding: var(--padding);
	cursor: pointer;
	/* background-color: white; */
}
.auf-button-snippet .label {
	/* line-height: 1; */
}
.auf-button-snippet .icon {
	line-height: 0;
}
.auf-button-snippet svg {
	fill: currentColor;
	width: 100%;
	height: 100%;
}

.auf-button-snippet svg {
    fill: var(--icon-fill);
}
.auf-button-snippet svg {
    stroke: var(--icon-stroke);
}


/* ICON Position */

.auf-button-snippet[data-icon-position="top"]    .button { flex-direction: column; }
.auf-button-snippet[data-icon-position="bottom"] .button { flex-direction: column-reverse; }
.auf-button-snippet[data-icon-position="left"]   .button { flex-direction: row; }
.auf-button-snippet[data-icon-position="right"]  .button { flex-direction: row-reverse; }

/* ICON @ Left OR Right */

.auf-button-snippet[data-horizontal-align="left"]:not([data-icon-position="top"]):not([data-icon-position="bottom"])          .button { justify-content: flex-start;   }
.auf-button-snippet[data-horizontal-align="center"]:not([data-icon-position="top"]):not([data-icon-position="bottom"])        .button { justify-content: center;     }
.auf-button-snippet[data-horizontal-align="right"]:not([data-icon-position="top"]):not([data-icon-position="bottom"])         .button { justify-content: flex-end; }

.auf-button-snippet[data-horizontal-align="space-evenly"]:not([data-icon-position="top"]):not([data-icon-position="bottom"])  .button { justify-content: space-evenly; }
.auf-button-snippet[data-horizontal-align="space-between"]:not([data-icon-position="top"]):not([data-icon-position="bottom"]) .button { justify-content: space-between; }
.auf-button-snippet[data-horizontal-align="space-around"]:not([data-icon-position="top"]):not([data-icon-position="bottom"])  .button { justify-content: space-around; }

.auf-button-snippet[data-vertical-align="top"]:not([data-icon-position="top"]):not([data-icon-position="bottom"])    .button { align-items: flex-start; }
.auf-button-snippet[data-vertical-align="center"]:not([data-icon-position="top"]):not([data-icon-position="bottom"]) .button { align-items: center;     }
.auf-button-snippet[data-vertical-align="bottom"]:not([data-icon-position="top"]):not([data-icon-position="bottom"]) .button { align-items: flex-end;   }

/* ICON @ Top OR Bottom */

.auf-button-snippet[data-horizontal-align="space-evenly"]:not([data-icon-position="left"]):not([data-icon-position="right"])  .button { justify-content: space-evenly; }
.auf-button-snippet[data-horizontal-align="space-between"]:not([data-icon-position="left"]):not([data-icon-position="right"]) .button { justify-content: space-between; }
.auf-button-snippet[data-horizontal-align="space-around"]:not([data-icon-position="left"]):not([data-icon-position="right"])  .button { justify-content: space-around; }

.auf-button-snippet[data-horizontal-align="left"]:not([data-icon-position="left"]):not([data-icon-position="right"])   .button { align-items: flex-start; }
.auf-button-snippet[data-horizontal-align="center"]:not([data-icon-position="left"]):not([data-icon-position="right"]) .button { align-items: center; }
.auf-button-snippet[data-horizontal-align="right"]:not([data-icon-position="left"]):not([data-icon-position="right"])  .button { align-items: flex-end; }

.auf-button-snippet[data-vertical-align="top"]:not([data-icon-position="left"]):not([data-icon-position="right"])    .button { justify-content: flex-start; }
.auf-button-snippet[data-vertical-align="center"]:not([data-icon-position="left"]):not([data-icon-position="right"]) .button { justify-content: center;     }
.auf-button-snippet[data-vertical-align="bottom"]:not([data-icon-position="left"]):not([data-icon-position="right"]) .button { justify-content: flex-end;   }

.auf-button-snippet[data-vertical-align="space-evenly"]:not([data-icon-position="left"]):not([data-icon-position="right"])  .button { justify-content: space-evenly; }
.auf-button-snippet[data-vertical-align="space-between"]:not([data-icon-position="left"]):not([data-icon-position="right"]) .button { justify-content: space-between; }
.auf-button-snippet[data-vertical-align="space-around"]:not([data-icon-position="left"]):not([data-icon-position="right"])  .button { justify-content: space-around; }

/* WIDTHS */

.auf-button-snippet[data-width="1/1"] .wrapper { min-width: 100%;   }
.auf-button-snippet[data-width="2/3"] .wrapper { min-width: 66.66%; }
.auf-button-snippet[data-width="1/2"] .wrapper { min-width: 50%;    }
.auf-button-snippet[data-width="1/3"] .wrapper { min-width: 33.33%; }
.auf-button-snippet[data-width="1/4"] .wrapper { min-width: 25%;    }