/* Reset & Common styles */
.wp-block-button[class*="is-style-ohp-button"] .wp-element-button {
	box-shadow: none;
	transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out;
	font-weight: 500;
	margin: 0;
	border-radius: var(--wp--preset--spacing--xl);
}

/* Color variants */
.wp-block-button[class*="is-style-ohp-button-black"] .wp-element-button,
.editor-styles-wrapper [class*="is-style-ohp-button-black"] .wp-block-button__link {
	background-color: var(--wp--preset--color--foreground);
	color: var(--wp--preset--color--background);
	border: 1px solid var(--wp--preset--color--foreground);
}

.wp-block-button[class*="is-style-ohp-button-black"]:hover .wp-element-button,
.editor-styles-wrapper [class*="is-style-ohp-button-black"]:hover .wp-block-button__link {
	background-color: var(--wp--preset--color--background);
	color: var(--wp--preset--color--foreground);
}

.wp-block-button[class*="is-style-ohp-button-stroke"]:not([class*="is-style-ohp-button-stroke-alt"]) .wp-element-button,
.editor-styles-wrapper
	[class*="is-style-ohp-button-stroke"]:not([class*="is-style-ohp-button-stroke-alt"])
	.wp-block-button__link {
	background-color: var(--wp--preset--color--background);
	color: var(--wp--preset--color--foreground);
	border: 1px solid var(--wp--preset--color--foreground);
}

.wp-block-button[class*="is-style-ohp-button-stroke"]:not([class*="is-style-ohp-button-stroke-alt"]):hover
	.wp-element-button,
.editor-styles-wrapper
	[class*="is-style-ohp-button-stroke"]:not([class*="is-style-ohp-button-stroke-alt"]):hover
	.wp-block-button__link {
	background-color: var(--wp--preset--color--foreground);
	color: var(--wp--preset--color--background);
}

.wp-block-button[class*="is-style-ohp-button-stroke-alt"] .wp-element-button,
.editor-styles-wrapper [class*="is-style-ohp-button-stroke-alt"] .wp-block-button__link {
	background-color: var(--wp--preset--color--background);
	color: var(--wp--preset--color--accent-02);
	border: 1px solid var(--wp--preset--color--neutral-80);
}

.wp-block-button[class*="is-style-ohp-button-stroke-alt"]:hover .wp-element-button,
.editor-styles-wrapper [class*="is-style-ohp-button-stroke-alt"]:hover .wp-block-button__link {
	background-color: var(--wp--preset--color--neutral-90);
	color: var(--wp--preset--color--accent-01);
	/* border: 1px solid var(--wp--preset--color--foreground); */
}

.wp-block-button[class*="is-style-ohp-button-accent"] .wp-element-button,
.editor-styles-wrapper [class*="is-style-ohp-button-accent"] .wp-block-button__link {
	background-color: var(--wp--preset--color--accent-01);
	color: var(--wp--preset--color--background);
	border: 1px solid var(--wp--preset--color--accent-01);
}

.wp-block-button[class*="is-style-ohp-button-accent"]:hover .wp-element-button,
.editor-styles-wrapper [class*="is-style-ohp-button-accent"]:hover .wp-block-button__link {
	background-color: var(--wp--preset--color--accent-02);
	border-color: var(--wp--preset--color--accent-02);
}

/* Sizing variants */
.wp-block-button[class*="is-style-ohp-button"][class*="-small"] .wp-element-button,
.editor-styles-wrapper [class*="is-style-ohp-button"][class*="-small"] .wp-block-button__link {
	padding: var(--wp--preset--spacing--2-xs) var(--wp--preset--spacing--s);
	font-size: var(--wp--preset--font-size--link-1);
	line-height: var(--wp--preset--line-height--xs);
}

.wp-block-button[class*="is-style-ohp-button"][class*="-medium"] .wp-element-button,
.editor-styles-wrapper [class*="is-style-ohp-button"][class*="-medium"] .wp-block-button__link {
	padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--sm);
	font-size: var(--wp--preset--font-size--link-2);
	line-height: var(--wp--preset--line-height--s);
}

/* Link variant */

.wp-block-button[class*="is-style-ohp-button-link"] .wp-element-button,
.editor-styles-wrapper [class*="is-style-ohp-button-link"] .wp-block-button__link {
	position: relative;
	padding: 0;
	font-size: var(--wp--preset--font-size--link-2);
	background: none;
	border: none;
	color: var(--wp--preset--color--foreground);
	line-height: 1.4em;
	text-decoration: none;
}

.wp-block-button[class*="is-style-ohp-button-link"] .wp-element-button::before,
.editor-styles-wrapper [class*="is-style-ohp-button-link"] .wp-block-button__link::before {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 1px;
	background-color: currentColor;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.2s ease-in-out;
}

.wp-block-button[class*="is-style-ohp-button-link"] .wp-element-button::after,
.editor-styles-wrapper [class*="is-style-ohp-button-link"] .wp-block-button__link::after {
	content: "";
	position: absolute;
	left: calc(100% + var(--wp--preset--spacing--2-xs));
	top: 50%;
	transform: translateY(-50%);
	display: block;
	aspect-ratio: 1;
	height: 100%;
	mask-image: url("../images/chevron.svg");
	mask-size: contain;
	mask-repeat: no-repeat;
	mask-position: center center;
	background-color: currentColor;
}

.wp-block-button[class*="is-style-ohp-button-link"]:hover .wp-element-button::before,
.editor-styles-wrapper [class*="is-style-ohp-button-link"]:hover .wp-block-button__link::before {
	transform: scaleX(1);
}