.supt-button-link {
	@extend %t-body-s, %link-underline-reversed;

	font-weight: 500;
	color: $color-main;
	letter-spacing: 0;
	text-decoration: none;
	outline: none;

	span {
		position: relative;
		display: inline-flex;
		align-items: baseline;
		gap: $spacing-1-5;
	}

	svg {
		display: inline-flex;
		align-items: center;
		vertical-align: middle;
		width: 10px;
		height: 10px;

		&.-right {
			transform: rotate(-90deg);
		}
	}

	&:hover {
		color: $color-main;
	}

	&:focus-visible {
		color: $color-medium;
		background-size: 100% 2px;
	}

	&.-back,
	&[rel='prev'] {
		svg {
			order: -1;
			transform: rotate(90deg);
		}
	}
}