.main-content a:not(.svk-button),
.svk-link {
	display: inline-block;
	color: var(--link-color-primary);
	text-decoration: underline;
	text-decoration-thickness: 0.075em;
	text-underline-offset: 0.2em;
	word-break: break-word;
	cursor: pointer;
	position: relative;

	@media (hover: hover) {
		&:hover {
			color: var(--link-color-primary-hover);
			text-decoration: underline;
			text-decoration-thickness: 0.125em;
		}
	}

	&:after {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		min-width: 44px;
		min-height: 44px;
		height: 100%;
		width: 100%;
		transform: translate(-50%, -50%);
	}

	&:active {
		text-decoration-thickness: 0.075em;
		color: var(--link-color-primary-active);
	}

	&:focus-visible {
		outline: var(--support-border-focused) solid var(--support-color-focused);
		outline-offset: 0.5em;
		border-radius: 1rem;
		text-decoration: none;
	}

	&.link--expand {
		position: static;

		&:after {
			position: absolute;
			top: 0;
			right: 0;
			left: 0;
			bottom: 0;
			content: '';
		}
	}

	&.link--icon {
		display: inline-flex;
		align-items: center;

		svk-icon,
		svg {
			width: 1.25em;
			height: 1.25em;
			margin-right: var(--space-50);
		}
	}

	nav & {
		text-decoration: none;
	}

	&.link--underline {
		text-decoration: underline;
	}

	&.link--no-underline {
		text-decoration: none;

		@media (hover: hover) {
			&:hover {
				color: var(--link-color-primary-hover);
				text-decoration: underline;
				text-decoration-thickness: 0.125em;
			}
		}

		&:active {
			text-decoration-thickness: 0.075em;
			color: var(--link-color-primary-active);
		}
	}

	&.link--secondary {
		color: var(--link-color-secondary);

		@media (hover: hover) {
			&:hover {
				color: var(--link-color-secondary-hover);
			}
		}

		&:active {
			color: var(--link-color-secondary-active);
		}
	}
}