spa_instat_tv/src/features/BuyMatchPopup/styled.tsx

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

import { isMobileDevice } from 'config/userAgent'

import { ButtonOutline, ButtonSolid } from 'features/Common'
import { ModalWindow } from 'features/Modal/styled'
import { Modal as BaseModal } from 'features/Modal'

export const Modal = styled(BaseModal)`
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 52;
  ${ModalWindow} {
    padding: 0;
    border-radius: 5px;

    ${isMobileDevice
    ? css`
      width: calc(100vw - 60px);
      @media screen and (orientation: landscape){
        max-width: calc(100vw - 80px);
        height: calc(100vh - 60px);
        overflow: auto;
      }
    `
    : ''};
  }
`

export const Header = styled.div`
  display: flex;
  justify-content: center;
  padding: 0 40px;
`

export const HeaderTitle = styled.h2`
  font-size: 24px;
  color: #FFFFFF;
  text-align: center;
  ${isMobileDevice
    ? css`
     font-size: 14px;
     font-weight: 700;
    `
    : ''};

`

export const Button = styled(ButtonSolid)`
  width: 275px;
  height: 50px;
  padding: 0 20px;
  background-color: ${({ theme: { colors } }) => colors.button};
  color: ${({ theme: { colors } }) => colors.white};
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
  border-radius: 5px;
  font-weight: 600;
  font-size: 20px;

  ${isMobileDevice
    ? css`
      max-height: 38px;
      min-width: 117px;
      max-width: 49%;
      font-size: 16px;
      @media screen and (orientation: landscape){
        /* min-width: 178px; */
      }

    `
    : ''};

  :disabled {
    opacity: 0.5;
  }
`

type WrapperProps = {
  height?: number,
  width?: number,
}

export const Wrapper = styled.div<WrapperProps>`
  position: relative;
  height: ${({ height }) => (height ? `${height}px` : 'auto')};
  width: ${({ width }) => (width ? `${width}px` : '830px')};
  padding: 40px 10px;

  @media (max-width: 750px){
    width: 100%;
    padding: 40px 10px 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
  }

  ${isMobileDevice
    ? css`
      @media screen and (orientation: landscape){
        padding: 17px 10px 15px;
        width: 100%;
      }

      @media (max-width: 1370px) {
       max-width: 743px;
       /* max-height: 650px; */

      }
      @media (max-width: 650px){
        width: 100%;
        padding: 20px 10px 20px;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
      }
    `
    : ''};
`

type BodyProps = {
  marginBottom?: number,
  marginTop?: number,
  padding?: string,
}

export const Body = styled.div<BodyProps>`
  margin-top: ${({ marginTop }) => (marginTop ? `${marginTop}px` : '')};

  margin-bottom: ${({ marginBottom }) => (
    marginBottom ? `${marginBottom}px` : ''
  )};

  padding: ${({ padding }) => (padding || '')};
  ${isMobileDevice
    ? css`
      margin-top: 0;
      padding: 10px 0 0 0;
      @media screen and (orientation: landscape){
        margin-top: 0;
        padding-top: 0;
      }
    `
    : ''};
`

type FooterProps = {
  marginTop?: number,
}

export const Footer = styled.div<FooterProps>`
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 40px;
  ${isMobileDevice
    ? css`
      @media screen and (orientation: landscape){
        margin-top: 10px;
      }
    `
    : ''};
`

export const ResultText = styled.span`
  width: 100%;
  display: inline-block;
  text-align: center;
  font-weight: normal;
  font-size: 20px;
  line-height: 27px;
  ${isMobileDevice
    ? css`
      font-size: 14px;
      line-height: 18px;
    `
    : ''};
`

export const SmallButton = styled(Button)`
  min-width: 70px;
`

export const ButtonPrevious = styled.button`
  border: none;
  outline: none;
  background-color: transparent;
  padding: 15px;
  position: absolute;
  top: 30px;
  left: 20px;
  cursor: pointer;
`
export const ButtonClear = styled(ButtonOutline)`
  border: 1px solid #FFFFFF;
  border-radius: 4px;
  font-weight: 600;
  font-size: 20px;
  line-height: 16px;
  height: 50px;
  width: 275px;
  max-width: 49%;

  ${isMobileDevice
    ? css`
      height: 100%;
      font-size: 16px;
      width: 100%;
      padding: 0 20px;
      max-width: 49%;
      max-height: 38px;

    `
    : ''};
`
type ButtonsProps = {
  showClearBtn: boolean,
}
export const ButtonBlock = styled.div<ButtonsProps>`
  display: flex;
  flex-direction: row;
  height: 38px;
  width: 100%;
  justify-content: ${({ showClearBtn }) => (showClearBtn ? 'space-between' : 'center')};
`