@layer base {
	[hidden] {
		display: none;
	}

	[disabled] {
		pointer-events: none;
	}

	[id] {
		scroll-margin-top: var(--scroll-top, 2rem);
	}

	:focus:not(:focus-visible),
	:focus:not(:focus-within) {
		outline: none !important;
	}

	:focus-visible {
		outline: dashed 2px currentColor;
		outline-offset: 4px;
	}

	html {
		scroll-behavior: smooth;
	}

	body {
		font-size: 16px;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		font-synthesis: none;
	}

	button {
		cursor: pointer;
		touch-action: manipulation; /* remove delay on touch devices */
		user-select: none; /* prevents text selection */
	}

	.container {
		margin-left: auto;
		margin-right: auto;
		padding-left: 1rem;
		padding-right: 1rem;
	}

	.sr-only {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border-width: 0;
	}
}

@layer components {
	.skip-link {
		position: absolute;
		left: 50%;
		z-index: 20;
		transform: translateX(-50%);
		background: #000;
		color: #fff;
		font-weight: bold;
		border-radius: 8px;
		padding: 12px 8px;

		&:not(:focus) {
			position: absolute;
			width: 1px;
			height: 1px;
			padding: 0;
			margin: -1px;
			overflow: hidden;
			clip: rect(0, 0, 0, 0);
			white-space: nowrap;
			border-width: 0;
		}
	}

	.box-link::before {
		content: "";
		height: 100%;
		left: 0;
		position: absolute;
		top: 0;
		width: 100%;
		z-index: 1;
	}

	.box-link:focus-visible {
		outline: 0;
		&::before {
			outline: dashed 2px currentColor;
			outline-offset: 4px;
		}
	}

	.scroll-hide {
		scrollbar-width: none;
		&::-webkit-scrollbar {
			display: none;
		}
	}
}