/*! Tokens */
:root {
	--hoou-button-transition-in:   background-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, outline-color 0.2s ease-in-out, outline-offset 0.2s ease-in-out;
	--transition-btn-out: background-color 0.4s ease-in-out, color 0.4s ease-in-out, box-shadow 0.4s ease-in-out, outline-color 0.4s ease-in-out, outline-offset 0.4s ease-in-out;
}


/*! Base Button */
a.hoou-button,
.hoou-button {
	display: inline-flex;
	padding: 16px 40px;
	justify-content: center;
	align-items: center;
	text-align: center;
	gap: 8px;
	border-radius: 6px;
	border: var(--hoou-button-border, none);
	font-family: 'Poppins', sans-serif;
	font-size: 14px;
	font-weight: 600;
	line-height: 24px;
	letter-spacing: 0.3px;
	outline: none;
	transition: var(--transition-btn-out);
	cursor: pointer;
	text-decoration: none;
	box-shadow: unset;


	--hoou-button-text-default: currentColor;
	--hoou-button-text-hover: currentColor;
	--hoou-button-text-focus: currentColor;
	--hoou-button-text-active: currentColor;
	--hoou-button-text-disabled: var(--hoou-grau-800);

	--hoou-button-surface-default: transparent;
	--hoou-button-surface-hover: transparent;
	--hoou-button-surface-focus: transparent;
	--hoou-button-surface-active: transparent;
	--hoou-button-surface-disabled: var(--hoou-hellgrau);

	--hoou-button-focus-ring: var(--hoou-extrablau);

	--hoou-icon-size: 24px;

	color: var(--hoou-button-text-default);
	background: var(--hoou-button-surface-default);
}

/*! States */
@media (hover: hover) and (pointer: fine) {
	.hoou-button:hover {
		color: var(--hoou-button-text-hover);
		background: var(--hoou-button-surface-hover);
		transition: var(--hoou-button-transition-in);
		text-decoration: none;
		font-weight: 600;
	}
}

.hoou-button:focus-visible {
	color: var(--hoou-button-text-hover);
	background: var(--hoou-button-surface-hover);
	outline: 2px solid var(--hoou-button-focus-ring);
	outline-offset: 2px;
}

.hoou-button:active{
	color: var(--hoou-button-text-active);
	background: var(--hoou-button-surface-active);
	transition: var(--hoou-button-transition-in);
}

.hoou-button:disabled {
	color: var(--hoou-button-text-disabled);
	background: var(--hoou-button-surface-disabled);
	cursor: default;
	transition: var(--hoou-button-transition-in);
}

.hoou-button.secondary:focus-visible {
	box-shadow: none;
	border: none;
}


/*! Primary (Light) */
.hoou-button.primary {
	--hoou-button-text-default: var(--hoou-weiss);
	--hoou-button-text-hover: var(--hoou-blau);
	--hoou-button-text-active: var(--hoou-blau);

	--hoou-button-surface-default: var(--hoou-blau);
	--hoou-button-surface-hover: var(--hoou-extrablau);
	--hoou-button-surface-active: var(--hoou-extrablau-600);
	--hoou-button-surface-disabled: var(--hoou-hellgrau);}


/*! Primary (Dark) */
.dark {
	&,
	& > * {
		> .hoou-button.primary {
			--hoou-button-text-default: var(--hoou-blau);
			--hoou-button-surface-default: var(--hoou-weiss);
			--hoou-button-surface-hover: var(--hoou-extrablau);
			--hoou-button-surface-active: var(--hoou-extrablau-600);
			--hoou-button-focus-ring: var(--hoou-extrablau);
		}
	}
}


/*! Secondary (Light) */
.hoou-button.secondary {
	--hoou-button-text-default:   var(--hoou-blau);
	--hoou-button-text-hover:     var(--hoou-blau);
	--hoou-button-text-active:    var(--hoou-blau);
	--hoou-button-text-disabled:  var(--hoou-grau);

	--hoou-button-surface-default:  var(--hoou-weiss);
	--hoou-button-surface-hover:    var(--hoou-extrablau);
	--hoou-button-surface-focus:    var(--hoou-extrablau);
	--hoou-button-surface-active:   var(--hoou-extrablau-600);
	--hoou-button-surface-disabled: var(--hoou-weiss);

	box-shadow: inset 0 0 0 2px currentColor;
	--hoou-button-focus-ring: var(--hoou-extrablau);
}


/*! Secondary (Dark) */
.dark {
	&,
	& > * {
		> .hoou-button.secondary {
		--hoou-button-text-default:    var(--hoou-weiss);
		--hoou-button-text-hover:      var(--hoou-weiss);
		--hoou-button-text-active:     var(--hoou-weiss);
		--hoou-button-text-disabled:   var(--hoou-grau-800);
		
		--hoou-button-surface-default:  transparent;
		--hoou-button-surface-hover:    var(--hoou-extrablau-700);
		--hoou-button-surface-focus:    var(--hoou-extrablau-700);
		--hoou-button-surface-active:   var(--hoou-extrablau-800);
		--hoou-button-surface-disabled: transparent;
		
		box-shadow: inset 0 0 0 2px currentColor;
		--hoou-button-focus-ring: var(--hoou-extrablau);		}
	}
}

.dark {
	&,
	& > * {
		> .hoou-button.secondary {
			&:is(:focus-visible) {
				box-shadow: none;
				border: none;
			}
		}
	}
}


/*! Tertiary (Light) */
.hoou-button.tertiary {
	--hoou-button-text-default: var(--hoou-blau);
	--hoou-button-text-hover: var(--hoou-blau);
	--hoou-button-text-active: var(--hoou-blau);
	--hoou-button-text-disabled: var(--hoou-grau-800);

	--hoou-button-surface-default: var(--hoou-grau);
	--hoou-button-surface-hover: var(--hoou-grau-300);
	--hoou-button-surface-active: var(--hoou-grau-600);
	--hoou-button-surface-disabled: var(--hoou-hellgrau);

	--hoou-button-focus-ring: var(--hoou-blau);
}


/*! Tertiary (Dark) */
.dark {
	&,
	& > *{
		> .hoou-button.tertiary {
			--hoou-button-focus-ring: var(--hoou-weiss);
		}
	}
}


/*! Naked (Theme + Surface/Text) */
.hoou-button.naked {
	--hoou-button-text-default: var(--hoou-blau);
	--hoou-button-text-hover: var(--hoou-blau);
	--hoou-button-text-active: var(--hoou-blau);
	
	--hoou-button-surface-default: transparent;
	--hoou-button-surface-hover: var(--hoou-grau-300);
	--hoou-button-surface-focus: var(--hoou-extrablau-600);
	--hoou-button-surface-active: var(--hoou-grau-600);
	--hoou-button-surface-disabled: transparent;
	
	--hoou-button-focus-ring: var(--hoou-blau);
}

.dark {
	&,
	& > * {
		> .hoou-button.naked {
			--hoou-button-focus-ring: var(--hoou-weiss);
			--hoou-button-text-default: var(--hoou-blau);
			--hoou-button-surface-default: transparent;
			--hoou-button-surface-hover: var(--hoou-weiss);
			--hoou-button-surface-focus: var(--hoou-weiss);
			--hoou-button-surface-active: var(--hoou-weiss);
			--hoou-button-surface-disabled: transparent;
		}
	}
}


/*! Size System (Large / Medium) */
/* Large (default) */
.hoou-button {
	padding-top: 16px;
	padding-bottom: 16px;
	padding-left: 40px;
	padding-right: 40px;
}

/* Medium */
.hoou-button.is-medium {
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 16px;
	padding-right: 16px;
	line-height: 20px;
	--hoou-icon-size: 20px;
}


/*! Icon Layout (Left / Right / Only) */
/* Icon right (default .icons-enabled) */
.hoou-button.icons-enabled {
	padding-right: 28px;   /* Large: 28; Medium bleibt 16 (s.u. Override) */
	padding-left: 40px;
}

/* Icon left */
.hoou-button.icon-left {
	flex-direction: row-reverse;
	padding-left: 28px;    /* Large: 28; Medium bleibt 16 (s.u. Override) */
	padding-right: 40px;
}

/* Icon-only (square) */
.hoou-button.icon-only {
	padding: 16px;
}

/* Medium overrides for icon paddings */
.hoou-button.is-medium.icons-enabled {
	padding-right: 16px;
	padding-left: 16px;
}

.hoou-button.is-medium.icon-left {
	padding-left: 16px;
	padding-right: 16px;
}

.hoou-button.is-medium.icon-only {
	padding: 10px;
}

.hoou-button.icons-enabled::before,
.hoou-button.icons-enabled i::before,
.hoou-button.icons-enabled svg,
.hoou-button.icon-only::before,
.hoou-button.icon-only i::before,
.hoou-button.icon-only svg {
	width: var(--hoou-icon-size, 24px);
	height: var(--hoou-icon-size, 24px);
	display: inline-block;
	flex: 0 0 var(--hoou-icon-size, 24px);
	vertical-align: middle;
}

.hoou-button svg {
	width: var(--hoou-icon-size);
	height: var(--hoou-icon-size);
	fill: none;
	stroke: currentColor;
	vertical-align: middle;
}

.hoou-button.icons-enabled::before,
.hoou-button.icons-enabled i::before,
.hoou-button.icons-enabled svg {
	margin-inline-start: 0.5em;
	margin-inline-end: 0;
}

.hoou-button.icon-left::before,
.hoou-button.icon-left i::before,
.hoou-button.icon-left svg {
	margin-inline-start: 0;
	margin-inline-end: 0.5em;
}

.hoou-button.icon-only {
	padding: 16px;
}

.hoou-button.icon-only::before,
.hoou-button.icon-only i::before,
.hoou-button.icon-only svg {
	margin: 0;
}

/*! Mobile Fullwidth */
@media only screen and (max-width: 575px) {
	.hoou-button.primary:not(.icon-only),
	.hoou-button.secondary:not(.icon-only),
	.hoou-button.tertiary:not(.icon-only) {
		width: 100%;
	}
}