import { css } from 'styled-components';
import space from 'Components/utils/styles/space';
import { textSize } from 'Themes/utils/fontPickers';
import { screenSize } from 'Themes/utils/mediaQueries';

const size = ({ small }) =>
  small
    ? css`
        font-size: ${textSize('M')};
        min-height: 40px;
        line-height: 1.29;
        padding: 0 24px;
        width: 84vw;

        @media ${screenSize('desktop')} {
          min-height: 32px;
          line-height: 1.33;
          padding: 0 16px;
          min-width: 140px;
          width: 0;
        }
      `
    : css`
        font-size: ${textSize('M')};
        min-height: 40px;
        line-height: 1.29;
        padding: 0 24px;
        width: 84vw;

        @media ${screenSize('desktop')} {
          min-width: 184px;
          width: 0;
        }
      `;

export default css`
  font-weight: bold;
  border-radius: 4px;
  border-style: solid;
  border-width: thin;
  box-sizing: border-box;
  cursor: pointer;
  text-align: center;
  transition: all 0.2s ease-out;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: none;
  ${space}
  ${size}

  &:disabled {
    cursor: not-allowed;
  }
`;
