Overwrite headless-ui focus styles

[amyria3]

In my Component (see below) this happens:
There a slight purple tone that indicates the selected option.

Its origin must be Headless UI that is generally used in our System. I assume so, cause when I select an Option the atribute "data-headlessui-focus-visible" appears in the HTML

So my question is, how do I overwrite it?
Here you see what I tried.
Is there a documentation specifically for this?

Thanx

    `!focus-visible:${Styles.bgInactive}`,
    "!data-[focus]:bg-blue-600",
    "!data-[focus-visible]:bg-blue-600",
    "!focus-visible:bg-blue-600",
    "!input-[data-headlessui-focus-visible]:bg-blue-600",
    "!data-[headlessui-focus-visible]:bg-blue-600"```

"use client";
import React, { forwardRef, useEffect, useState } from "react";
import clsx from "clsx";
import * as icons from "../CustomIconsFromFigmaPrototype/svgCollection";
import WhIcon from "../CustomIconsFromFigmaPrototype/WhIcon";

const Styles = {
  base: "rounded-md flex items-center justify-center w-full",
  border: [
    // Border style
    "border-solid border-wh-default box-content",

    // Border color:
    "border-wh-black dark:border-wh-white",

    // Shadow in default state
    "shadow-none",
  ],
  font: "wh-button-label-light",
  ux: "cursor-pointer transition",
  hover: "hover:move hover:shadow-wh-default-outside",
  focus: "focus-within:focus-outline-wh-default",
  bgInactive: "!bg-wh-white !dark:bg-wh-black text-wh-black dark:text-wh-white",
  bgActive: "!bg-wh-black !dark:bg-wh-white text-wh-white dark:text-wh-black",
};


const dateTypes = ["date", "datetime-local", "month", "time", "week"];
type DateType = (typeof dateTypes)[number];

export const Input = forwardRef(function Input(
  {
    name = "unnamed Input",
    defaultValue = "type here",
    className,
    iconType,
    button = false,
    closeButton = true,
    buttonLabel = "go",
    onChange,
    value,
    clickOrEnter,
    ...props
  }: {
    name?: string;
    defaultValue?: string;
    className?: string;
    iconType?: keyof typeof icons;
    button?: boolean;
    closeButton?: boolean;
    buttonLabel?: string;
    value?: string;
    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
    clickOrEnter?: () => void;
    type?: "email" | "number" | "password" | "search" | "tel" | "text" | "url" | DateType;
  },
  ref: React.ForwardedRef<HTMLInputElement>,
) {
  const [inputValue, setInputValue] = useState(value || "");
  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setInputValue(event.target.value);
    onChange && onChange(event);
  };
  const [typing, setTyping] = useState(false);
  useEffect(() => {
    setInputValue(value || "");
  }, [value]);

  useEffect(() => {
    setTyping(Boolean(inputValue && inputValue !== ""));
  }, [inputValue]);

  return (
    <span
      className={clsx(
        "relative",
        "input-component",
        Styles.base,
        typing ? Styles.bgActive : Styles.bgInactive,
        Styles.border,
        Styles.focus,
        Styles.hover,
        className,
        "has-[[data-disabled]]:opacity-50",
        "p-0.25 w-full",
      )}
    >
      <span
        className={clsx(
          "fake-background rounded-md",
          "w-full h-full flex flex-row items-center",
          typing ? Styles.bgActive : Styles.bgInactive,
          " outline-none focus:outline-none",
        )}
      >
        <span
          className={clsx(
            "flex rounded-md z-100 flex-grow items-center mr-wh-default",
            "border-none outline-0 focus:outline-0 ring-0 focus:ring-0 focus:border-none",
          )}
        >
          <input
            {...props}
            name={name}
            defaultValue={defaultValue}
            ref={ref}
            value={inputValue}
            onChange={handleChange}
            className={clsx(
              Styles.base,
              Styles.font,
              "placeholder:text-wh-grey",
              !typing ? Styles.bgInactive : Styles.bgActive,
              "disabled:opacity-50",
              "border-none outline-0 !focus:outline-0 ring-0 focus:ring-0 focus:border-none",
              `!focus-visible:${Styles.bgInactive}`,
              "!data-[focus]:bg-blue-600",
              "!data-[focus-visible]:bg-blue-600",
              "!focus-visible:bg-blue-600",
              "!input-[data-headlessui-focus-visible]:bg-blue-600",
              "!data-[headlessui-focus-visible]:bg-blue-600"
            )}
          />
          {typing && closeButton && (
            <button
              className={clsx("flex items-center justify-center border-none", Styles.focus)}
              onClick={() => {
                setInputValue("");
                setTyping(false);
              }}
            >
              <WhIcon stroke={"reverse"} size={"default(1.5rem)"} type={"close"} strokeWidth={"default(0.075rem)"} />
            </button>
          )}
        </span>

        <span className="flex justify-center items-center h-full">
          {button && (
            <button
              name={buttonLabel}
              onClick={clickOrEnter}
              className={clsx(
                "inline-flex items-center justify-center px-wh-default right-0.25 rounded-md focus:focus-outline-wh-default h-8",
                !typing
                  ? " bg-wh-black text-wh-white dark:bg-wh-white dark:text-wh-black wh-inline-text-small-light dark:wh-inline-text-small"
                  : " bg-wh-white text-wh-black dark:bg-wh-black dark:text-wh-white wh-inline-text-small dark:wh-inline-text-small-light",
              )}
            >
              {iconType && typing && (
                <WhIcon
                  stroke={"auto"}
                  size={"mid(1.25rem)"}
                  type={iconType as keyof typeof icons}
                  strokeWidth={"default(0.075rem)"}
                  classes="mr-wh-default"
                />
              )}
              {iconType && !typing && (
                <WhIcon
                  stroke={"reverse"}
                  size={"mid(1.25rem)"}
                  type={iconType as keyof typeof icons}
                  strokeWidth={"default(0.075rem)"}
                  classes="mr-wh-default"
                />
              )}
              {buttonLabel}
            </button>
          )}
        </span>
      </span>
    </span>
  );
});