/*
 * Button 038 (Osmo Supply resource), restyled with Stuurmaat's tokens.
 * Structure, data-attributes and the hover/stagger approach are untouched.
 * A `.button-038--tail` modifier was added to reproduce the Figma "Btn"
 * component, which appends a small arrow box after the pill.
 */
:root {
	--button-038-color: var(--sm-white);
	--button-038-color-background: var(--sm-green);
	--button-038-color-focus: var(--sm-darkblue);
	--button-038-padding: 16px;
	--button-038-border-radius: 0px;
	--button-038-focus-inset: -0.125em;
	--button-038-stagger: 0.015s;
	--button-038-ease-hover: cubic-bezier(0.625, 0.05, 0, 1);
	--button-038-ease-focus: cubic-bezier(0.32, 0.72, 0, 1);
}

.button-038 {
	color: var(--button-038-color);
	-webkit-user-select: none;
	user-select: none;
	background-color: transparent;
	outline-style: none;
	padding: 0;
	line-height: 1;
	text-decoration: none;
	font-family: var(--sm-font-body);
	font-weight: 500;
	font-size: 16px;
	display: inline-grid;
	position: relative;
	-webkit-tap-highlight-color: transparent;
}

.button-038::after {
	content: '';
	display: block;
	position: absolute;
	inset: var(--button-038-focus-inset);
	border-radius: var(--button-038-border-radius);
	transition: box-shadow 0.3s var(--button-038-ease-focus), scale 0.45s var(--button-038-ease-hover);
	pointer-events: none;
	z-index: 1;
}

.button-038:is(:focus-visible)::after {
	box-shadow: 0 0 0 0.125em var(--button-038-color-focus);
	scale: var(--button-038-scale-x) var(--button-038-scale-y);
	transition: box-shadow 0.3s var(--button-038-ease-focus), scale 0.55s 0.05s var(--button-038-ease-hover);
}

.button-038__bg {
	background-color: var(--button-038-color-background);
	border-radius: var(--button-038-border-radius);
	grid-area: 1 / 1;
	width: 100%;
	height: 100%;
	padding: 0;
	transition: scale 0.45s var(--button-038-ease-hover);
}

.button-038__inner {
	width: 100%;
	height: 100%;
	padding: var(--button-038-padding);
	grid-area: 1 / 1;
	justify-content: center;
	align-items: center;
	display: flex;
	gap: 0.5em;
}

.button-038__text {
	clip-path: inset(-10% 0%);
}

.button-038__text span {
	will-change: transform;
	display: inline-block;
	white-space: nowrap;
	translate: 0 0 0;
	text-shadow: 0px 1.3em currentColor;
	transition: translate 0.6s calc(var(--index) * var(--button-038-stagger)) var(--button-038-ease-hover);
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
	.button-038:is(:hover, :focus-visible) .button-038__bg,
	[data-hover]:is(:hover, :focus-visible) .button-038 .button-038__bg {
		scale: var(--button-038-scale-x) var(--button-038-scale-y);
		transition: scale 0.55s 0.05s var(--button-038-ease-hover);
	}

	.button-038:is(:hover, :focus-visible) .button-038__text span,
	[data-hover]:is(:hover, :focus-visible) .button-038 .button-038__text span {
		translate: 0 -1.3em 0;
		transition: translate 0.6s calc(var(--index) * var(--button-038-stagger) + 0.05s) var(--button-038-ease-hover);
	}
}

/* Variants matching the Figma "Btn" component exactly (node 303:2340) —
   style=Primary/Secundary/txt × size=big/sm × icon×position — including
   its square corners (no border-radius) and fixed 16px padding at every
   size, rather than Button 038's own default rounded/em-scaled look. */

/* size=big: 21.705px SemiBold. Default (no modifier) is size=sm: 16px
   Medium, already the base font-size/weight above. */
.button-038--big {
	font-size: 21.705px;
	font-weight: 600;
}

/* style=Secundary: green 2px border + green text, transparent bg. */
.button-038--outline {
	--button-038-color: var(--sm-green);
	--button-038-color-background: transparent;
}
.button-038--outline .button-038__bg {
	border: 2px solid var(--sm-green);
}
/* Color override used for specific instances (e.g. "Aan boord halen")
   that use the same Secundary shape in navy instead of green. */
.button-038--navy.button-038--outline {
	--button-038-color: var(--sm-navy);
}
.button-038--navy.button-038--outline .button-038__bg {
	border-color: var(--sm-navy);
}

.button-038--on-dark {
	--button-038-color: var(--sm-white);
}
.button-038--on-dark.button-038--outline {
	--button-038-color: var(--sm-lightblue);
}
.button-038--on-dark.button-038--outline .button-038__bg {
	border-color: var(--sm-lightblue);
}

/* style=txt: no pill background, just a bottom border that grows in on
   hover — same animated-underline treatment as .u-link. Text/border are
   green by default, matching Secundary's default color. */
.button-038--underline {
	--button-038-color: var(--sm-green);
	--button-038-padding: 16px 0;
}
.button-038--underline .button-038__bg { display: none; }
.button-038--underline .button-038__inner { padding: 0; }
.button-038--underline .button-038__text {
	/* The base .button-038__text uses clip-path: inset(-10% 0%), which
	   deliberately lets a little overflow through so the hover flip's
	   incoming duplicate line isn't clipped mid-slide — the filled/outline
	   variants get away with it because their solid background covers
	   that sliver. This variant has no background, so that same overflow
	   left the hover-flip's resting duplicate (offset 1.3em below via
	   text-shadow) visible as a ghost line under the button at rest; a
	   tight inset(0) here clips it while still leaving the flip intact
	   (it only ever needs to be visible once translated into place). */
	clip-path: inset(0);
	background-image: linear-gradient(currentColor, currentColor);
	background-size: 0% 2px;
	background-position: 0 100%;
	background-repeat: no-repeat;
	padding-bottom: 0.3em;
	transition: background-size 0.35s ease;
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
	.button-038--underline:is(:hover, :focus-visible) .button-038__text {
		background-size: 100% 2px;
	}
}
.button-038--underline.button-038--on-dark { --button-038-color: var(--sm-white); }
.button-038--underline.button-038--navy { --button-038-color: var(--sm-navy); }

/* Compact pill, used for the nav's contact-bar items (email/WhatsApp) —
   not part of the Figma Btn component, rounded on purpose to match the
   nav pill's own language instead. */
.button-038--pill {
	--button-038-color: var(--sm-navy);
	--button-038-color-background: var(--sm-nav-active);
	--button-038-padding: 8px 16px;
	--button-038-border-radius: 4px;
	font-size: 15px;
	font-weight: 500;
}
.button-038--pill.button-038--green {
	--button-038-color: var(--sm-white);
	--button-038-color-background: var(--sm-green);
}
.button-038__icon { width: 1em; height: 1em; flex-shrink: 0; }

/* The tail icon (icon-arrow-tail-left/right.svg) sits flush against the
   button itself — no gap, no padding on that inner edge — on a solid
   dark-blue backdrop, 16px padding only on the outer edge (the side away
   from the button). Both the button and the tail are fixed to 50px tall,
   the icon filling that height completely. */
.button-038__tail {
	background-color: var(--sm-darkblue);
	height: 50px;
	display: flex;
	align-items: center;
	flex-shrink: 0;
	position: relative;
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
}
/* The vector deliberately projects beyond the coloured tail box. Extend
   the anchor's hit target into that visible tip, so tapping the icon and
   tapping the text are equivalent on touch devices as well as desktop. */
.button-038__tail::before {
	content: '';
	position: absolute;
	inset: -4px -4px -4px -44px;
}
.button-038__tail-icon {
	height: 100%;
	aspect-ratio: 38 / 63;
	background-color: var(--sm-lightblue);
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}
/* Used on the purple logos section: inverted from the default dark-blue
   box / light-blue icon to a light-blue box / dark-blue icon. */
.button-038--tail-light .button-038__tail { background-color: var(--sm-lightblue); }
.button-038--tail-light .button-038__tail-icon { background-color: var(--sm-darkblue); }
.button-038--tail {
	display: inline-flex;
	align-items: stretch;
	height: 50px;
}
.button-038--tail .button-038 {
	display: inline-grid;
}
.button-038--tail-leading {
	flex-direction: row-reverse;
}
/* Default DOM order is [button, tail] — trailing: tail's left edge touches
   the button, so the outer padding goes on its right. */
.button-038--tail:not(.button-038--tail-leading) .button-038__tail {
	padding-right: 16px;
}
/* row-reverse flips the leading tail to visually sit on the left — its
   right edge now touches the button, so the outer padding goes on its
   left. */
.button-038--tail-leading .button-038__tail {
	padding-left: 16px;
}
.button-038--tail-leading .button-038__tail::before {
	inset: -4px -44px -4px -4px;
}