import {
  z
} from "./chunk-55OQPFLF.js";
import {
  standardBorderRadius,
  subtext
} from "./chunk-JK4BP73A.js";
import {
  colors,
  themeOr
} from "./chunk-2VBDEO6M.js";

// src/styles/fields.tsx
import { css } from "@emotion/react";
import styled from "@emotion/styled";
import { useLayoutEffect, useRef, useState } from "react";
import { jsx } from "@emotion/react/jsx-runtime";
var maxFieldWidth = "100%";
var fieldWidth = "100%";
var inputSpacingPx = 24;
var formButtonTopMargin = "32px";
var formButtonTopMarginStyle = css`
  margin-top: ${formButtonTopMargin};
`;
var standardBorderColor = ({ theme }) => css`
  border-color: ${themeOr(theme.c1Neutral, theme.mcNeutral)({ theme })};
`;
var inputBlockStyle = ({
  theme,
  hasValue,
  hasError
}) => css`
  ${subtext({ theme })}
  ${standardBorderColor({ theme })}
  ${standardBorderRadius(8)}
  background-color: ${theme.bg};
  border-width: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  position: relative;
  cursor: pointer;
  padding: 52.5px;
  ${hasError ? `border-style: solid; border-color: ${colors.danger}; border-width: 2px;` : hasValue ? `border-style: solid; border-color: ${theme.info};` : `border-style: dashed;`}
`;
var textInputPlaceholderColor = ({ theme }) => theme.c4Neutral;
var textInputColor = ({ theme }) => theme.text;
var textInputFontWeight = 600;
var textInputBorderRadiusPx = 8;
var textInputPaddingPx = 12;
var textInputPadding = `${textInputPaddingPx}px`;
var textInputBorderColor = ({ theme }) => themeOr(theme.c1Neutral, theme.c3Neutral)({ theme });
var textInputBorderColorFocused = ({ theme }) => themeOr(theme.hcNeutral, theme.hcNeutral)({ theme });
var textInputActiveStyles = ({
  theme,
  paddingLeftPx,
  paddingRightPx
}) => css`
  border-color: ${textInputBorderColorFocused({ theme })};
  border-width: 2px;
  color: ${textInputColor({ theme })};
  padding: ${textInputPaddingPx - 1}px;
  ${paddingLeftPx ? `padding-left: ${paddingLeftPx - 1}px;` : ""}
  ${paddingRightPx ? `padding-right: ${paddingRightPx - 1}px;` : ""}
`;
var textInputStyle = ({
  theme,
  active,
  disabled,
  hasError,
  paddingLeftPx,
  paddingRightPx
}) => {
  var _a;
  return css`
  border-radius: ${textInputBorderRadiusPx}px;
  background-color: ${disabled ? theme.vlcNeutral : theme.bg};
  cursor: ${disabled ? "not-allowed" : "auto"};
  box-sizing: border-box;
  font-weight: ${textInputFontWeight};

  position: relative;
  z-index: ${z.textInput};
  font-family: ${(_a = theme.typography) == null ? void 0 : _a.fontFamilies.main};
  padding: ${textInputPaddingPx - (hasError ? 1 : 0)}px;
  ${paddingLeftPx ? `padding-left: ${paddingLeftPx - (hasError ? 1 : 0)}px;` : ""}
  ${paddingRightPx ? `padding-right: ${paddingRightPx - (hasError ? 1 : 0)}px;` : ""}
  border-style: solid;
  border-width: ${hasError ? "2" : "1"}px;
  border-color: ${hasError ? theme.danger : textInputBorderColor({ theme })};
  line-height: 22px;
  outline: none;
  /* Use low contrast by default. Some fields, eg login, need high contrast simply
     because of quirks with default autofill styles. Clicking in to an autofilled value
     does not change the color of the text, it just uses the default field color */
  color: ${textInputColor({ theme })};
  font-size: 14px;
  width: ${fieldWidth};
  max-width: ${maxFieldWidth};
  text-overflow: ellipsis;
  &:focus,
  &:active,
  &:has(:focus) {
    ${textInputActiveStyles({ theme, paddingLeftPx, paddingRightPx })}
  }

  ${active && textInputActiveStyles({ theme, paddingLeftPx, paddingRightPx })}

  &::placeholder {
    color: ${textInputPlaceholderColor({ theme })};
  }

  &:focus::placeholder {
    color: ${textInputPlaceholderColor({ theme })};
  }
`;
};
var FieldError = styled.div`
  background-color: rgba(242, 239, 255, 1);
  padding: 16px 16px 8px;
  margin-top: -8px;
  border-radius: 0 0 8px 8px;
  position: relative;
  z-index: ${z.fieldError};
`;
var aboveFieldError = ({
  theme,
  hasError
}) => css`
  ${hasError ? "border: none !important" : ""};
  background-color: ${theme.bg};
  position: relative;
  z-index: ${z.fieldError + 1};
  ${hasError && "box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.08), 0px 1px 4px rgba(0, 0, 0, 0.1);"}
`;
var inputSubtextSeconds = 0.25;
function InputSubtext({
  text,
  hasError = false,
  tooltipId
}) {
  const timeoutRef = useRef(null);
  const [subtext2, setSubtext] = useState(text);
  const [visible, setVisible] = useState(Boolean(text));
  useLayoutEffect(() => {
    if (text) {
      setSubtext(text);
      setVisible(true);
      if (timeoutRef.current) {
        clearTimeout(timeoutRef.current);
      }
    } else {
      setVisible(false);
      timeoutRef.current = setTimeout(() => {
        setSubtext(void 0);
      }, inputSubtextSeconds * 1e3);
    }
  }, [text]);
  return /* @__PURE__ */ jsx(
    StyledInputSubtext,
    {
      visible,
      hasError,
      cursorPointer: Boolean(tooltipId),
      children: tooltipId ? /* @__PURE__ */ jsx("span", { "data-tooltip-id": tooltipId, children: subtext2 }) : subtext2
    }
  );
}
var StyledInputSubtext = styled.div`
  margin-top: ${({ visible }) => visible ? "8px" : "0px"};
  margin-left: ${({ visible }) => visible ? "8px" : "0px"};
  font-size: 12px;
  font-size: ${({ visible }) => visible ? "12px" : "0px"};
  opacity: ${({ visible }) => visible ? "1" : "0"};
  overflow: hidden;
  transition:
    font-size ${inputSubtextSeconds}s cubic-bezier(0.25, 0.87, 0.56, 1.23),
    opacity ${inputSubtextSeconds * 0.8}s cubic-bezier(0.25, 0.87, 0.56, 1.23),
    margin ${inputSubtextSeconds}s cubic-bezier(0.25, 0.87, 0.56, 1.23);
  color: ${({ hasError, theme }) => hasError ? theme.danger : theme.text};
  cursor: ${({ cursorPointer }) => cursorPointer ? "pointer" : "auto"};
`;
var labelStyle = ({
  theme,
  hasError
}) => css`
  color: ${hasError ? theme.danger : theme.text};
  font-size: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  & + * {
    margin-top: 12px;
  }
  * ~ & {
    margin-top: 40px;
  }
`;
var Label = styled.label`
  ${subtext}
  ${labelStyle}
`;
var LabelDiv = styled.div`
  ${subtext}
  ${labelStyle}
`;

export {
  maxFieldWidth,
  fieldWidth,
  inputSpacingPx,
  formButtonTopMargin,
  formButtonTopMarginStyle,
  standardBorderColor,
  inputBlockStyle,
  textInputPlaceholderColor,
  textInputColor,
  textInputFontWeight,
  textInputBorderRadiusPx,
  textInputPaddingPx,
  textInputPadding,
  textInputBorderColor,
  textInputBorderColorFocused,
  textInputStyle,
  FieldError,
  aboveFieldError,
  InputSubtext,
  StyledInputSubtext,
  labelStyle,
  Label,
  LabelDiv
};
