import a, { css as o } from "styled-components";
import { getIconFill as f, getHoverCursor as $ } from "./utils.js";
import { getColorAlias as t, getDarkenColor as i, getFontSize as b, getDefaultTransition as p, convertToTransientProps as v, getSpacing as c } from "../../utils/index.js";
import { Interactive as k } from "../Interactive/index.js";
const I = (e) => {
  switch (e) {
    case "ghost":
      return x;
    case "outlined":
      return D;
    case "primary":
    default:
      return y;
  }
}, l = o`
  background: ${t("interactivePrimary")};
  color: ${t("contentInteractivePrimary")};
`, s = o`
  background: ${t("disabled01")};
  &:hover {
    background: ${i("hover02", "backgroundDefault")};
  }
`, g = o`
  display: flex;
  align-items: center;
  justify-content: center;
`, h = a.div`
  ${g};
`, m = (e) => {
  const { selected: r, showClose: n, isLoading: d } = e;
  return r && n ? d ? o`
        padding: ${c("s01")};
      ` : o`
      padding: ${c("s01", "s01", "s01", "s03")};
    ` : o`
    padding: 6px 12px;
  `;
}, u = a(k).withConfig({
  shouldForwardProp: v([
    "showClose",
    "isLoading"
  ])
})`
  ${g};
  box-sizing: border-box;
  height: 32px;
  ${(e) => m(e)};
  outline: 2px solid transparent;
  border-radius: ${(e) => e.theme.radius.roundedD};
  text-align: center;
  ${b("size14")};
  font-family: ${(e) => e.theme.font.familyPrimary};
  font-weight: ${(e) => e.theme.font.weightExtrabold};
  ${p()};

  ${({ disabled: e }) => e ? o`
          ${s};
          color: ${t("contentDisabled")};
        ` : o`
          background: ${t("containerDefault")};
          color: ${t("contentInteractiveSecondary")};
        `};

  svg {
    fill: ${({ selected: e = !1, disabled: r = !1 }) => f(e, r)};
  }

  &:hover {
    cursor: ${({
  disabled: e = !1,
  showClose: r = !1,
  selected: n = !1,
  isLoading: d = !1
}) => $(e, r, n, d)};
  }

  &:focus,
  &:focus-within {
    outline-color: ${t("focusOuter")};
  }
`, x = a(u)`
  ${({ disabled: e, selected: r, isLoading: n }) => e ? s : o`
          ${r ? l : o`
                background: ${t("containerDefault")};
                border: none;
                &:hover {
                  background: ${n ? t("containerDefault") : i("hover02", "backgroundDefault")};
                }
                &:active {
                  background: ${n ? t("containerDefault") : i("active02", "backgroundDefault")};
                }
              `}
        `};
`, D = a(u)`
  ${({ disabled: e, selected: r, isLoading: n }) => e ? s : o`
          ${r ? l : o`
                background: ${t("containerDefault")};
                border: 1px solid ${t("borderDefault")};
                &:hover {
                  background: ${n ? t("containerDefault") : i("hover02", "backgroundDefault")};
                }
                &:active {
                  background: ${n ? t("containerDefault") : i("active02", "backgroundDefault")};
                }
              `}
        `};
`, y = a(u)`
  ${({ disabled: e, selected: r, isLoading: n }) => e ? s : o`
          ${r ? l : o`
                background: ${t("containerSubtle")};
                &:hover {
                  background: ${n ? t("containerSubtle") : i("hover02", "backgroundDefault")};
                }
                &:active {
                  background: ${n ? t("containerSubtle") : i("active02", "backgroundDefault")};
                }
              `}
        `};
`, F = a(h)`
  svg {
    height: 16px;
    width: 16px;
    margin-right: ${c("s02")};
  }
`, z = a.button.withConfig({
  shouldForwardProp: (e, r) => e !== "showClose" && e !== "isLoading" && r(e)
})`
  border: none;
  width: 21px;
  height: 21px;
  margin-left: ${c("s01")};
  padding: ${c("s00")};
  border-radius: ${(e) => e.theme.radius.roundedE};
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;

  svg {
    height: 16px;
    width: 16px;
    fill: ${t("interactiveSecondary")};

    &:hover {
      scale: 1.1;
    }
  }

  &:hover {
    cursor: ${({ disabled: e }) => e ? "not-allowed" : "pointer"};
  }
`, T = a(h)`
  width: ${({ width: e, selected: r }) => e - (r ? 20 : 22)}px;
  height: ${({ selected: e }) => e ? "24" : "20"}px;

  svg {
    stroke: ${({ selected: e }) => e ? t("contentInteractivePrimary") : t("contentInteractiveSecondary")};
    height: 16px;
    width: 16px;
  }
`;
export {
  u as Chip,
  z as CloseButton,
  h as FlexDiv,
  x as Ghost,
  F as IconWrapper,
  D as Outlined,
  y as Primary,
  T as SpinnerWrapper,
  I as getChipVariant
};
