import styled from 'styled-components/macro'

import { Arrows } from 'features/ArrowLoader/Icon'
import { T9n } from 'features/T9n'

export const Wrapper = styled.div`
  position: absolute;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1000;
`

export const Container = styled.div`
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
`

export const Logo = styled.div`
  width: 234px;
  height: 54px;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url(/images/logo.svg);
  margin-bottom: 87px;

  @media (max-width: 850px) {
    width: 144px;
    height: 33px;
    margin-bottom: 54px;
  }
`

export const ArrowLoader = styled(Arrows)`
  width: 94px;
  height: 87px;

  @media (max-width: 850px) {
    width: 58px;
    height: 54px;
  }
`

export const Title = styled(T9n)`
  font-weight: bold;
  font-size: 24px;
  line-height: 24px;
  margin-top: 87px;

  @media (max-width: 850px) {
    font-size: 14px;
    line-height: 15px;
    margin-top: 54px;
  }
`

export const SubTitle = styled(T9n)`
  font-weight: 500;
  font-size: 16px;
  line-height: 20px;
  letter-spacing: 0.03em;
  opacity: 0.8;
  margin-top: 12px;

  @media (max-width: 850px) {
    font-size: 10px;
    line-height: 12px;
    margin-top: 7px;
  }
`
