// 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;
		}
	}

	.has-primary-background-color &:not(.has-link-color):not(.has-text-color) {
		color: var(--global--color-background);
	}
}

button,
a {
	cursor: pointer;
}