import * as stylex from "@stylexjs/stylex";

import { color, size } from "./tokens.stylex";

export const interaction = stylex.create({
	disableTapHighlight: {
		// on chrome for mobile, the browser highlights the element when you tap on it
		// this doesn't fit to our design, so we disable it
		// eslint-disable-next-line @stylexjs/valid-styles
		"-webkit-tap-highlight-color": "transparent", // Ref: https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-tap-highlight-color?retiredLocale=de

		// As this is likely a control, also disable user selection
		userSelect: "none",
	},

	hideInput: {
		// https://dev.to/link2twenty/accessibility-first-toggle-switches-3obj
		position: "absolute",
		width: "1px",
		height: "1px",
		opacity: 0, // no "display: none" or something similar because we need the input to be focusable
		pointerEvents: "none",
	},

	hideScrollbar: {
		// Based on https://stackoverflow.com/a/59458081
		scrollbarWidth: "thin",
		scrollbarColor: "transparent transparent",
		"::-webkit-scrollbar": {
			display: "none",
		},
		"::-webkit-scrollbar-track": {
			background: "transparent",
		},
		"::-webkit-scrollbar-thumb": {
			backgroundColor: "transparent",
		},
	},

	inert: {
		pointerEvents: "none",
		userSelect: "none",
		touchAction: "none",
	},
});

export const reset = stylex.create({
	buttonStyle: {
		borderStyle: "none",
		background: "none",
		textAlign: "left",
		padding: 0,
		borderRadius: 0,
		cursor: "pointer",
		minWidth: "fit-content", // needed for better positioning in flex envs
	},
});

export const a11y = stylex.create({
	defaultOutline: {
		position: "relative", // needed for z-index

		zIndex: {
			":has(input:focus-visible)": 950, // keep in sync with "outlined-element" in _z.scss
		},

		outlineOffset: {
			default: size.rem1,
			":is(:not(:active):focus-visible, :has(input:focus-visible))":
				size.rem0_5,
		},

		outlineWidth: size.px0_5,

		outlineStyle: {
			default: "none",
			":is(:not(:active):focus-visible, :has(input:focus-visible))":
				"solid",
		},

		outlineColor: {
			default: "transparent",
			":is(:not(:active):focus-visible, :has(input:focus-visible))":
				color.white000,
		},
	},
});