:root {
	--s-link-primary-default: var(--base);
	--s-link-primary-hover: var(--primary-dark);
}

.btn--primary::selection {
	background: transparent;
	color: white;
}
a.btn--primary.btn--primary:focus-visible {
	background: var(--btn-background-hover);
	color: var(--btn-text-color-hover);
	outline: 1px solid var(--btn-background-hover);
}

.link--primary {
	display: inline-block;
	position: relative;
	text-decoration: none;
	cursor: pointer;
	outline: 0 !important;
	width: fit-content;
}

.link--primary span {
	display: inline-block;
	position: relative;
	color: transparent;
	background-clip: text;
	-webkit-background-clip: text;
	background-image:
		linear-gradient(to right, var(--s-link-primary-hover), var(--s-link-primary-hover)),
		linear-gradient(to right, var(--s-link-primary-default), var(--s-link-primary-default));
	background-size:
		0% 100%,
		100% 100%;
	background-position:
		left center,
		left center;
	background-repeat: no-repeat;
	transition: background-size 0.5s ease-out;
}

.link--primary span::after {
	content: "";
	position: absolute;
	width: 100%;
	height: 1px;
	bottom: 0;
	left: 0;
	background:
		linear-gradient(to right, var(--s-link-primary-hover), var(--s-link-primary-hover)),
		linear-gradient(to right, var(--s-link-primary-default), var(--s-link-primary-default));
	background-repeat: no-repeat;
	background-size:
		0% 1px,
		100% 1px;
	background-position:
		left bottom,
		left bottom;
	transition: background-size 0.5s ease-out;
}

.text--xl .link--primary span::after,
.text--xl.link--primary span::after {
	height: 3px;
	bottom: 6px;
	background-size:
		0% 3px,
		100% 3px;
}

a.link--primary::after {
	content: "";
	position: absolute;
	inset: -8px;
	z-index: 1;
}

@media screen and (min-width: 1026px) {
	.link--primary:is(:hover, :focus-visible) span::after {
		background-size:
			100% 3px,
			100% 3px;
	}
}
@media screen and (min-width: 1026px) {
	.link--primary:is(:hover, :focus-visible) span {
		background-size:
			100% 100%,
			100% 100%;
	}
	.link--primary:is(:hover, :focus-visible) span::after {
		background-size:
			100% 1px,
			100% 1px;
	}
	.text--xl .link--primary:is(:hover, :focus-visible) span::after,
	.text--xl.link--primary:is(:hover, :focus-visible) span::after {
		background-size:
			100% 3px,
			100% 3px;
	}
}

.single-tjanst__sidebar-list a,
.tjanster-feed__child-service a,
.tjanster-feed--huvudtjanster-och-case a {
	color: var(--base) !important;
	text-decoration: underline !important;
	text-decoration-color: var(--base) !important;
	text-decoration-thickness: 3px !important;
	text-underline-offset: 2px !important;
	transition: color 0.2s ease-out, text-decoration-color 0.2s ease-out !important;
}

.single-tjanst__sidebar-list a:is(:hover, :focus-visible),
.tjanster-feed__child-service a:is(:hover, :focus-visible),
.tjanster-feed--huvudtjanster-och-case a:is(:hover, :focus-visible) {
	color: var(--primary-dark) !important;
	text-decoration: underline !important;
	text-decoration-color: var(--primary-dark) !important;
}

.btn--base {
	outline: none !important;
}

.btn--base:is(:hover, :focus-visible) {
	background: var(--base);
	color: white;
}

.btn--secondary {
	background: var(--secondary-dark);
	color: var(--primary-dark);
	border-radius: 50vmax;
	padding: 0.4em 1em;
	text-decoration: none;
	transition: 0.15s ease-out;
}

div div .btn--secondary:is(:hover, :focus-visible, :focus, :acftive) {
	background: var(--primary-dark);
	color: var(--secondary-dark);
}