/* eslint-disable consistent-return */
import { createGlobalStyle, css } from 'styled-components';

export const GlobalStyle = createGlobalStyle`
  html, body {
    margin: 0;
    background-color: #c8c8c8;
    height: 100%;
    font-size: 14px;
  }

  div {
    box-sizing: border-box;
  }

  ${({ lang }) => {
    if (lang === 'zh-tw') return css`@import url('https://fonts.googleapis.com/css?family=Noto+Sans+TC:300,400,700&display=swap');`;
    if (lang === 'zh-cn') return css`@import url('https://fonts.googleapis.com/css?family=Noto+Sans+SC:300,400,700&display=swap');`;
    if (lang === 'ja') return css`@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP:300,400,700&display=swap');`;
    if (lang === 'en') return css`@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,700&display=swap');`;
  }}
  
  &:lang(en) {
    font-family: 'Open Sans', sans-serif;
  }
  &:lang(zh-tw) {
    font-family: 'Noto Sans TC', sans-serif;
  }
  &:lang(zh-cn) {
    font-family: 'Noto Sans SC', sans-serif;
  }
  &:lang(ja) {
    font-family: 'Noto Sans JP', sans-serif;
  }
`;

export default GlobalStyle;
