import t, { css as i } from "styled-components";
import { getColorAlias as o, getFontSize as r, getDefaultTransition as a, convertToTransientProps as d } from "../../../utils/index.js";
import { getFieldPadding as s } from "../utils.js";
const f = t.input.withConfig({
  shouldForwardProp: d(["hasError"])
})`
  color: ${(e) => e.disabled ? o("contentDisabled") : o("contentDefault")};
  font-family: ${(e) => e.theme.font.familyPrimary};
  background: ${(e) => e.disabled ? o("disabled01") : "transparent"};
  ${r("size16")};
  ${(e) => s(e.variant)};
  border-radius: ${(e) => e.theme.radius.roundedC};
  border: unset;
  width: 100%;
  ${a("background")};

  &::placeholder {
    color: ${(e) => e.disabled ? o("contentDisabled") : o("contentSubdued")};
    font-weight: ${(e) => e.theme.font.weightRegular};
  }

  &:hover {
    cursor: ${(e) => e.disabled ? "not-allowed" : "auto"};
  }

  &:focus:hover {
    background: ${(e) => e.disabled ? o("disabled01") : o("containerDefault")};
  }

  &:focus {
    outline: none;
    ${(e) => !e.hasError && i`
        border: none;
      `};
  }
`, n = t.div`
  display: flex;
  color: ${o("contentDefault")};
  ${r("size16")};
  svg {
    color: ${o("contentDefault")};
    height: 24px;
    width: 24px;
  }
`, h = t(n)``, b = t(n)`
  cursor: ${(e) => e.hasHandler ? "pointer" : "auto"};
`;
export {
  h as Prefix,
  n as PrefixSufix,
  b as Sufix,
  f as TextFieldInput
};
