import { Button, buttonClasses } from '../../../components/Button';
import { DropdownButton } from '../../../components/DropdownButton';
import { IconDropdownButton } from '../../../components/IconDropdownButton';
import { styled } from '../../../components/styled';
export const StyledIconDropDownButton = styled(IconDropdownButton) `
  margin-left: auto;
`;
export const StyledButton = styled(Button) `
  justify-content: flex-start;

  font-weight: ${({ theme }) => theme.typography.fontWeightRegular};
  line-height: ${({ theme }) => theme.typography.h6.lineHeight};

  ${({ theme }) => theme.breakpoints.down('sm')} {
    width: 100%;
    height: unset;
    padding: 0;
  }
`;
export const StyledDropdownButton = styled(DropdownButton) `
  justify-content: flex-start;

  font-weight: ${({ theme }) => theme.typography.fontWeightRegular};
  line-height: ${({ theme }) => theme.typography.h6.lineHeight};

  ${({ theme }) => theme.breakpoints.down('sm')} {
    height: unset;
    padding: 0;

    .${buttonClasses.endIcon} {
      display: none;
    }
  }
`;
