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

import { isMobileDevice } from 'config/userAgent'
import { client } from 'features/AuthServiceApp/config/clients'

const baseButtonStyles = css`
  width: 272px;
  height: 2.36rem;
  border-width: 0.7px;
  border-style: solid;
  border-radius: 2px;
  padding: 0 0.567rem;
  font-style: normal;
  font-size: 0.95rem;
  outline-color: white;
  cursor: pointer;
  ${isMobileDevice
    ? css`
      height: 27px; 
      min-height: 27px; 
      font-size: 16px;
      width: auto;
    `
    : ''};  

  :disabled {
    opacity: 0.5;
  }
`

export const outlineButtonStyles = css`
  ${baseButtonStyles}

  padding-top: 0.42rem;
  padding-bottom: 0.475rem;
  color: ${({ theme: { colors } }) => colors.white};
  font-weight: normal;
  border-color: ${({ theme: { colors } }) => colors.white};
  background: transparent;
`

export const solidButtonStyles = css`
  ${baseButtonStyles}

  color: #fff;
  font-weight: bold;
  border-color: transparent;
  background-color: ${({ theme: { colors } }) => colors.button};
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
  ${isMobileDevice
    ? css`
      height: 30px; 
      min-height: 30px;
    `
    : ''};  
  
  ${client.styles.submitButton}
`

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

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