/**
 * core/buttons/navigation
 */

.wp-block-buttons.is-style-navigation {
	--buttons--font-size: 24px;

	flex-direction: column;
	gap: 0;
}

.wp-block-buttons.is-style-navigation .wp-block-button .wp-block-button__link {
	--button--color--background: transparent;
	--button--color--background-hover: var(--wp--preset--color--accent-1);
	--button--color--text: var(--wp--preset--color--base);
	--button--color--text-hover: var(--wp--preset--color--base);
	--button--color--icon: var(--wp--preset--color--accent-4);
	--icon--width: 24px;

	display: block;
	position: relative;
	padding: var(--wp--preset--spacing--20) calc(var(--icon--width) + var(--wp--preset--spacing--20)) var(--wp--preset--spacing--20) 0;
	border: 0;
	border-radius: 0;
	font-family: var(--wp--preset--font-family--secondary);
	font-size: var(--buttons--font-size);
	font-weight: 900;
	letter-spacing: 0;
	line-height: 1;
	text-overflow: ellipsis;
	text-transform: none;
	white-space: nowrap;
	overflow: hidden;
}

/* Icon */
.wp-block-buttons.is-style-navigation .wp-block-button .wp-block-button__link svg {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-end: 0;
	translate: 0 -50%;
}

.wp-block-buttons.is-style-navigation .wp-block-button {
	inline-size: 100%;
	border-block-end: 1px solid var(--wp--preset--color--accent-1);
}

.wp-block-buttons.is-style-navigation .wp-block-button:first-child {
	border-block-start: 1px solid var(--wp--preset--color--accent-1);
}

.wp-block-column:first-child .wp-block-buttons.is-style-navigation .wp-block-button:first-child {
	border-block-start: 0;
}

/* Large font size */
@media (width >= 1200px) {
	.wp-block-buttons.is-style-navigation.has-large-font-size {
		--buttons--font-size: 48px;
	}

	.wp-block-buttons.is-style-navigation .wp-block-button .wp-block-button__link {
		display: flex;
		padding: var(--wp--preset--spacing--20) 0;
		line-height: 1.33;
	}

	.wp-block-buttons.is-style-navigation .wp-block-button .wp-block-button__link svg {
		position: relative;
		inset: auto;
		translate: unset;
	}

	.wp-block-buttons.is-style-navigation .wp-block-button:first-child {
		border-block-start: 0;
	}

	.wp-block-buttons.is-style-navigation .wp-block-button:last-child {
		border-block-end: 0;
	}

	/* Hover state */
	.wp-block-buttons.is-style-navigation .wp-block-button :is(.wp-block-button__link, svg):is(:hover, :active, :focus) {
		translate: 0;
		transition: all 0.3s ease-in-out;
	}

	.wp-block-buttons.is-style-navigation .wp-block-button .wp-block-button__link:is(:hover, :active, :focus) {
		--button--color--icon: var(--wp--preset--color--accent-3);

		padding-inline: var(--wp--preset--spacing--30);
	}
}