import styled, { css } from 'styled-components'
import { tamediaColors } from '../constants/tamediaColors'

export const TamediaStyles = styled.div<{
  $colorMode?: 'light' | 'dark'
}>`
  font-family: var(--font-sans-serif);
  font-size: 1.8rem;
  line-height: calc(1 + 2 / 3);
  margin-bottom: 3rem;
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  --brandblue-main: ${tamediaColors.brandblue.main};
  --brandblue-bright-1: ${tamediaColors.brandblue.bright1};
  --brandblue-bright-2: ${tamediaColors.brandblue.bright2};
  --brandblue-bright-3: ${tamediaColors.brandblue.bright3};
  --brandblue-bright-4: ${tamediaColors.brandblue.bright4};
  --brandblue-bright-5: ${tamediaColors.brandblue.bright5};

  --blue-dark-2: ${tamediaColors.blue.dark2};
  --blue-dark-1: ${tamediaColors.blue.dark1};
  --blue-main: ${tamediaColors.blue.main};
  --blue-bright-1: ${tamediaColors.blue.bright1};
  --blue-bright-2: ${tamediaColors.blue.bright2};
  --blue-bright-3: ${tamediaColors.blue.bright3};

  --yellow-main: ${tamediaColors.yellow.main};

  --petrol-dark-2: ${tamediaColors.petrol.dark2};
  --petrol-dark-1: ${tamediaColors.petrol.dark1};
  --petrol-main: ${tamediaColors.petrol.main};
  --petrol-bright-1: ${tamediaColors.petrol.bright1};
  --petrol-bright-2: ${tamediaColors.petrol.bright2};
  --petrol-bright-3: ${tamediaColors.petrol.bright3};

  --green-dark-2: ${tamediaColors.green.dark2};
  --green-dark-1: ${tamediaColors.green.dark1};
  --green-main: ${tamediaColors.green.main};
  --green-bright-1: ${tamediaColors.green.bright1};
  --green-bright-2: ${tamediaColors.green.bright2};
  --green-bright-3: ${tamediaColors.green.bright3};

  --purple-dark-2: ${tamediaColors.purple.dark2};
  --purple-dark-1: ${tamediaColors.purple.dark1};
  --purple-main: ${tamediaColors.purple.main};
  --purple-bright-1: ${tamediaColors.purple.bright1};
  --purple-bright-2: ${tamediaColors.purple.bright2};
  --purple-bright-3: ${tamediaColors.purple.bright3};

  --orange-dark-2: ${tamediaColors.orange.dark2};
  --orange-dark-1: ${tamediaColors.orange.dark1};
  --orange-main: ${tamediaColors.orange.main};
  --orange-bright-1: ${tamediaColors.orange.bright1};
  --orange-bright-2: ${tamediaColors.orange.bright2};
  --orange-bright-3: ${tamediaColors.orange.bright3};

  --red-dark-2: ${tamediaColors.red.dark2};
  --red-dark-1: ${tamediaColors.red.dark1};
  --red-main: ${tamediaColors.red.main};
  --red-bright-1: ${tamediaColors.red.bright1};
  --red-bright-2: ${tamediaColors.red.bright2};
  --red-bright-3: ${tamediaColors.red.bright3};

  --beige-dark-2: ${tamediaColors.beige.dark2};
  --beige-dark-1: ${tamediaColors.beige.dark1};
  --beige-main: ${tamediaColors.beige.main};
  --beige-bright-1: ${tamediaColors.beige.bright1};
  --beige-bright-2: ${tamediaColors.beige.bright2};
  --beige-bright-3: ${tamediaColors.beige.bright3};

  --gray-1: ${tamediaColors.gray.gray1};
  --gray-2: ${tamediaColors.gray.gray2};
  --gray-3: ${tamediaColors.gray.gray3};
  --gray-4: ${tamediaColors.gray.gray4};
  --gray-5: ${tamediaColors.gray.gray5};
  --gray-6: ${tamediaColors.gray.gray6};

  --tenant-bz: ${tamediaColors.tenants.light.bz};
  --tenant-bol: ${tamediaColors.tenants.light.bol};
  --tenant-lt: ${tamediaColors.tenants.light.lt};
  --tenant-tt: ${tamediaColors.tenants.light.tt};
  --tenant-zrz: ${tamediaColors.tenants.light.zrz};
  --tenant-tdg: ${tamediaColors.tenants.light.tdg};
  --tenant-zul: ${tamediaColors.tenants.light.zul};
  --tenant-l: ${tamediaColors.tenants.light.l};
  --tenant-baz: ${tamediaColors.tenants.light.baz};
  --tenant-24h: ${tamediaColors.tenants.light['24h']};
  --tenant-bnd: ${tamediaColors.tenants.light.bnd};
  --tenant-ta: ${tamediaColors.tenants.light.ta};

  --text-color: ${tamediaColors.offBlack};
  --site-background: #fff;

  ${({ $colorMode: colorMode }) =>
    colorMode === 'dark'
      ? css`
          // 🌚 all Dark Mode variables
          --tenant-bz: ${tamediaColors.tenants.dark.bz};
          --tenant-bol: ${tamediaColors.tenants.dark.bol};
          --tenant-lt: ${tamediaColors.tenants.dark.lt};
          --tenant-tt: ${tamediaColors.tenants.dark.tt};
          --tenant-zrz: ${tamediaColors.tenants.dark.zrz};
          --tenant-tdg: ${tamediaColors.tenants.dark.tdg};
          --tenant-zul: ${tamediaColors.tenants.dark.zul};
          --tenant-l: ${tamediaColors.tenants.dark.l};

          --text-color: ${tamediaColors.gray.gray6};
          --site-background: ${tamediaColors.offBlack};
        `
      : ''}

  // FONTS
  --font-sans-serif: "Libre Franklin", Helvetica, Arial, Verdana, sans-serif;;
  --font-serif: "Sole Serif", "Times New Roman", serif; 
  color: var(--text-color);
`