/**
 * NEOS Buttons – Styles für Frontend und Editor.
 *
 * Alles, wofür es im Block eine Einstellung gibt, wird mit !important gesetzt.
 * Grund: Themes stylen Links und Buttons oft selbst mit !important oder mit sehr
 * starken Selektoren. Was im Block eingestellt ist, soll immer gewinnen.
 */

.neos-buttons {
	--nb-gap: 12px;

	--nb-text: #fff;
	--nb-bg: #cb1967;
	--nb-border: transparent;
	--nb-border-w: 0px;

	--nb-duration: 250ms;
	--nb-ease: ease-out;

	--nb-radius: 60px;
	--nb-px: 28px;
	--nb-py: 14px;
	--nb-size: 17px;
	--nb-weight: 700;

	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--nb-gap);
	margin: 0;
	padding: 0;
}

/* --- Ausrichtung --------------------------------------------------- */

.neos-buttons.is-align-left,
.wp-block-neos-buttons.is-align-left {
	justify-content: flex-start;
}

.neos-buttons.is-align-center,
.wp-block-neos-buttons.is-align-center {
	justify-content: center;
}

.neos-buttons.is-align-right,
.wp-block-neos-buttons.is-align-right {
	justify-content: flex-end;
}

.neos-buttons.is-align-space-between,
.wp-block-neos-buttons.is-align-space-between {
	justify-content: space-between;
}

.neos-buttons .neos-buttons__item {
	display: inline-flex;
	max-width: 100%;
	margin: 0 !important;
	padding: 0 !important;
}

/* --- Button -------------------------------------------------------- */

.neos-buttons .neos-buttons__item .neos-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	max-width: 100%;
	cursor: pointer;
	text-align: center;

	/* Werte aus den Block-Einstellungen */
	padding: var(--nb-py) var(--nb-px) !important;
	border-style: solid !important;
	border-width: var(--nb-border-w) !important;
	border-color: var(--nb-border) !important;
	border-radius: var(--nb-radius) !important;
	background-color: var(--nb-bg) !important;
	background-image: none !important;
	color: var(--nb-text) !important;
	font-size: var(--nb-size) !important;
	font-weight: var(--nb-weight) !important;
	line-height: 1.2 !important;
	text-decoration: none !important;

	/* Theme-Effekte, die die eingestellten Farben verfälschen würden */
	box-shadow: none !important;
	text-shadow: none !important;
	filter: none !important;
	opacity: 1 !important;
	transform: none !important;

	transition:
		background-color var(--nb-duration) var(--nb-ease),
		color var(--nb-duration) var(--nb-ease),
		border-color var(--nb-duration) var(--nb-ease) !important;
}

/* --- Hover / Fokus / aktiv ------------------------------------------ */

.neos-buttons .neos-buttons__item .neos-button:hover,
.neos-buttons .neos-buttons__item .neos-button:focus,
.neos-buttons .neos-buttons__item .neos-button:focus-visible,
.neos-buttons .neos-buttons__item .neos-button:active {
	/* Leere Hover-Werte fallen auf den Normalzustand zurück. */
	background-color: var(--nb-bg-h, var(--nb-bg)) !important;
	background-image: none !important;
	color: var(--nb-text-h, var(--nb-text)) !important;
	border-color: var(--nb-border-h, var(--nb-border)) !important;
	text-decoration: none !important;
	box-shadow: none !important;
	filter: none !important;
	opacity: 1 !important;
	transform: none !important;
}

/* Mausklick soll den Hover-Zustand nicht dauerhaft stehen lassen. */
.neos-buttons .neos-buttons__item .neos-button:focus:not(:focus-visible):not(:hover) {
	background-color: var(--nb-bg) !important;
	color: var(--nb-text) !important;
	border-color: var(--nb-border) !important;
}

.neos-buttons .neos-buttons__item .neos-button:focus-visible {
	outline: 2px solid currentColor !important;
	outline-offset: 3px !important;
}

@media (prefers-reduced-motion: reduce) {
	.neos-buttons .neos-buttons__item .neos-button {
		transition: none !important;
	}
}