/*
 * Basis-Styles für 9-Slice-Elemente.
 * Alles Instanz-spezifische kommt über Custom Properties am Element selbst.
 */

.gns {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	margin: 0;
	background: transparent;
	background-color: transparent;
	border-style: solid;
	border-color: transparent;
	border-radius: 0;
	box-shadow: none;
	border-width: var(--gns-border-width, 0);
	border-image-source: var(--gns-image, none);
	border-image-slice: var(--gns-slice, 0 fill);
	border-image-repeat: var(--gns-repeat, stretch);
	padding: var(--gns-padding, 0);
	color: var(--gns-color, inherit);
	font-family: var(--gns-font-family, inherit);
	font-size: var(--gns-font-size, inherit);
	line-height: 1.2;
	text-decoration: none;
	image-rendering: var(--gns-image-rendering, auto);
}

/* button-Elemente bringen eigene UA-Styles mit, die hier weichen müssen. */
button.gns {
	-webkit-appearance: none;
	appearance: none;
	font-style: inherit;
	font-weight: inherit;
	font-family: var(--gns-font-family, inherit);
	font-size: var(--gns-font-size, inherit);
}

/* Bedienbar ist das Element genau dann, wenn es als a oder button ausgegeben wird. */
.gns--interactive {
	cursor: pointer;
}

.gns--interactive:hover,
.gns--interactive:focus-visible {
	color: var(--gns-color-hover, var(--gns-color, inherit));
	text-decoration: none;
}

/* Banner und Bilder sind Blockelemente, Buttons bleiben inline. */
.gns--banner,
.gns--image {
	display: flex;
}

.gns--banner.gns--interactive,
.gns--image.gns--interactive {
	display: inline-flex;
}