@use '@talend/bootstrap-theme/src/theme/guidelines' as *;
@use '@talend/design-tokens/lib/tokens' as tokens;

.tc-skip-links {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;

	ul > li > a {
		height: $navbar-height;
		background: tokens.$coral-color-neutral-background;
		color: tokens.$coral-color-neutral-text-weak;
		font-weight: bold;

		display: flex;
		align-items: center;

		&:focus {
			position: fixed;
			top: 0;
			left: 0;
			visibility: visible;
		}

		> .icon {
			padding: 0 $padding-small;
			border-right: 1px solid tokens.$coral-color-neutral-border-strong;
			display: flex;
			align-items: center;
		}

		> .text {
			padding: 0 $padding-small;
		}
	}
}