// @flow
import { Platform, StyleSheet } from 'react-native';
import { space } from '../Utils/Theme';

const styles = StyleSheet.create({
  text: {
    ...Platform.select({
      web: {
        WebkitFontSmoothing: 'antialiased',
        MozOsxFontSmoothing: 'grayscale',
        fontFamily: 'Roboto, sans-serif',
        fontSize: 13,
      },
      default: {
        fontFamily: 'Roboto',
        fontSize: 14,
      },
    }),
  },
  display4: {
    fontSize: 112,
    fontWeight: '300',
    letterSpacing: -4.48,
    lineHeight: 128,
    marginBottom: 64,
  },
  display3: {
    fontSize: 56,
    letterSpacing: -1.12,
    lineHeight: 72,
    marginBottom: 64,
  },
  display2: {
    fontSize: 45,
    lineHeight: 48,
    marginBottom: 64,
  },
  display1: {
    fontSize: 34,
    lineHeight: 40,
    marginBottom: 64,
  },
  headline: {
    fontSize: 24,
    lineHeight: 32,
    marginBottom: space.large,
  },
  title: {
    fontSize: 20,
    fontWeight: '500',
    letterSpacing: 0.4,
    lineHeight: 24,
    marginBottom: space.large,
  },
  subheading: {
    ...Platform.select({
      web: {
        fontSize: 15,
      },
      default: {
        fontSize: 16,
      },
    }),
    letterSpacing: 0.64,
    lineHeight: 24,
    marginBottom: space.large,
  },
  body2: {
    fontWeight: '500',
    letterSpacing: 0.56,
    lineHeight: 24,
    marginBottom: 12,
  },
  body1: {
    letterSpacing: 0.56,
    lineHeight: 20,
    marginBottom: 12,
  },
  caption: {
    fontSize: 12,
    letterSpacing: 0.96,
    lineHeight: 16,
  },
  button: {
    fontSize: 14,
    fontWeight: '500',
    letterSpacing: 0.56,
    lineHeight: 16,
    textAlign: 'center',
  },
});

export default styles;
