import getColors from './colors';
import { createGlobalStyle } from 'styled-components';

const { COLOR_PRIMARY, COLOR_SECONDARY, COLOR_TERTIARTY } = getColors();

export const GlobalStyle = createGlobalStyle`
:root {
    --color-background: rgb(240, 240, 240);
    --color-primary: ${COLOR_PRIMARY};
    --color-secondary: ${COLOR_SECONDARY};
    --color-tertiarty: ${COLOR_TERTIARTY};
    } 

 /* Scroll bar stylings */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  /* Track */
  ::-webkit-scrollbar-track {
  }
  
  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.3); 
    border-radius: 2px;
  }

  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: rgba(0,0,0,0.4); 
  }
`;