/**
 * Look of the button types registered by AM_Kit_Button_Types.
 *
 * Elementor turns the "Type" value into a wrapper class, so every rule below is
 * scoped to `.elementor-button-<type key>`. Shape only: colour, typography,
 * padding and hover stay in the editor panel, and none of these rules raise
 * their specificity above Elementor's generated CSS so the panel always wins.
 */

/*
 * Arrow types: flat hexagon with a pointed cap on each side. The variants only
 * differ in the bevel colour - a light rim for dark fills (Arrow), a dark one
 * for light fills (Arrow Light) - so the shape is declared once.
 *
 * The bevel has to follow all six edges, diagonals included. A plain inset
 * box-shadow cannot: it is drawn along the rectangle and the clip-path cuts it
 * away at both caps. So the rim is built from two stacked hexagons instead:
 *   - the button itself is tinted with the bevel colour, edge to edge (a huge
 *     inset spread over the fill set in the panel);
 *   - ::before lays a second hexagon, inset by the rim width, painted with that
 *     same panel fill (`background-color: inherit`, so hover still works),
 *     between the tint and the label.
 * What is left of the tint between the two outlines is the rim.
 *
 * The widget's own Box Shadow control would replace the tint - leave it empty.
 */
.elementor-button-am-arrow .elementor-button,
.elementor-button-am-arrow-light .elementor-button {
	--am-kit-arrow-cap: 8px;
	--am-kit-arrow-rim: 2px;
	--am-kit-arrow-shape: polygon(
		0 50%,
		var( --am-kit-arrow-cap ) 0,
		calc( 100% - var( --am-kit-arrow-cap ) ) 0,
		100% 50%,
		calc( 100% - var( --am-kit-arrow-cap ) ) 100%,
		var( --am-kit-arrow-cap ) 100%
	);

	position: relative;
	isolation: isolate;
	clip-path: var( --am-kit-arrow-shape );
	box-shadow: inset 0 0 0 100vmax var( --am-kit-arrow-bevel );
}

.elementor-button-am-arrow .elementor-button::before,
.elementor-button-am-arrow-light .elementor-button::before {
	content: "";
	position: absolute;
	inset: var( --am-kit-arrow-rim );
	z-index: -1;
	background-color: inherit;
	clip-path: var( --am-kit-arrow-shape );
	/* Soften the inner outline, as the blurred shadow in the design does. */
	filter: blur( 1px );
}

.elementor-button-am-arrow .elementor-button {
	--am-kit-arrow-bevel: rgba( 255, 255, 255, 0.5 );
}

/* Pair with a light fill in the panel, #F0E8DD in the design. */
.elementor-button-am-arrow-light .elementor-button {
	--am-kit-arrow-bevel: rgba( 34, 34, 34, 0.5 );
}