import { Button } from '../../../components/Button';
import { styled } from '../../../components/styled';
import { FormSubmitButton } from '../../FormSubmitButton';
export const ActionsWrapper = styled('div', {
    shouldForwardProp: (prop) => !['$isShowMoreButton'].includes(prop),
}) `
  display: flex;
  flex-direction: row-reverse;
  gap: ${({ theme }) => theme.spacing(4)};  

  width: 100%;

  ${({ theme }) => theme.breakpoints.down('sm')} {
    overflow: auto;
    flex-direction: column;
    gap: 0;

    padding: ${({ theme, $isShowMoreButton }) => $isShowMoreButton ? theme.spacing(4, 4, 0) : theme.spacing(4)};
  }
`;
export const ShowMoreButton = styled(Button, {
    shouldForwardProp: (prop) => !['$isActive'].includes(prop),
}) `
  display: none;

  ${({ theme }) => theme.breakpoints.down('sm')} {
    display: flex;

    width: 100%;
    height: 36px;
    min-height: 36px;
    margin-top: ${({ theme }) => theme.spacing(2)};
    margin-bottom: ${({ theme }) => theme.spacing(4)};
    padding: 0;

    &:hover {
      background-color: unset;
    }
  }
`;
export const StyledFormSubmitButton = styled(FormSubmitButton, {
    shouldForwardProp: (prop) => !['$isShowSecondaryActions'].includes(prop),
}) `
  ${({ theme }) => theme.breakpoints.down('sm')} {
    height: 50px;
    margin-bottom: ${({ theme, $isShowSecondaryActions }) => $isShowSecondaryActions ? theme.spacing(2) : 0};
  }
`;
