// Links styles
a {
	border-bottom: 1px solid var(--global--color-secondary);
	color: var( --wp--style--color--link, var(--global--color-primary) );
	text-decoration: none;
	transition: border-color 0.1s ease-out;

	&:hover,
	&:focus {
		border-bottom-color: transparent;
	}

	&:hover {
		color: var(--global--color-primary-hover);
	}

	&:focus {
		color: var(--global--color-secondary);
	}

	&:active {
		color: var( --wp--style--color--link, var(--global--color-primary) );
	}

	// If a custom link color has been assigned,
	// switch the color of the bottom border too.
	.has-link-color & {
		border-bottom: 1px solid var( --wp--style--color--link, var(--global--color-primary) );

		&:hover,
		&:focus {
			border-bottom-color: transparent;
		}
	}
}
// Enforce the custom link color even if a custom background color has been set.
// The extra specificity here is required to override the background color styles.
.has-background:not(.has-background-background-color) {
	// Target both current level and nested block.
	.has-link-color a,
	&.has-link-color a {
		color: var( --wp--style--color--link, var(--global--color-primary) );
	}
}

button,
a {
	cursor: pointer;
}