import { css, Global } from '@emotion/react';
import React from 'react';
import { useTheme } from 'antd-style';

export default () => {
  const { headerHeight, margin } = useTheme();

  return (
    <Global
      styles={css`
      body,
      div,
      dl,
      dt,
      dd,
      ul,
      ol,
      li,
      h1,
      h2,
      h3,
      h4,
      h5,
      h6,
      pre,
      code,
      form,
      fieldset,
      legend,
      input,
      textarea,
      p,
      blockquote,
      th,
      td,
      hr,
      button,
      article,
      aside,
      details,
      figcaption,
      figure,
      footer,
      header,
      hgroup,
      menu,
      nav,
      section {
        margin: 0;
        padding: 0;
      }

      ul,
      ol {
        list-style: none;
      }

      img {
        vertical-align: middle;
        border-style: none;
      }

      html {
        scroll-padding-top: ${headerHeight + margin}px;
      }

      [data-prefers-color='dark'] {
        color-scheme: dark;
      }
    `}
    />
  );
};
