/*
 * Button classes shared by nomon/button, PHP templates and WooCommerce markup.
 * Spec: docs/migration/design.md §1.8.
 */

/* Repeated from main.css so the order holds in the editor iframe, where this file may load first. */
@layer theme, base, components, utilities;

@layer components {
	.button-white,
	.button-black,
	.button-text,
	.btn-primary {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 10px;
		border: 0;
		border-radius: 0;
		font-family: inherit;
		font-weight: 500;
		text-align: center;
		text-decoration: none;
		cursor: pointer;
	}

	.button-white,
	.button-black,
	.button-text {
		letter-spacing: 0.5px;
		line-height: 1.7;
		transition: all 0.2s;
	}

	.button-white,
	.button-black {
		padding: 9px 18px;
		font-size: 16px;
	}

	.button-white {
		background: var(--wp--preset--color--white);
		color: var(--wp--preset--color--text);
	}

	.button-white:hover {
		background: var(--wp--preset--color--black);
		color: var(--wp--preset--color--sand);
	}

	.button-black {
		background: var(--wp--preset--color--black);
		color: var(--wp--preset--color--white);
	}

	.button-black:hover {
		background: var(--wp--preset--color--grey);
	}

	.button-text {
		padding: 0;
		background: none;
		color: var(--wp--preset--color--black);
		font-size: 15px;
	}

	.button-text:hover {
		text-decoration: underline;
	}

	.btn-primary {
		padding: 8px 16px;
		background: var(--wp--preset--color--black);
		color: var(--wp--preset--color--white);
		font-size: 16px;
		line-height: 1.44;
	}

	.button-arrow {
		flex-shrink: 0;
		width: auto;
		height: 10px;
		transition: transform 0.2s;
	}

	:is(a, .button-white, .button-black):hover .button-arrow {
		transform: translateX(4px);
	}
}