<commit_before>import styled, { StyledComponent } from "styled-components/macro";
import * as s from "../../../../../../../styles";

export const CheckBoxRadioWrapper = styled.div({
  display: "flex",
  flexDirection: "row",
});

export const CheckBoxRadioInput = styled.input({
  ...s.visuallyHideInputFieldWhileStillInteractive,
});

export const CheckBoxRadioText = styled.span({
  ...s.text({ selectable: false }),

  marginLeft: s.dimensions.formSpacing,
});

const inputPadding = s.gridRawToRawSize(0.25);
export const checkBoxRadioLabelStyles = (
  Input: StyledComponent<any, any>,
): React.CSSProperties => ({
  display: "flex",
  flexDirection: "row",
  alignItems: "center",
  width: "100%",
  padding: s.size(inputPadding),
  margin: `0 ${s.size(-inputPadding)}`,
  cursor: "pointer",

  // TODO: use onFocusVisible React event once it becomes standardized
  [`${Input}${s.focusVisible} + &`]: {
    Input: s.colors.whiteTransparent20,
  },

  [`${Input}:disabled + &`]: {
    cursor: "auto",
  },
});

export const formBoxStyles = (
  Input: StyledComponent<any, any>,
  Label: StyledComponent<any, any>,
) => ({
  display: "flex",
  alignItems: "center",
  justifyContent: "center",
  width: s.grid(2),
  height: s.grid(2),
  boxShadow: s.shadows.formFieldInset,

  background: s.colors.white,
  [`${Input}:checked + ${Label} &`]: {
    backgroundColor: s.colors.blue,
  },
  [`${Input}:checked:active + ${Label} &`]: {
    backgroundColor: s.colors.blueDark,
  },
  [`${Input}:active + ${Label} &`]: {
    backgroundColor: s.colors.grayMain,
  },<commit_msg>fix(form): make focus-visible work again<commit_after>import styled, { StyledComponent } from "styled-components/macro";
import * as s from "../../../../../../../styles";

export const CheckBoxRadioWrapper = styled.div({
  display: "flex",
  flexDirection: "row",
});

export const CheckBoxRadioInput = styled.input({
  ...s.visuallyHideInputFieldWhileStillInteractive,
});

export const CheckBoxRadioText = styled.span({
  ...s.text({ selectable: false }),

  marginLeft: s.dimensions.formSpacing,
});

const inputPadding = s.gridRawToRawSize(0.25);
export const checkBoxRadioLabelStyles = (
  Input: StyledComponent<any, any>,
): React.CSSProperties => ({
  display: "flex",
  flexDirection: "row",
  alignItems: "center",
  width: "100%",
  padding: s.size(inputPadding),
  margin: `0 ${s.size(-inputPadding)}`,
  cursor: "pointer",

  // TODO: use onFocusVisible React event once it becomes standardized
  [`${Input}${s.focusVisible} + &`]: {
    background: s.colors.whiteTransparent20,
  },

  [`${Input}:disabled + &`]: {
    cursor: "auto",
  },
});

export const formBoxStyles = (
  Input: StyledComponent<any, any>,
  Label: StyledComponent<any, any>,
) => ({
  display: "flex",
  alignItems: "center",
  justifyContent: "center",
  width: s.grid(2),
  height: s.grid(2),
  boxShadow: s.shadows.formFieldInset,

  background: s.colors.white,
  [`${Input}:checked + ${Label} &`]: {
    backgroundColor: s.colors.blue,
  },
  [`${Input}:checked:active + ${Label} &`]: {
    backgroundColor: s.colors.blueDark,
  },
  [`${Input}:active + ${Label} &`]: {
    backgroundColor: s.colors.grayMain,
  },
{'fraction_non_alphanumeric': 0.1881686595342983, 'fraction_numerical': 0.006922592825676526, 'mean_word_length': 4.194444444444445, 'pattern_counts': {'":': 0, '<': 9, '<?xml version=': 0, '>': 13, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3835895', 'n_tokens_mistral': 1076, 'n_tokens_neox': 1065, 'n_words': 218}