"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components"),t=require("../../utils/index.js");function l(o){return o&&o.__esModule?o:{default:o}}var n=l(e);const s=n.default.div`
  display: flex;
  align-items: center;
  justify-content: center;
`,c=n.default.span``,d=n.default.button.withConfig({shouldForwardProp:t.convertToTransientProps(["isLoading","fullWidth"])})`
  ${t.getDefaultTransition()};
  --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: ${t.getSpacing("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.css`
          --button-bg-color: ${t.getColorAlias("interactiveBrand")};
          --button-font-color: ${t.getColorAlias("contentInteractivePrimary")};

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

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

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

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

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

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

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

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

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

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

          &:hover {
            --button-bg-color: ${t.isLightMode(r.mode)?t.getLightenColor("hover01","contentDefault"):t.getDarkenColor("hover01","contentDefault")};
          }

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

          &:hover {
            --button-bg-color: ${t.isLightMode(r.mode)?t.getDarkenColor("hover01","supportError"):t.getLightenColor("hover01","supportError")};
          }

          &:active,
          &[data-status=\"loading\"] {
            --button-bg-color: ${t.getModifiedColorByThemeMode("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: ${t.isLightMode(r.mode)?t.transparentizeAliasColor(.35,"contentInteractivePrimary"):t.transparentizeAliasColor(.35,"contentInteractiveSecondary")};
              border-top-color: ${t.isLightMode(r.mode)?t.getColorAlias("contentInteractivePrimary"):t.getColorAlias("contentInteractiveSecondary")};
            }
          }
        `;case"destructive-ghost":return e.css`
          --button-font-color: ${t.getColorAlias("contentInteractiveError")};

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

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

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

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


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

         {
          ${!a&&e.css`
            &:hover {
              --button-bg-color: ${t.isLightMode(i.mode)?t.getLightenColor("hover01","interactivePrimary"):t.getDarkenColor("hover01","interactivePrimary")};
            }

            &:active,
            &[data-status=\"loading\"] {
              --button-bg-color: ${t.isLightMode(i.mode)?t.getLightenColor("active01","interactivePrimary"):t.getDarkenColor("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: ${t.isLightMode(i.mode)?t.getLightenColor("active01","interactivePrimary"):t.getDarkenColor("active01","interactivePrimary")};
          }
        }
      `}


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

  ${({variant:o,disabled:r})=>r?e.css`
        --button-svg-fill: ${t.getColorAlias("contentDisabled")};
      `:o==="primary"?e.css`
            --button-svg-fill: ${t.getColorAlias("contentInteractivePrimary")};
          `:e.css`
            --button-svg-fill: ${t.getColorAlias("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.getColorAlias("focusOuter")};
  }

  & > * {
    pointer-events: none;
  }
`,g=n.default.span`
  display: flex;
`;exports.ContentWrapper=c;exports.IconContainer=g;exports.SpinnerWrapper=s;exports.StyledButton=d;
