@use 'sass:map';
@use '../base/maps/tokens' as *;
@use '../base/functions' as *;

// Stretches clickability of the link to the whole element
.link-stretched,
.button.link-stretched {
	position: unset;

	&::before {
		content: '';
		position: absolute;
		inset: 0;
	}
}

// Links
.link:not(.button),
.jumplink:not(.button) {
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: var(--padding-slim);
	text-decoration-thickness: var(--padding-hairline);
	font-weight: 600;
	color: var(--action);

	&.default {
		color: var(--action);

		&:hover,
		&:focus {
			color: var(--action-secondary);
		}
	}

	&:hover {
		color: var(--action-tertiary);
	}
}

.link-arrow,
.link.link-arrow {
	text-decoration: none;

	&::after {
		color: var(--action);
		content: '\e905'; // icon-arrow-forward
		display: inline-block;
		margin-left: var(--padding-extra-small);
		font-family: brandui-icons;
		transition: transform var(--transition-fast);
		width: var(--padding-small);
		vertical-align: middle;
	}

	&:hover,
	&:focus {
		color: var(--action-tertiary);

		&::after {
			color: var(--action-tertiary);
			transform: translateX(-0.25rem);
		}
	}
}

.link-decoration-none {
	text-decoration: none;

	&:hover,
	&:focus {
		text-decoration: underline;
	}
}

.links,
.jumplinks {
	a:not(.button) {
		text-decoration: underline;
		text-underline-offset: var(--padding-slim);
		text-decoration-thickness: var(--padding-hairline);
		font-weight: 600;

		&:hover,
		&:focus {
			color: var(--action-tertiary);
		}
	}

	&.default {
		color: var(--action);

		&:hover {
			color: var(--action-secondary);
		}
	}

	&-decoration-none {
		a:not(.button) {
			text-decoration: none;

			&:hover,
			&:focus {
				text-decoration: underline;
				text-underline-offset: var(--padding-slim);
				text-decoration-thickness: var(--padding-hairline);
				font-weight: 600;
				color: var(--action-tertiary);
			}
		}
	}

	&.dark {
		a:not(.button) {
			&:hover,
			&:focus {
				color: var(--action);
			}
		}
	}
}

.jumplink:not(.button),
.jumplinks a:not(.button) {
	max-width: max-content;
	max-height: max-content;
	text-decoration: none;
	color: var(--action);

	&::after {
		transform: translateY(var(--padding-thin));
		font-family: brandui-icons;
		font-size: var(--padding-medium);
		display: none;
		content: '\e918'; // icon-copy-link
	}

	&:hover {
		text-decoration: underline;
		text-decoration-style: dotted;
		color: var(--action-tertiary);

		&::after {
			display: inline-block;
		}
	}
}