@use '@lucca-front/scss/src/commons/utils/a11y';

@mixin component($atRoot: 'without: rule') {
	position: fixed;
	list-style-type: none;
	justify-content: center;
	display: flex;
	margin: 0;
	padding: 0;
	z-index: 9010;
	inset: var(--pr-t-spacings-150);
	inset-block-end: auto;

	@at-root ($atRoot) {
		.skipLinks-action {
			border: 0;
			margin: 0;
			border-radius: var(--pr-t-border-radius-default);
			font: var(--pr-t-font-body-XS);
			font-weight: var(--pr-t-font-fontWeight-semibold);
			padding-block: var(--pr-t-spacings-50);
			padding-inline: var(--pr-t-spacings-100);
			transition: all var(--commons-animations-durations-fast);
			background-color: var(--palettes-neutral-600);
			display: inline-block;
			position: relative;
			text-decoration: none;
			vertical-align: baseline;
			white-space: nowrap;
			color: var(--pr-t-color-text-reverse);
			cursor: pointer;

			&:focus-visible {
				@include a11y.focusVisible;
			}

			&:not(:focus-visible) {
				@include a11y.mask;
			}
		}
	}
}