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

import { Logo } from 'features/Logo'
import { ButtonSolid } from 'features/Common/Button'

import { isMobileDevice } from 'config/userAgent'

export const ScHeader = styled.div`
  width: 100%;
  padding: 32px 36px;
  background: linear-gradient(236.13deg, rgba(53, 96, 225, 0.56) -4.49%, rgba(0, 0, 0, 0) 98.29%), #000000;

  ${isMobileDevice
    ? css`
       display: flex;
       justify-content: center;
       padding: 10px;
      `
    : ''};
`

export const ScHeaderLogo = styled(Logo)`
`

export const ScWrapper = styled.div`
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100vh;
  padding-bottom: 0;
`

export const ScWrapperContent = styled.div`
  display: flex;
  flex-direction: row;
  padding: 100px 170px 82px 170px;

  ${isMobileDevice
    ? css`
        padding: 5px;
        flex-direction: column;


        @media screen and (orientation: landscape) {
          align-items: center;
      }
      `
    : ''};
`

export const ScButton = styled(ButtonSolid)`
  width: 270px;
  height: 50px;
  background: #294FC4;
  border-radius: 5px;
`

export const ScButtonWrap = styled.div<{disabled: boolean}>`
  display: flex;
  justify-content: center;
  margin-bottom: 100px;

  ${isMobileDevice
    ? css`
        position: fixed;
        bottom: 10px;
        left: 50%;
        transform: translate(-62%, 0);
        margin-bottom: 0px;
        width: 270px;

        @media (orientation: landscape) {
          transform: translate(-50%, 0);
        }
      `
    : ''};

  opacity: ${({ disabled }) => (disabled ? 0.7 : 1)}
`

export const ScPrice = styled.span`
  font-weight: 600;
  font-size: 20px;
  line-height: 50px;
  margin: auto 0;

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