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
    }
  }
});
//# sourceMappingURL=mixins.jsx.map