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

import { isMobileDevice } from 'config'

import { ButtonSolid } from 'features/Common'

export const AccessTimerContainer = styled.div<{isFullscreen?: boolean}>`
  display: flex;
  align-items: center;
  
  position: absolute;
  left: 50%;
  bottom: 5.7rem;
  transform: translateX(-50%);
  background-color: #333333;
  border-radius: 5px;
  padding: 20px 50px;
  
  gap: 40px;

  ${isMobileDevice
    ? css`
        padding: 9px 7px 9px 15px;
         bottom: 6.5rem;

        @media screen and (orientation: landscape) {
          max-width: 95%;
          bottom: 4rem;
        }
      `
    : ''};
  
  ${({ isFullscreen }) => isFullscreen && css`
    ${isMobileDevice
    ? css`
        padding: 9px 7px 9px 15px;
         bottom: 12rem;

        @media screen and (orientation: landscape) {
          max-width: 95%;
          bottom: 6rem;
        }
      `
    : ''};
  `}
`

export const SignInBtn = styled(ButtonSolid)`
  width: 246px;
  border-radius: 5px;
  height: 50px;
  font-weight: 600;
  font-size: 20px;
  white-space: nowrap;
  padding: 0 35px;

  ${isMobileDevice
    ? css`
      font-size: 12px;
      white-space: nowrap;
      padding: 0px 16px;
      width: 140px;
      height: 30px;

            @media screen and (orientation: landscape) {
              font-size: 12px;
              padding: 0px 8px;
            }
      `
    : ''};

`

export const TimerContainer = styled.div`
  color: white;
  font-weight: 700;
  font-size: 20px;
  line-height: 24px;
  white-space: nowrap;
  max-width: 215px;

  ${isMobileDevice
    ? css`
      font-size: 12px;
            line-height: 28px;
      `
    : ''};
`

export const PreviewInfo = styled.div`
  display: flex;
  line-height: 24px;

  ${isMobileDevice
    ? css`
       line-height: 14px;
      `
    : ''};
`

export const Timer = styled.div`
  min-width: 67px;

  ${isMobileDevice
    ? css`
       min-width: 40px;
      `
    : ''};
`

export const SignText = styled.span`
  display: block;
  font-size: 16px;
  line-height: 20px;
  font-weight: 400;
  white-space: break-spaces;

  ${isMobileDevice
    ? css`
      font-size: 9px;
      line-height: 14px
      `
    : ''};
`