import { convertToTransientProps as d, getColorAlias as r, getDefaultTransition as u, getDarkenColor as l, getSpacing as s, getFontSize as a } from "../../utils/index.js";
import n, { css as i } from "styled-components";
import { getFieldPadding as p } from "../Field/utils.js";
import { IconButtonContainer as c } from "../IconButton/styles.js";
const $ = n.div.withConfig({
  shouldForwardProp: d(["fullWidth"])
})`
  width: ${(e) => e.fullWidth ? "100%" : "300px"};
  font-family: ${(e) => e.theme.font.familyPrimary};
`, w = n.div.withConfig({
  shouldForwardProp: d([
    "hasLabel",
    "hasError",
    "stepperVariant"
  ])
})`
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: ${(e) => e.disabled && e.stepperVariant && e.stepperVariant.includes("input-form") ? r("disabled01") : "transparent"};
  ${u()};

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

  ${c} {
    position: relative;
    top: 0px;
    left: 0px;
  }

  ${(e) => e.stepperVariant === "input-form" && i`
      border: 1px solid
        ${!e.disabled && e.hasError ? r("contentError") : r("containerDark")};

      border-radius: ${(t) => t.theme.radius.roundedD};

      &:hover {
        background: ${!e.disabled && l("hover01", "backgroundDefault")};
      }
    `}
`, k = n.input.withConfig({
  shouldForwardProp: d([
    "hasError",
    "hasLabel",
    "stepperVariant",
    "buttonsDisabled",
    "componentHeight"
  ])
})`
  color: ${r("contentSubdued")};
  font-family: ${(e) => e.theme.font.familyPrimary};
  background: ${({ stepperVariant: e, buttonsDisabled: t }) => e === "input" && t ? r("disabled01") : "transparent"};
  ${(e) => p(e.componentHeight)};
  border: none;
  width: 50%;
  text-align: center;

  ::-webkit-outer-spin-button,
  ::-webkit-inner-spin-button {
    -webkit-appearance: none;
    -moz-appearance: textfield;
    margin: ${s("s00")};
  }

  ${a("size16")};
  ${u()};

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

  ${({ stepperVariant: e, buttonsDisabled: t, hasError: h }) => {
  switch (e) {
    case "high-emphasis-wide":
      return i`
          font-weight: ${(o) => o.theme.font.weightBold};
          ${a("size24")};
        `;
    case "high-emphasis-narrow":
      return i`
          font-weight: ${(o) => o.theme.font.weightBold};
          ${a("size20")};
        `;
    case "input":
      return i`
          border: 1px solid
            ${!t && h ? r("contentError") : r("containerDark")};
          margin: ${s("s00", "s02")};
          border-radius: ${(o) => o.theme.radius.roundedD};

          &:hover {
            background: ${!t && l("hover01", "backgroundDefault")};
          }
        `;
  }
}}
`, v = n.div`
  margin: 8px 0;
  border-radius: ${(e) => e.theme.radius.roundedD};
  position: relative;
  &:focus-within {
    box-shadow: 0 0 0 2px ${r("focusOuter")};
  }
`;
export {
  w as Border,
  v as FocusBorder,
  k as NumberField,
  $ as Wrapper
};
