import React, { useState } from "react"
import { createGlobalStyle } from "styled-components"
import tw, { theme, GlobalStyles as BaseStyles } from "twin.macro"

const CustomStyles = createGlobalStyle`
body {
  -webkit-tap-highlight-color: ${theme`colors.accent`};
}
  
:root{
  --primary: #3d3d3d;
  --secondary: #535353;
  --trinary: #2c2c2c;
  
  --primary-text: #ffffff;
  --secondary-text: #a0a0a0;

  --primary-invert: #f3f3f3;
  --secondary-invert: #dbdbdb;
  --trinary-invert: #ffffff;
  
  --primary-invert-text: #3d3d3d;
  --secondary-invert-text: #535353;

  --accent: #00C800;
  --accent-dark: #008f00;
  --accent-light: #00ed00;
  --accent2: #3080FF;
  --accent2-dark: #225ab4;
  --accent3: #804000;
  --accent3-dark: #472400;
  --accent4: #F8B02C;
  --accent4-dark: #bd8724;
  --accent5: #9E3086;
  --accent5-dark: #6b215b;
}

.light\-theme{
  --primary: #f3f3f3;
  --secondary: #dbdbdb;
  --trinary: #ffffff;
  --primary-text: #3d3d3d;
  --secondary-text: #535353;

  
  --primary-invert: #3d3d3d;
  --secondary-invert: #535353;
  --trinary-invert: #2c2c2c;
  --primary-text-invert: #ffffff;
  --secondary-text-invert: #a0a0a0;
}


::-webkit-scrollbar {
  width: 0.5rem;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--secondary);
  border-radius: 0.25rem;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--accent-dark);
}
`

const GlobalStyles = () => {
  return <>
    <BaseStyles />
    <CustomStyles />
  </>
}

export default GlobalStyles