link.scss

@use './to-rem' as *;

@mixin kol-link($block-classname) {
	.#{$block-classname} {
		color: var(--color-primary);

		font-weight: 400;
		font-style: normal;

		&:focus {
			// Outline für Fokus wurde entfernt, ein focus-visible ist aber trotzdem für Tastatursteuerung berücksichtigt
			outline: none;

			.#{$block-classname}__text {
				outline: var(--border-width) solid;
				outline-offset: to-rem(0.05);
				border-radius: var(--border-radius);
				position: relative; // make sure focus outline is visible and not covered by adjacent element
			}
		}

		&:focus:not([aria-disabled], [disabled]),
		&:hover:not([aria-disabled], [disabled]) {
			.kol-span__label {
				text-decoration-thickness: 0.25em;
			}
		}

		&:visited {
			color: var(--color-visited);
		}
	}
}