import u, { css as e } from "styled-components";
import { getDefaultTransition as g, getSpacing as i, getColorAlias as t, getModifiedColorByThemeMode as n, getDarkenColor as c, getLightenColor as s, transparentizeAliasColor as b, isLightMode as a, getFontSize as l, convertToTransientProps as h } from "../../utils/index.js";
const $ = u.div`
  display: flex;
  align-items: center;
  justify-content: center;
`, m = u.span``, y = u.button.withConfig({
  shouldForwardProp: h(["isLoading", "fullWidth"])
})`
  ${g()};
  --button-bg-color: transparent;
  --button-outline-offset: 1px;
  --button-font-color: inherit;
  --button-padding: 0;
  --button-min-height: 0;
  --button-svg-fill: inherit;
  display: flex;
  align-items: center;
  align-self: flex-start;
  justify-content: center;
  gap: ${i("s02")};
  font-family: ${({ theme: o }) => o.font.familyPrimary};
  font-weight: ${({ theme: o }) => o.font.weightBold};
  letter-spacing: 0.5px;
  border-radius: ${({ theme: o }) => o.radius.roundedE};
  position: relative;
  overflow: initial;
  border: unset;
  width: ${({ fullWidth: o }) => o ? "100%" : "fit-content"};
  margin: ${({ margin: o }) => o || "0 2px"};
  padding: var(--button-padding);
  background-color: var(--button-bg-color);
  color: var(--button-font-color);
  min-height: var(--button-min-height);

  ${({ variant: o, theme: r }) => {
  switch (o) {
    case "primary":
    default:
      return e`
          --button-bg-color: ${t("interactiveBrand")};
          --button-font-color: ${t("contentInteractivePrimary")};

          &:hover {
            --button-bg-color: ${n(
        "hover01",
        "interactiveBrand"
      )};
          }

          &:active,
          &[data-status=\"loading\"] {
            --button-bg-color: ${n(
        "active01",
        "interactiveBrand"
      )};
          }
        `;
    case "secondary":
      return e`
          --button-bg-color: ${t("interactiveSecondary")};
          --button-font-color: ${t("contentInteractiveSecondary")};

          &:hover {
            --button-bg-color: ${n(
        "hover01",
        "interactiveSecondary"
      )};
          }

          &:active,
          &[data-status=\"loading\"] {
            --button-bg-color: ${n(
        "active01",
        "interactiveSecondary"
      )};
          }
        `;
    case "outline":
      return e`
          --button-font-color: ${t("contentInteractiveTertiary")};
          --button-outline-offset: 2px;
          box-shadow: 0 0 0 1px ${t("borderDefault")};

          &:hover {
            --button-bg-color: ${n(
        "hover01",
        "backgroundDefault"
      )};
          }

          &:active,
          &[data-status=\"loading\"] {
            --button-bg-color: ${n(
        "active01",
        "backgroundDefault"
      )};
          }
        `;
    case "ghost":
      return e`
          --button-font-color: ${t("contentLink")};

          &:hover {
            --button-bg-color: ${n(
        "hover01",
        "backgroundDefault"
      )};
          }

          &:active,
          &[data-status=\"loading\"] {
            --button-bg-color: ${n(
        "active01",
        "backgroundDefault"
      )};
          }
        `;
    case "inverse":
      return e`
          --button-bg-color: ${t("interactiveInverse")};
          --button-font-color: ${t("contentInteractiveSecondary")};

          &:hover,
          &[data-status=\"loading\"] {
            --button-bg-color: ${n(
        "hover01",
        "interactiveInverse"
      )};
          }

          &:active,
          &[data-status=\"loading\"] {
            --button-bg-color: ${n(
        "active01",
        "interactiveInverse"
      )};
          }
        `;
    case "inverse-ghost":
      return e`
          --button-font-color: ${t("contentInteractivePrimary")};

          &:hover {
            --button-bg-color: ${a(r.mode) ? s("hover01", "contentDefault") : c("hover01", "contentDefault")};
          }

          &:active,
          &[data-status=\"loading\"] {
            --button-bg-color: ${a(r.mode) ? s("active01", "contentDefault") : c("active01", "contentDefault")};
          }
        `;
    case "destructive":
      return e`
          --button-font-color: ${a(r.mode) ? t("contentInteractivePrimary") : t("contentInteractiveSecondary")};
          --button-bg-color: ${t("supportError")};

          &:hover {
            --button-bg-color: ${a(r.mode) ? c("hover01", "supportError") : s("hover01", "supportError")};
          }

          &:active,
          &[data-status=\"loading\"] {
            --button-bg-color: ${n(
        "active01",
        "supportError"
      )};

            /*
            * Workaround to make the spinner component behave as expected 
            * from the design docs. The Spinner will change its color according 
            * to the theme mode and this variant has the same color on its
            * spinner on both themes.
            */
            div {
              border-color: ${a(r.mode) ? b(0.35, "contentInteractivePrimary") : b(
        0.35,
        "contentInteractiveSecondary"
      )};
              border-top-color: ${a(r.mode) ? t("contentInteractivePrimary") : t("contentInteractiveSecondary")};
            }
          }
        `;
    case "destructive-ghost":
      return e`
          --button-font-color: ${t("contentInteractiveError")};

          &:hover {
            --button-bg-color: ${n(
        "hover01",
        "backgroundDefault"
      )};
          }

          &:active,
          &[data-status=\"loading\"] {
            --button-bg-color: ${n(
        "active01",
        "backgroundDefault"
      )};
          }
        `;
  }
}}

  ${({ size: o }) => {
  switch (o) {
    case "large":
      return e`
          ${l("size20")};
          --button-min-height: 56px;
          --button-padding: 14px ${i("s05")};
        `;
    case "medium":
      return e`
          ${l("size20")};
          --button-min-height: 48px;
          --button-padding: 10px ${i("s05")};
        `;
    case "small-expressive":
      return e`
          ${l("size20")};
          --button-min-height: 40px;
          --button-padding: 6px ${i("s04")};
        `;
    case "small-productive":
      return e`
          ${l("size16")};
          --button-min-height: 40px;
          --button-padding: ${i("s02", "s04")};
        `;
    case "xSmall":
      return e`
          ${l("size14")};
          --button-min-height: 32px;
          --button-padding: ${i("s01", "s02")};
        `;
  }
}}

  ${({ variant: o }) => o === "ghost" || o === "inverse-ghost" || o === "destructive-ghost" ? e`
          &:disabled {
            --button-font-color: ${t("contentDisabled")};
            --button-bg-color: transparent;
          }
        ` : e`
          &:disabled {
            --button-bg-color: ${t("disabled01")};
            --button-font-color: ${t("contentDisabled")};
          }
        `}


  ${({ variant: o, size: r, theme: d, disabled: v }) => o === "primary" && (r === "small-productive" || r === "xSmall") && e`
        --button-bg-color: ${t("interactivePrimary")};

         {
          ${!v && e`
            &:hover {
              --button-bg-color: ${a(d.mode) ? s("hover01", "interactivePrimary") : c("hover01", "interactivePrimary")};
            }

            &:active,
            &[data-status=\"loading\"] {
              --button-bg-color: ${a(d.mode) ? s("active01", "interactivePrimary") : c("active01", "interactivePrimary")};
            }
          `}

          /* This is to fix an edge case when variant is loading and disabled in the same time */
          &[data-status=\"loading\"] {
            --button-bg-color: ${a(d.mode) ? s("active01", "interactivePrimary") : c("active01", "interactivePrimary")};
          }
        }
      `}


  svg {
    fill: var(--button-svg-fill);
  }

  ${({ variant: o, disabled: r }) => r ? e`
        --button-svg-fill: ${t("contentDisabled")};
      ` : o === "primary" ? e`
            --button-svg-fill: ${t("contentInteractivePrimary")};
          ` : e`
            --button-svg-fill: ${t("contentInteractiveBrand")};
          `};

  &:hover {
    cursor: ${({ isLoading: o }) => o ? "default" : "pointer"};
  }

  &:disabled:hover {
    cursor: not-allowed;
  }

  &:focus,
  &:focus-visible {
    outline-offset: var(--button-outline-offset);
    outline: 2px solid ${t("focusOuter")};
  }

  & > * {
    pointer-events: none;
  }
`, x = u.span`
  display: flex;
`;
export {
  m as ContentWrapper,
  x as IconContainer,
  $ as SpinnerWrapper,
  y as StyledButton
};
