/*
 * ESERO knapstilarter til Elementors Knap-widget og Formular-widget (send/næste/forrige)
 * Aktiveres via feltet "ESERO stil" (Stil > Knap / Stil > Knapper) – se inc/elementor-button-styles.php
 * Samme design som Gutenberg-knapperne i css/block-buttons.css (designmanual s. 34)
 *
 * !important er nødvendigt, da Elementor skriver widgettens egne indstillinger
 * med høj specificitet i sidens CSS-fil.
 */

:is(.elementor-widget-button, .elementor-widget-form).esero-btn-lyseblaa {
	--esero-btn-bg: #0098db;
	--esero-btn-bg-hover: #0085c0;
	--esero-btn-color: #ffffff;
}

:is(.elementor-widget-button, .elementor-widget-form).esero-btn-moerkeblaa {
	--esero-btn-bg: #003247;
	--esero-btn-bg-hover: #00486a;
	--esero-btn-color: #ffffff;
}

/* Hvid: hvid knap til brug på blå baggrund */
:is(.elementor-widget-button, .elementor-widget-form).esero-btn-hvid {
	--esero-btn-bg: #ffffff;
	--esero-btn-bg-hover: #e6f4fb;
	--esero-btn-color: #0098db;
}

:is(.elementor-widget-button, .elementor-widget-form).esero-btn-orange {
	--esero-btn-bg: #fbab18;
	--esero-btn-bg-hover: #e89a0a;
	--esero-btn-color: #ffffff;
}

:is(.elementor-widget-button, .elementor-widget-form)[class*="esero-btn-"] .elementor-button {
	padding: 0.85em 1.6em 0.85em 1.1em !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	background: var(--esero-btn-bg) !important;
	color: var(--esero-btn-color) !important;
	fill: var(--esero-btn-color) !important;
	font-family: Verdana, sans-serif !important;
	font-weight: 700 !important;
	letter-spacing: 0.04em !important;
	line-height: 1.2 !important;
	text-align: left;
	text-decoration: none !important;
	transition: background-color 0.2s ease !important;
}

:is(.elementor-widget-button, .elementor-widget-form)[class*="esero-btn-"] .elementor-button:hover,
:is(.elementor-widget-button, .elementor-widget-form)[class*="esero-btn-"] .elementor-button:focus {
	background: var(--esero-btn-bg-hover) !important;
	color: var(--esero-btn-color) !important;
}

:is(.elementor-widget-button, .elementor-widget-form)[class*="esero-btn-"] .elementor-button-content-wrapper {
	display: flex;
	flex-direction: row !important;
	align-items: center;
	gap: 0.9em !important;
	justify-content: flex-start !important; /* også ved fuld bredde */
}

/* Widgettens eget ikon skjules – ESERO-pilen bruges i stedet */
:is(.elementor-widget-button, .elementor-widget-form)[class*="esero-btn-"] .elementor-button-icon {
	display: none !important;
}

/* ESERO-pil (pil.svg) foran teksten */
:is(.elementor-widget-button, .elementor-widget-form)[class*="esero-btn-"] .elementor-button-content-wrapper::before {
	content: "";
	flex: 0 0 auto;
	width: 0.85em;
	height: 1.25em;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 261.37 391.13'%3E%3Cpath d='M65.8 391.13 0 325.33l129.77-129.76L0 65.8 65.8 0l195.57 195.57z'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 261.37 391.13'%3E%3Cpath d='M65.8 391.13 0 325.33l129.77-129.76L0 65.8 65.8 0l195.57 195.57z'/%3E%3C/svg%3E") no-repeat center / contain;
	transition: transform 0.2s ease;
}

:is(.elementor-widget-button, .elementor-widget-form)[class*="esero-btn-"] .elementor-button:hover .elementor-button-content-wrapper::before {
	transform: translateX(3px);
}

:is(.elementor-widget-button, .elementor-widget-form)[class*="esero-btn-"] .elementor-button:focus-visible {
	outline: 2px solid #003247;
	outline-offset: 3px;
}

:is(.elementor-widget-button, .elementor-widget-form).esero-btn-hvid .elementor-button:focus-visible {
	outline-color: #ffffff;
}