/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
import { styled, css } from 'styled-components';
import { Box } from '../../atoms/box/index.js';
import { Button } from '../../atoms/button/index.js';
import { cssClass, themeGet } from '../../utils/index.js';
import { DropDownItemAction } from '../../molecules/drop-down/index.js';
export const BUTTON_IN_GROUP_CLASS_NAME = cssClass('ButtonGroupItem');
export const buttonMargin = props => {
  const {
    size
  } = props;
  const margin = size === 'sm' ? 'md' : 'lg';
  return css(["& > .", "{margin-right:", ";&:last-child{margin-right:0;}}"], BUTTON_IN_GROUP_CLASS_NAME, themeGet('space', margin));
};
export const hasHandler = props => {
  if (!props.onClick && !props.href) {
    return css(["&&&{cursor:default;}"]);
  }
  return '';
};
export const hasLabel = props => {
  if (!props.hasLabel) {
    return css(["border:none;padding-left:", ";padding-right:", ";& > .", " svg{margin-right:0;}"], themeGet('space', 'md'), themeGet('space', 'md'), cssClass('Icon'));
  }
  return '';
};
export const StyledSingleButton = styled(Button).withConfig({
  displayName: "button-groupstyled__StyledSingleButton",
  componentId: "sc-sva6n-0"
})(["", ";", ";"], hasLabel, hasHandler);
export const StyledDropDownItemAction = styled(DropDownItemAction).withConfig({
  displayName: "button-groupstyled__StyledDropDownItemAction",
  componentId: "sc-sva6n-1"
})(["", ";"], hasLabel);
export const StyledButtonGroup = styled(Box).withConfig({
  displayName: "button-groupstyled__StyledButtonGroup",
  componentId: "sc-sva6n-2"
})(["", ";"], buttonMargin);