/* stylelint-disable selector-class-pattern */

.wp-element-button.wp-element-button {
	all: unset;
	display: contents;

	&[href] {
		cursor: pointer;
	}
}

.button,
.button\/primary,
.button\/accent,
.button\/outline,
.button\/underline,
.button\/icon {
	position: relative;
	font-size: 1em;
	font-family: var(--font-sans);
	font-weight: 500;
	line-height: 1;
	letter-spacing: -0.03em;
	transition-property: all;
	transition-duration: 300ms;
	transition-timing-function: var(--ease-out);
	-webkit-tap-highlight-color: transparent;
	box-sizing: border-box;
	cursor: pointer;

	&:disabled {
		cursor: not-allowed;
		opacity: 0.5;
	}
}

.button,
.button\/primary,
.button\/accent {
	--button-shadow: var(--transparent);
	--button-border: var(--transparent);
	--button-background: var(--transparent);

	background: hsl(var(--button-background));
	border-style: solid;
	border-width: 1px;
	border-color: hsl(var(--button-border));

	filter: drop-shadow(0 0 0 hsl(var(--button-shadow) / 0.1))
		drop-shadow(0 0 0 hsl(var(--button-shadow) / 0.1));

	&:hover,
	.group\/button:hover & {
		filter: drop-shadow(0 8px 4px hsl(var(--button-shadow) / 0.1))
			drop-shadow(0 4px 2px hsl(var(--button-shadow) / 0.15));
	}

	&:active,
	.group\/button:active & {
		transition-duration: 100ms;
		filter: drop-shadow(0 2px 3px hsl(var(--button-shadow) / 0.1))
			drop-shadow(0 1px 2px hsl(var(--button-shadow) / 0.1));
	}
}

.button {
	/* --button-shadow: var(--fg-1); */
}

.button\/accent {
	/* --button-shadow: var(--accent-1); */
	--button-border: var(--accent-1);
	--button-background: var(--accent-1);
}

.button\/primary {
	/* --button-shadow: var(--primary-1); */
	--button-border: var(--primary-1);
	--button-background: var(--primary-1);
}

.button\/outline {
	background: transparent;
	border: solid 1px currentColor;

	&:hover {
		background: hsl(var(--white) / 0.1);
	}

	&:active {
		background: hsl(var(--black) / 0.1);
	}
}

.button\/underline {
	padding-bottom: 0.5em;
	color: hsl(var(--accent-1));
	text-decoration: underline;
	text-underline-offset: 0.4em;

	&:hover,
	.group\/button:hover & {
		text-underline-offset: 0.5em;
	}
}

.button\/icon {
	aspect-ratio: 1 / 1;
	padding: 1em;
	border-style: solid;
	border-width: 1px;
	border-radius: 9999px;
	border-color: hsl(var(--button-border));

	&:hover {
		background: hsl(var(--bg-2));
	}

	&:active {
		background: hsl(var(--bg-3));
	}

	& figure {
		width: 1em;
		aspect-ratio: 1 / 1;

		& img {
			width: 100%;
			height: 100%;
			object-fit: contain;
		}
	}
}

.button\/link {
	&:hover,
	.group\/button:hover & {
		text-decoration: underline;

		& * {
			text-decoration: underline;
		}
	}
}