import styled, { css } from 'styled-components/macro'

import { devices } from 'config/devices'

const baseButtonStyles = css`
  width: 272px;
  height: 48px;
  border-width: 0.7px;
  border-style: solid;
  border-radius: 2px;
  padding: 0 12px;

  font-style: normal;
  font-size: 20px;
  outline-color: white;
`

export const outlineButtonStyles = css`
  ${baseButtonStyles}

  padding-top: 8.6px;
  padding-bottom: 10.6px;
  color: ${({ theme: { colors } }) => colors.secondary};
  font-weight: normal;
  border-color: ${({ theme: { colors } }) => colors.secondary};
  background: transparent;
`

export const solidButtonStyles = css`
  ${baseButtonStyles}

  color: #fff;
  font-weight: bold;
  cursor: pointer;
  border-color: transparent;
  background: ${({ theme: { colors } }) => colors.primary};

  @media ${devices.mobile} {
    width: 335px;
    height: 40px;
  }
`

export const ButtonSolid = styled.button`
  ${solidButtonStyles}
`

export const ButtonOutline = styled.button`
  ${outlineButtonStyles}
`