// =============================================================================
// Import
// =============================================================================

// Styles
import glamorous from 'glamorous';
import { color, typography } from '../utils/styles';

// =============================================================================
// Heading
// =============================================================================

export const Heading = glamorous.h1(
  {
    lineHeight:    '1em',
    letterSpacing: '-0.025em',
    fontFamily:    typography.font.family.headings,
  },
  ({ fontSize, fontWeight, color, marginBottom }) => ({
    fontSize,
    fontWeight,
    color,
    marginBottom,
  }),
);

Heading.defaultProps = {
  fontSize:     '3rem',
  fontWeight:   '900',
  color:        'inherit',
  marginBottom: '0',
};

// =============================================================================
// Subheading
// =============================================================================

export const Subheading = glamorous.h2(
  {
    lineHeight: '1em',
    fontFamily: typography.font.family.headings,
  },
  ({ fontSize, fontWeight, color, marginBottom }) => ({
    fontSize,
    fontWeight,
    color,
    marginBottom,
  }),
);

Subheading.defaultProps = {
  fontSize:     '2.5rem',
  fontWeight:   '300',
  color:        'inherit',
  marginBottom: '0',
};

// =============================================================================
// Title
// =============================================================================

export const Title = glamorous.h3(
  {
    lineHeight: '1em',
    fontFamily: typography.font.family.headings,
  },
  ({ fontSize, fontWeight, color, marginBottom }) => ({
    fontSize,
    fontWeight,
    color,
    marginBottom,
  }),
);

Title.defaultProps = {
  fontSize:     '2rem',
  fontWeight:   '900',
  color:        'inherit',
  marginBottom: '0',
};

// =============================================================================
// Subtitle
// =============================================================================

export const Subtitle = glamorous.h4(
  {
    lineHeight: '1em',
    fontFamily: typography.font.family.headings,
  },
  ({ fontSize, fontWeight, color, marginBottom }) => ({
    fontSize,
    fontWeight,
    color,
    marginBottom,
  }),
);

Subtitle.defaultProps = {
  fontSize:     '1.5rem',
  fontWeight:   '300',
  color:        'inherit',
  marginBottom: '0',
};

// =============================================================================
// Text
// =============================================================================

export const Text = glamorous.p(
  {
    lineHeight: '1.25rem',
  },
  ({ fontSize, fontWeight, color, marginBottom, opacity, textAlign }) => ({
    fontSize,
    fontWeight,
    color,
    marginBottom,
    opacity,
    textAlign,
  }),
);

Text.defaultProps = {
  fontSize:     'inherit',
  fontWeight:   '400',
  color:        'inherit',
  marginBottom: '0',
  opacity:      '1',
};

// =============================================================================
// Pill
// =============================================================================

export const Pill = glamorous.span({
  display:      'inline-block',
  borderRadius: 999,
  padding:      '0 1em',
  color:        color.brand.primary,
  border:       `1px solid ${color.brand.primary}`,
  '& + &':      {
    marginLeft: '0.5rem',
  },
});

// =============================================================================
// Helpers
// =============================================================================

export const Comma = glamorous.span({
  '& + &::before': {
    content: "', '",
  },
});

@@ -2678,24 +2678,25 @@
 morous.p(%0A  
+(
 %7B%0A    lineHe
@@ -2703,30 +2703,13 @@
 ight
-: '1.25rem',%0A  %7D,%0A  (%7B
+,%0A   
  fon
@@ -2706,32 +2706,36 @@
 t,%0A    fontSize,
+%0A   
  fontWeight, col
@@ -2722,39 +2722,47 @@
 %0A    fontWeight,
+%0A   
  color,
+%0A   
  marginBottom, o
@@ -2759,16 +2759,20 @@
 nBottom,
+%0A   
  opacity
@@ -2772,16 +2772,20 @@
 opacity,
+%0A   
  textAli
@@ -2786,25 +2786,82 @@
 extAlign
- %7D) =%3E (%7B
+,%0A    textTransform,%0A    letterSpacing,%0A  %7D) =%3E (%7B%0A    lineHeight,
 %0A    fon
@@ -2940,16 +2940,54 @@
 tAlign,%0A
+    textTransform,%0A    letterSpacing,%0A
   %7D),%0A);
@@ -3002,32 +3002,60 @@
 efaultProps = %7B%0A
+  lineHeight:    '1.25rem',%0A
   fontSize:     
@@ -3050,24 +3050,25 @@
 ntSize:     
+ 
 'inherit',%0A 
@@ -3075,24 +3075,25 @@
  fontWeight:
+ 
    '400',%0A  
@@ -3098,32 +3098,33 @@
   color:        
+ 
 'inherit',%0A  mar
@@ -3129,24 +3129,25 @@
 arginBottom:
+ 
  '0',%0A  opac
@@ -3160,13 +3160,92 @@
     
+ 
 '1',%0A
+  textAlign:     'inherit',%0A  textTransform: 'inherit',%0A  letterSpacing: '0',%0A
 %7D;%0A%0A

update Text lineHeight to be a prop