/* Required to animate the rotation prop */
@property --rotate_arrow__btn {
	syntax: "<number>";
	initial-value: 0;
}

@property --bg_color__btn {
	syntax: "<color>";
}

.wp-block-read-more {
	&.is-style-arrow {
		--bg_color__btn: var(--wp--preset--color--secondary);
		--bg_color_arrow__btn: var(--wp--preset--color--white);
		--bg_hover__btn: var(--wp--preset--color--light-grey);
		--bg_hover_arrow__btn: var(--wp--preset--color--secondary);
		--text_color__btn: var(--wp--preset--color--white);
		--text_hover__btn: #000;
		--arrow_icon: var(--arrow);
		--arrow_icon_hover: var(--arrow_white);

		background-color: var(--bg_color__btn) !important;
		transition: all 0.3s ease-in-out;
		padding-block: 6px;
		padding-inline-start: 6px;
		padding-inline-end: 16px;
		display: flex;
		align-items: center;
		gap: 12px;
		color: var(--text_color__btn);
		font-size: 16px;
		letter-spacing: 2.56px;
		font-weight: 600;
		&:before {
			/* TODO: SVG ARROW */
			transition: rotate 0.3s ease-in-out;
			transform-origin: center center;
			content: var(--arrow_icon);
			display: inline-block;
			padding: 13px;
			width: 16px;
			height: 16px;
			text-align: center;
			border-radius: 100vw;
			aspect-ratio: 1;

			/* Override these properties by colour variant/hover state */
			background-color: var(--bg_color_arrow__btn) !important;
			color: var(
				--color_arrow__btn,
				var(--wp--preset--color--primary, #000)
			) !important;
			rotate: var(--rotate_arrow__btn, -90deg);
		}
	}

	/* Color variants */
	&.is-style-arrow.has-white-background-color {
		--bg_color__btn: var(--wp--preset--color--white) !important;
		--bg_hover__btn: var(--wp--preset--color--secondary) !important;
		--bg_color_arrow__btn: var(--wp--preset--color--secondary) !important;
		--bg_hover_arrow__btn: var(--wp--preset--color--white) !important;
		--text_hover__btn: var(--wp--preset--color--white) !important;
		--arrow_icon: var(--arrow_white);
		--arrow_icon_hover: var(--arrow);
	}

	&.is-style-arrow.has-transparent-background-color {
		--bg_color__btn: var(--wp--preset--color--transparent) !important;
		--bg_hover__btn: var(--wp--preset--color--transparent) !important;
		--bg_color_arrow__btn: var(--preset--color--transparent) !important;
		--bg_hover_arrow__btn: var(--preset--color--transparent) !important;
		--arrow_icon: var(--arrow_gold);
		--arrow_icon_hover: var(--arrow_gold);
		--text_hover__btn: var(--wp--preset--color--white);
		&:not(.wp-block-cover *) {
			--text_hover__btn: var(--wp--preset--color--primary);
		}
	}

	&.is-style-arrow:hover {
		--rotate_arrow__btn: -45deg;
		background-color: var(--bg_hover__btn) !important;
		color: var(--text_hover__btn) !important;
		&:before {
			content: var(--arrow_icon_hover);
			background-color: var(--bg_hover_arrow__btn) !important;
		}
	}
}