'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var styled = require('styled-components');
var utils = require('./utils.js');
var index = require('../../utils/index.js');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);

const FlexButton = styled__default['default'].button `
  display: flex;
  align-items: center;
  justify-content: center;
`;
styled__default['default'](FlexButton).withConfig({
    shouldForwardProp: index.convertToTransientProps(['isLoading']),
}) `
  ${({ size }) => utils.getSVGSize(size)}
`;
const IconButtonContainer = styled__default['default'].button.withConfig({
    shouldForwardProp: index.convertToTransientProps([
        'isLoading',
        'hasFocus',
    ]),
}) `
  display: flex;
  align-items: center;
  justify-content: center;
  height: ${({ size }) => utils.getIconButtonSize(size)};
  width: ${({ size }) => utils.getIconButtonSize(size)};
  border-radius: ${({ theme }) => theme.radius.roundedE};
  background-color: ${({ variant, isLoading, theme }) => {
    return isLoading
        ? utils.getIconButtonBackgroundColorLoading(variant, theme.mode === 'dark')
        : utils.getIconButtonBackgroundColor(variant);
}};
  border: unset;
  ${({ disabled, variant, isLoading }) => {
    return (disabled &&
        !isLoading &&
        styled.css `
        background-color: ${utils.getDisabledBackgroundColor(variant)};
      `);
}}
  &:hover {
    cursor: ${({ isLoading }) => (isLoading ? 'wait' : 'pointer')};
    background: ${({ isLoading, disabled, variant, theme }) => !isLoading &&
    !disabled &&
    utils.getHoverIconButtonBackground(variant, theme.mode === 'dark')};
  }
  &:active {
    background: ${({ isLoading, disabled, variant, theme }) => !isLoading &&
    !disabled &&
    utils.getActiveIconButtonBackground(variant, theme.mode === 'dark')};
  }
  svg {
    ${({ size, variant, disabled, isLoading }) => {
    return styled.css `
        ${utils.getSVGSize(size)};
        fill: ${isLoading
        ? utils.getSpinnerType(variant)
        : utils.getIconButtonSvgColor(variant, disabled)};
      `;
}}
  }
  &:disabled:hover {
    cursor: not-allowed;
  }
  &:focus,
  &:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px
      ${({ variant, hasFocus }) => utils.getBorderColor(variant, hasFocus)};
  }
  ${index.getDefaultTransition()};
`;

exports.FlexButton = FlexButton;
exports.IconButtonContainer = IconButtonContainer;
