import styled, { css } from "styled-components";
const getTheme = ({ size, variant, outline, texted, width, height }, theme) => {
    let sizeSet = theme?.md;
    let styleSet = theme?.action;
    if (outline)
        styleSet = theme?.secondary;
    if (texted)
        styleSet = theme?.text;
    if (!!variant)
        styleSet = theme?.[variant];
    if (!!size)
        sizeSet = theme?.[size];
    return {
        ...sizeSet,
        width: width ?? sizeSet?.width,
        height: height ?? sizeSet?.height,
        ...styleSet,
    };
};
export const Label = styled.span ``;
const BASE_STYLES = css `
  ${({ theme, ...props }) => {
    const styles = getTheme(props, theme?.new?.button);
    return css `
      cursor: pointer;
      user-select: none;
      font-size: 16px;
      line-height: 20px;
      border-radius: ${styles.borderRadius ?? "2px"};
      transition: color 0.3s ease-in-out, background 0.3s ease-in-out;
      font-size: ${styles.labelTypography?.fontSize};
      line-height: ${styles.labelTypography?.lineHeight};
      font-weight: ${styles.labelTypography?.fontWeight};
      font-family: ${theme.new?.button?.fontFamily};

      width: ${styles.width ?? "unset"};
      height: ${styles.height ?? "unset"};

      border: ${styles.active?.border ?? "unset"};
      color: ${styles.active?.color ?? "unset"};
      background: ${styles.active?.background ?? "unset"};

      ${Label} {
        font-size: ${styles.labelTypography?.fontSize};
        line-height: ${styles.labelTypography?.lineHeight};
        font-weight: ${styles.labelTypography?.fontWeight};
      }

      :hover {
        color: ${styles.hover?.color ?? "unset"};
        background: ${styles.hover?.background ?? "unset"};
        border: ${styles.hover?.border ?? "unset"};
      }
    `;
}}
`;
const INACTIVE_STYLES = css `
  ${({ theme, ...props }) => {
    const styles = getTheme(props, theme?.new?.button);
    const commonStyles = css `
      &.inactive {
        cursor: unset;
      }
    `;
    if (props.disabled)
        return css `
        ${commonStyles}

        .ui-button__loader {
          > div > div {
            background: ${styles.disabled?.color ?? "white"};
          }
        }

        color: ${styles.disabled?.color ?? "unset"};
        border: ${styles.disabled?.border ?? "unset"};
        background: ${styles.disabled?.background ?? "unset"};

        :hover {
          color: ${styles.disabled?.color ?? "unset"};
          border: ${styles.disabled?.border ?? "unset"};
          background: ${styles.disabled?.background ?? "unset"};
        }
      `;
    return css `
      ${commonStyles}

      .ui-button__loader {
        > div > div {
          background: ${styles.active?.color ?? "white"};
        }
      }

      :hover {
        .ui-button__loader {
          > div > div {
            background: ${styles.hover?.color ?? "white"};
          }
        }
      }
    `;
}}
`;
export const ButtonContainer = styled.button `
  ${BASE_STYLES};
  ${INACTIVE_STYLES};
`;
export const Option = styled.div `
  &.ui-button__loader {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 5px;
  }

  &.hidden {
    display: none;
  }
`;
export const LinkContainer = styled.a `
  display: block;
  margin: 0;

  ${BASE_STYLES};

  ${Option} {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }
`;
//# sourceMappingURL=button.styled.js.map