import styled from "styled-components";
import { composeStyle as comp } from "../../util";
export const ButtonWrapper = styled.button(({ theme: { button: { width: defaultWidth, height: defaultHeight, mdHeight, smHeight, xsHeight, background, borderRadius, border, alterBorder, fontSize, xsFontSize, fontFamily, xsFontFamily, outlinedBackground, thinOutlinedBorder, darkBackground, alterBackground, disabledBackground, disabledColor, disabledOutlinedBackground, disabledOutlinedColor, activeBackground, activeColor, hoverBackground, hoverColor, }, }, pending, size = "lg", outlined, thinOutlined, texted, dark, alternative, textSize, width, height, }) => `
  display: flex;
  justify-content: center;
  align-items: center;

  box-sizing: border-box;

  transition: 0.2s;

  ${comp("min-width", width ?? defaultWidth)}
  ${comp("width", width ?? defaultWidth)}

  ${size === "lg" ? comp("height", height ?? defaultHeight) : ""}
  ${size === "md" ? comp("height", mdHeight) : ""}
  ${size === "sm" ? comp("height", smHeight) : ""}
  ${size === "xs" ? comp("height", xsHeight) : ""}

  ${comp("background", dark ? darkBackground : background)}
  ${outlined ? comp("background", outlinedBackground) : ""}
  ${thinOutlined ? comp("background", outlinedBackground) : ""}
  ${texted ? `background: unset;` : ""}
  ${alternative ? comp("background", alterBackground) : ""}

  ${comp("border", texted
    ? "unset"
    : thinOutlined
        ? thinOutlinedBorder
        : alternative
            ? alterBorder
            : border)}

  ${comp("border-color", dark ? darkBackground : background)}
  ${comp("border-radius", borderRadius)}

  ${comp("font-size", textSize ?? (size === "xs" || alternative) ? xsFontSize : fontSize)}
  ${comp("font-family", size === "xs" || alternative ? xsFontFamily : fontFamily)}
  ${comp("color", outlined || thinOutlined || texted || alternative
    ? dark
        ? darkBackground
        : background
    : outlinedBackground)}

  ${comp("cursor", pending ? "default" : "pointer")}

  ${!pending && !texted
    ? `
    :hover {
      ${comp("background", hoverBackground)}
      ${comp("color", hoverColor)}
      ${comp("border-color", hoverBackground)}
      cursor: pointer;
    }

    :active {
      ${comp("background", activeBackground)}
      ${comp("color", activeColor)}
    }`
    : `
      ${comp("cursor", texted ? "pointer" : "default")}
    `}

  ${texted ? `:hover {text-decoration: underline;}` : ""}

  :disabled {
    ${comp("background", disabledBackground)}
    ${comp("border-color", disabledBackground)}
    ${comp("color", disabledColor)}

    ${outlined ? comp("background", disabledOutlinedBackground) : ""}
    ${outlined ? comp("border-color", disabledOutlinedColor) : ""}
    ${outlined ? comp("color", disabledOutlinedColor) : ""}

    cursor: default;
  }

  :focus {
    outline: none;
  }

`);
export const LinkButtonWrapper = styled(ButtonWrapper).attrs({ as: "a" })(({ width }) => `
  ${comp("min-width", width)}
  ${comp("width", width)}
  text-decoration: none;
`);
export const TextButtonWrapper = styled.a(({ theme }) => `
    text-decoration: unset;
    color: ${theme.button.activeColor};

    &:hover {
      text-decoration: underline;
      text-decoration-color: ${theme.button.activeColor};
    }

    p {
      color: ${theme.button.activeColor};
    }
  `);
//# sourceMappingURL=styled.js.map