import r, { css as n } from "styled-components";
import { getColorAlias as t, getFontSize as s, getSpacing as e, convertToTransientProps as i } from "../../../../utils/index.js";
const c = r.div`
  min-width: 175px;
  color: ${t("contentDefault")};
  ${s("size16")};
`, d = r.div.withConfig({
  shouldForwardProp: i(["disabled"])
})`
  margin-left: ${e("s02")};
  display: flex;
  justify-content: center;
  align-items: center;
  svg {
    width: 16px;
    height: 16px;
    fill: ${(o) => t(o.disabled ? "contentDisabled" : "contentDefault")};
  }
`, p = r(d)`
  margin-right: ${e("s02")};
  margin-left: unset;
`, u = r.div.withConfig({
  shouldForwardProp: i(["hasError"])
})`
  border-radius: ${(o) => o.theme.radius.roundedD};

  ${({ hasError: o }) => o && n`
      outline: 1px solid ${t("contentError")};
    `}

  &:focus,
  &:focus-within {
    outline: 2px solid ${t("focusOuter")};
  }
`;
export {
  u as ChipBorder,
  d as IconWrapper,
  p as LeadingIconWrapper,
  c as Wrapper
};
