import {createGlobalStyle} from 'styled-components';
import theme from 'styled-theming';

export default createGlobalStyle`
  :root {
    --body: ${theme('theme', {
      light: 'var(--body-light)',
      dark: 'var(--body-dark)',
    })};
    --widget: ${theme('theme', {
      light: 'var(--widget-light)',
      dark: 'var(--widget-dark)',
    })};
    --widget-grid-bg: ${theme('theme', {
        light: 'var(--widget-light)',
        dark: '#2f3035',
    })};
    --widget-shadow: ${theme('theme', {
      light: '0 1px 8px rgba(110, 110, 110, .1)',
      dark: '0 1px 8px rgba(18, 20, 20, .5)',
    })};
    --winget-inner-shadow: ${theme('theme', {
      light: 'linear-gradient(270deg, rgba(255, 255, 255, 0.0001) 0%, #FFFFFF 100%)',
      dark: 'linear-gradient(270deg, rgba(17, 19, 18, 0.0001) 0%, #111312 100%)',
    })};
    --text: ${theme('theme', {
      light: 'var(--text-light)',
      dark: 'var(--text-dark)',
    })};
    --border: ${theme('theme', {
      light: 'var(--border-light)',
      dark: 'var(--border-dark)',
    })};
    --header: ${theme('theme', {
      light: 'var(--header-light)',
      dark: 'var(--header-dark)',
    })};
    --header-invert: ${theme('theme', {
        light: 'var(--header-dark)',
        dark: 'var(--header-light)',
    })};
    --label: ${theme('theme', {
      light: 'var(--btn-text-light)',
      dark: 'var(--text-dark)',
    })};
    --btn-text: ${theme('theme', {
      light: 'var(--btn-text-light)',
      dark: 'var(--widget-light)',
    })};
    --highlight: ${theme('theme', {
      light: 'var(--olive)',
      dark: 'var(--accent)',
    })};
    --highlight-invert: ${theme('theme', {
        light: 'var(--accent)',
        dark: 'var(--olive)',
    })};
    --tooltip-bg: ${theme('theme', {
        light: 'var(--widget)',
        dark: 'var(--black-2)',
    })};
    --nav-arrow-color: ${theme('theme', {
        light: 'var(--header)',
        dark: '#8EA2AB',
    })};
    --nav-arrow-hover-color: ${theme('theme', {
        light: 'var(--blue)',
        dark: 'var(--accent)',
    })};
    --divider: ${theme('theme', {
        light: '#ccc',
        dark: '#25272C',
    })};
    --placeholder: ${theme('theme', {
        light: '#8C9876',
        dark: '#999999'
    })};
    --score-alt: ${theme('theme', {
        light: 'var(--border)',
        dark: 'var(--black-3)'
    })};
    --standard: ${theme('theme', {
        light: 'var(--standard-light)',
        dark: 'var(--standard-dark)'
    })};
    --nav-item-bg:${theme('theme', {
        light: '#f6f7fb',
        dark: '#191a1f'
    })};
    --nav-item-top:${theme('theme',{
        light:'#f6f7fc',
        dark:'#25262c'
    })};
    --nav-item-hover:${theme('theme',{
        light:'rgba(236,236,245,0.5)',
        dark:'rgba(69,70,80,0.5)'
    })};
    --widget-bg: ${theme('theme', {
        light: '#f6f7fb',
        dark: '#25262b',
    })};
    --swiper-btn-bg: ${theme('theme',{
        light:'#FFFFFF',
        dark:'#2a2b31',
    })};
    --card-bg: ${theme('theme', {
        light: '#FFFFFF',
        dark: '#2f3036',
    })};
      --card-bg-2: ${theme('theme', {
          light: 'rgba(130,130,130,0.3)',
          dark: '#31343c',
      })};
      --card-bg-3: ${theme('theme', {
          light: 'rgba(55,58,63,0.3)',
          dark: '#373a3f',
      })};
    --card-line: ${theme('theme', {
        light: 'rgba(0,0,0,.05)',
        dark: 'rgba(255,255,255,.05)',
    })};
    --pay-btn-bg: ${theme('theme', {
        light: '#FFFFFF',
        dark:'rgba(69,70,80,0.5)'
    })};
    --progressierElement: ${theme('theme', {
        light: '#fafafa !important',
        dark:'#29292e !important'
    })};
    --progressierBorderColor: ${theme('theme', {
        light: '#eaeaea !important',
        dark:'#313137 !important'
    })};
    --progressierHover: ${theme('theme', {
        light: '#f6f6f6 !important',
        dark:'#191a1e !important'
    })};
    --progressierBackdrop: ${theme('theme', {
        light: 'rgba(255, 255, 255, 0.90) !important',
        dark:'rgba(0, 0, 0, 0.90) !important'
    })};
    --input-border: ${theme('theme', {
        light:'rgba(0,0,0,0.1)',
        dark:'rgba(255,255,255,0.1)'
    })};
  }
`;