var Colors = {
  WHITE: '#fff',
  GRAY1: '#f3f4f4',
  GRAY3: '#dee1e1',
  GRAY7: '#929a9b',
  TEXT: '#515e60',
  TEAL: '#11a7aa',
  YELLOW: '#f9b450',
  RED: '#b34',
  TWITTER: '#2caae1',
  FACEBOOK: '#3b5998',
  LINKEDIN: '#008ac1',
  DROP: 'rgba(81,94,96,.1)',
  OVERLAY: 'rgba(81,94,96,.5)',
  TINT: 'rgba(255,255,255,.5)',
};

var Shared = {
  // Structure
  // Navigation
  NavItem: {
    cursor: 'pointer',
    lineHeight: '20px',
  },
  MediumNavItem: {
    padding: '10px 20px',
  },
  SmallNavItem: {
    padding: '5px 20px',
  },
  // Media
  Avatar: {
    backgroundSize: 'cover',
    borderRadius: '50%',
  },
  // Forms
  FieldBorderColor: {
    borderColor: Colors.GRAY3,
  },
  Checkbox: {
    cursor: 'pointer',
    lineHeight: '18px',
    padding: '6px',
  },
  CheckboxOuter: {
    borderStyle: 'solid',
    borderWidth: '1px',
    boxSizing: 'border-box',
    display: 'inline-block',
    height: '18px',
    position: 'relative',
    verticalAlign: 'top',
    width: '18px',
  },
  CheckboxRadius: {
    borderRadius: '3px',
  },
  CheckboxInner: {
    background: 'transparent',
    borderStyle: 'solid',
    borderWidth: '0 3px 3px 0',
    boxSizing: 'border-box',
    height: '12px',
    left: '5px',
    position: 'absolute',
    top: '1px',
    transform: 'rotate(45deg)',
    width: '6px',
  },
  CheckboxElement: {
    display: 'none',
  },
  RadioRadius: {
    borderRadius: '50%',
  },
  RadioInner: {
    borderRadius: '50%',
    height: '8px',
    left: '4px',
    position: 'absolute',
    top: '4px',
    width: '8px',
  },
  SwitchOuter: {
    borderStyle: 'solid',
    borderWidth: '1px',
    borderRadius: '15px',
    boxSizing: 'border-box',
    display: 'inline-block',
    height: '30px',
    position: 'relative',
    verticalAlign: 'bottom',
    width: '50px',
  },
  SwitchInner: {
    borderRadius: '50%',
    height: '24px',
    position: 'absolute',
    top: '2px',
    width: '24px',
  },
  Field: {
    boxSizing: 'border-box',
    color: 'inherit',
    fontFamily: 'inherit',
    letterSpacing: 'inherit',
    lineHeight: 'normal',
    width: '100%',
  },
  MediumField: {
    fontSize: '14px',
    padding: '10px',
  },
  // Buttons
  Button: {
    borderRadius: '3px',
    cursor: 'pointer',
    fontFamily: 'inherit',
    fontWeight: 600,
    letterSpacing: 'inherit',
    lineHeight: '20px',
    minWidth: '120px',
  },
  LargeButton: {
    border: 0,
    fontSize: '16px',
    padding: '15px 25px',
  },
  MediumButton: {
    border: 0,
    fontSize: '15px',
    padding: '10px 20px',
  },
  SmallButton: {
    border: 0,
    fontSize: '14px',
    padding: '6px 15px 4px',
  },
  PrimaryButton: {
    background: Colors.TEAL,
    color: Colors.WHITE,
  },
  DangerButton: {
    background: Colors.RED,
    color: Colors.WHITE,
  },
  TwitterButton: {
    background: Colors.TWITTER,
    color: Colors.WHITE,
  },
  FacebookButton: {
    background: Colors.FACEBOOK,
    color: Colors.WHITE,
  },
  LinkedInButton: {
    background: Colors.LINKEDIN,
    color: Colors.WHITE,
  },
  PassiveButton: {
    background: 'none',
    border: `1px solid `+ Colors.TEXT,
    color: Colors.TEXT,
    opacity: .5,
  },
  TextButton: {
    background: 'none',
    border: 0,
    cursor: 'pointer',
    fontFamily: 'inherit',
    fontSize: 'inherit',
    fontWeight: 600,
    letterSpacing: 'inherit',
  },
  PrimaryText: {
    color: Colors.TEAL,
  },
  // Icons
  Icon: {
    fill: 'currentColor',
  },
  // Typography
  // Buttons
  // Prompts
  InlineAlert: {
    color: Colors.WHITE,
    fontWeight: 600,
    lineHeight: '20px',
    padding: '6px 10px 4px',
  },
  // Content
};

var Components = {
  // Base
  Body: {
    color: Colors.TEXT,
    font: '14px/1 proxima-nova, sans-serif',
    letterSpacing: '.01em',
    margin: 0,
    WebkitFontSmoothing: 'antialiased',
  },
  // Guide
  GuideSection: {
    borderBottom: '1px solid '+ Colors.GRAY3,
    padding: '50px',
  },
  GuideAlign: {
    margin: '0 auto',
    maxWidth: '1200px',
  },
  GuideH1: {
    fontSize: '60px',
  },
  GuideH2: {
    fontSize: '45px',
    fontWeight: 400,
  },
  GuideH3: {
    fontSize: '30px',
    fontWeight: 400,
  },
  GuideP: {
    color: Colors.GRAY7,
    fontSize: '16px',
  },
  GuideCode: {
    background: Colors.GRAY1,
    borderRadius: '2px',
    color: Colors.TEXT,
    display: 'inline-block',
    padding: '3px',
  },
  // Structure
  DesktopLayout: {
    background: Colors.GRAY1,
    minHeight: '100vh',
  },
  Header: {
    borderBottom: '1px solid '+ Colors.GRAY3,
    lineHeight: '30px',
    padding: '20px 0',
  },
  Overlay: {
    background: Colors.OVERLAY,
    minHeight: '100vh',
  },
  // Navigation
  CompanyLogo: {
    backgroundSize: 'cover',
    height: '90px',
    width: '180px',
  },
  MediumNavItem: Object.assign({
    background: Colors.GRAY1,
  }, Shared.NavItem, Shared.MediumNavItem),
  MediumNavItemHover: Object.assign({
    background: Colors.TINT,
  }, Shared.NavItem, Shared.MediumNavItem),
  MediumNavItemSelected: Object.assign({
    background: Colors.WHITE,
    borderLeft: '3px solid '+ Colors.TEAL,
    fontWeight: 600,
    padding: '10px 20px 10px 17px',
  }, Shared.NavItem),
  SmallNavItem: Object.assign({
    background: Colors.GRAY1,
  }, Shared.NavItem, Shared.SmallNavItem),
  UtilityNavItem: Object.assign({
    background: Colors.WHITE,
    color: Colors.GRAY7,
    padding: '11px 20px 9px',
  }, Shared.NavItem),
  UtilityNavItemHover: Object.assign({
    background: Colors.GRAY1,
    padding: '11px 20px 9px',
  }, Shared.NavItem),
  UtilityNavItemSelected: Object.assign({
    background: Colors.TEAL,
    color: Colors.WHITE,
    fontWeight: 600,
    padding: '11px 20px 9px',
  }, Shared.NavItem),
  UtilityNav: {
    border: '1px solid '+ Colors.GRAY3,
    borderRadius: '3px',
    boxShadow: '3px 3px 0 '+ Colors.DROP,
    padding: '10px 0',
    width: '240px',
  },
  AccountButton: {
    background: Colors.GRAY1,
    borderTop: '1px solid '+Colors.GRAY3,
    cursor: 'pointer',
    padding: '10px',
    position: 'relative',
  },
  AccountButtonName: {
    display: 'inline-block',
    fontSize: '16px',
    margin: '0 0 0 10px',
  },
  // Media
  LargeAvatar: Object.assign({
    height: '100px',
    width: '100px',
  }, Shared.Avatar),
  MediumAvatar: Object.assign({
    height: '50px',
    width: '50px',
  }, Shared.Avatar),
  SmallAvatar: Object.assign({
    height: '30px',
    width: '30px',
  }, Shared.Avatar),
  HeroImage: {
    backgroundColor: Colors.TEXT,
    height: '350px',
    position: 'relative',
    width: '700px',
  },
  HeroGradient: {
    backgroundImage: 'linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.9))',
    height: '100%',
    left: 0,
    position: 'absolute',
    top: 0,
    width: '100%',
  },
  ArticleThumb: {
    height: '100px',
    width: '100px',
  },
  TwitterThumb: {
    borderRadius: '10px',
    height: '100px',
    width: '100px',
  },
  // Forms
  Checkbox: Object.assign({}, Shared.Checkbox),
  CheckboxOuter: Object.assign({}, Shared.FieldBorderColor, Shared.CheckboxOuter, Shared.CheckboxRadius),
  CheckboxElement: Object.assign({}, Shared.CheckboxElement),
  FocusedCheckbox: Object.assign({}, Shared.Checkbox),
  FocusedCheckboxOuter: Object.assign({
    borderColor: Colors.GRAY7,
  }, Shared.CheckboxOuter, Shared.CheckboxRadius),
  FocusedCheckboxElement: Object.assign({}, Shared.CheckboxElement),
  CheckedCheckbox: Object.assign({}, Shared.Checkbox),
  CheckedCheckboxOuter: Object.assign({}, Shared.FieldBorderColor, Shared.CheckboxOuter, Shared.CheckboxRadius),
  CheckedCheckboxInner: Object.assign({
    borderColor: Colors.TEAL,
  }, Shared.CheckboxInner),
  CheckedCheckboxElement: Object.assign({}, Shared.CheckboxElement),
  DisabledCheckbox: Object.assign({}, Shared.Checkbox),
  DisabledCheckboxOuter: Object.assign({}, Shared.FieldBorderColor, Shared.CheckboxOuter, Shared.CheckboxRadius),
  DisabledCheckboxInner: Object.assign({
    borderColor: Colors.GRAY3,
  }, Shared.CheckboxInner),
  DisabledCheckboxElement: Object.assign({}, Shared.CheckboxElement),
  Radio: Object.assign({}, Shared.Checkbox),
  RadioOuter: Object.assign({}, Shared.FieldBorderColor, Shared.CheckboxOuter, Shared.RadioRadius),
  RadioElement: Object.assign({}, Shared.CheckboxElement),
  FocusedRadio: Object.assign({}, Shared.Checkbox),
  FocusedRadioOuter: Object.assign({
    borderColor: Colors.GRAY7,
  }, Shared.CheckboxOuter, Shared.RadioRadius),
  FocusedRadioInner: Object.assign({}, Shared.RadioInner),
  FocusedRadioElement: Object.assign({}, Shared.CheckboxElement),
  CheckedRadio: Object.assign({}, Shared.Checkbox),
  CheckedRadioOuter: Object.assign({}, Shared.FieldBorderColor, Shared.CheckboxOuter, Shared.RadioRadius),
  CheckedRadioInner: Object.assign({
    background: Colors.TEAL,
  }, Shared.RadioInner),
  CheckedRadioElement: Object.assign({}, Shared.CheckboxElement),
  DisabledRadio: Object.assign({}, Shared.Checkbox),
  DisabledRadioOuter: Object.assign({}, Shared.FieldBorderColor, Shared.CheckboxOuter, Shared.RadioRadius),
  DisabledRadioInner: Object.assign({
    background: Colors.GRAY3,
  }, Shared.RadioInner),
  DisabledRadioElement: Object.assign({}, Shared.CheckboxElement),
  Switch: Object.assign({}, Shared.Checkbox),
  SwitchOuter: Object.assign({}, Shared.FieldBorderColor, Shared.SwitchOuter),
  SwitchInner: Object.assign({
    background: Colors.GRAY3,
    left: '2px',
  }, Shared.SwitchInner),
  SwitchElement: Object.assign({}, Shared.CheckboxElement),
  FocusedSwitch: Object.assign({}, Shared.Checkbox),
  FocusedSwitchOuter: Object.assign({
    borderColor: Colors.GRAY7,
  }, Shared.SwitchOuter),
  FocusedSwitchInner: Object.assign({
    background: Colors.GRAY3,
    left: '2px',
  }, Shared.SwitchInner),
  FocusedSwitchElement: Object.assign({}, Shared.CheckboxElement),
  CheckedSwitch: Object.assign({}, Shared.Checkbox),
  CheckedSwitchOuter: Object.assign({
    borderColor: Colors.TEAL,
  }, Shared.SwitchOuter),
  CheckedSwitchInner: Object.assign({
    background: Colors.TEAL,
    left: '22px',
  }, Shared.SwitchInner),
  DisabledSwitchElement: Object.assign({}, Shared.CheckboxElement),
  DisabledSwitch: Object.assign({}, Shared.Checkbox),
  DisabledSwitchOuter: Object.assign({}, Shared.FieldBorderColor, Shared.SwitchOuter),
  DisabledSwitchInner: Object.assign({
    background: Colors.GRAY3,
    left: '22px',
  }, Shared.SwitchInner),
  CheckedSwitchElement: Object.assign({}, Shared.CheckboxElement),
  Input: {
    margin: '0 0 20px',
    position: 'relative',
  },
  MediumInputField: Object.assign({
    border: '1px solid '+ Colors.GRAY3,
  }, Shared.Field, Shared.MediumField),
  MediumInputFieldFocus: Object.assign({
    border: '1px solid '+ Colors.TEAL,
  }, Shared.Field, Shared.MediumField),
  MediumInputFieldWarning: Object.assign({
    border: '1px solid '+ Colors.YELLOW,
  }, Shared.Field, Shared.MediumField),
  MediumInputFieldError: Object.assign({
    border: '1px solid '+ Colors.RED,
  }, Shared.Field, Shared.MediumField),
  MediumInputFieldLoading: Object.assign({
    border: '1px solid '+ Colors.TEAL,
  }, Shared.Field, Shared.MediumField),
  IconInputField: Object.assign({
    border: '1px solid '+ Colors.GRAY3,
    borderRadius: '3px',
    fontSize: '16px',
    height: '40px',
    padding: '10px 10px 10px 35px',
  }, Shared.Field),
  Textarea: Object.assign({
    border: '1px solid '+ Colors.GRAY3,
    resize: 'none',
  }, Shared.Field, Shared.MediumField),
  // Buttons
  LargePrimaryButton: Object.assign({}, Shared.Button, Shared.LargeButton, Shared.PrimaryButton),
  MediumPrimaryButton: Object.assign({}, Shared.Button, Shared.MediumButton, Shared.PrimaryButton),
  SmallPrimaryButton: Object.assign({}, Shared.Button, Shared.SmallButton, Shared.PrimaryButton),
  TextPrimaryButton: Object.assign({}, Shared.TextButton, Shared.PrimaryText),
  SmallDangerButton: Object.assign({}, Shared.Button, Shared.SmallButton, Shared.DangerButton),
  SmallTwitterButton: Object.assign({}, Shared.Button, Shared.SmallButton, Shared.TwitterButton),
  SmallFacebookButton: Object.assign({}, Shared.Button, Shared.SmallButton, Shared.FacebookButton),
  SmallLinkedInButton: Object.assign({}, Shared.Button, Shared.SmallButton, Shared.LinkedInButton),
  LargePassiveButton: Object.assign({
    fontSize: '16px',
    padding: '14px 24px',
  }, Shared.Button, Shared.PassiveButton),
  MediumPassiveButton: Object.assign({
    fontSize: '15px',
    padding: '9px 19px',
  }, Shared.Button, Shared.PassiveButton),
  SmallPassiveButton: Object.assign({
    fontSize: '14px',
    padding: '5px 14px 3px',
  }, Shared.Button, Shared.PassiveButton),
  // Icons
  HeaderIcon: Object.assign({
    height: '60px',
    width: '60px',
  }, Shared.Icon),
  LargeIcon: Object.assign({
    height: '24px',
    width: '24px',
  }, Shared.Icon),
  MediumIcon: Object.assign({
    height: '20px',
    width: '20px',
  }, Shared.Icon),
  SmallIcon: Object.assign({
    height: '16px',
    width: '16px',
  }, Shared.Icon),
  // Typography
  PageTitle: {
    fontSize: '20px',
  },
  SubtleSmallCaps: {
    fontSize: '12px',
    letterSpacing: '.1em',
    opacity: .5,
    textTransform: 'uppercase',
  },
  StoryTitle: {
    fontSize: '18px',
    fontWeight: 600,
    lineHeight: '18px',
  },
  StoryExcerpt: {
    fontSize: '14px',
    lineHeight: '18px',
  },
  Label: {
    cursor: 'inherit',
  },
  // Buttons
  // Prompts
  InlineNoticeAlert: Object.assign({
    background: Colors.TEAL,
  }, Shared.InlineAlert),
  InlineWarningAlert: Object.assign({
    background: Colors.YELLOW,
  }, Shared.InlineAlert),
  InlineErrorAlert: Object.assign({
    background: Colors.RED,
  }, Shared.InlineAlert),
  // Content
  Table: {
    width: '100%',
    borderCollapse: 'collapse',
  },
  TableRow: {},
  TableHead: {
    borderBottom: '1px solid '+ Colors.GRAY3,
    padding: '10px',
    textAlign: 'left',
  },
  TableData: {
    borderBottom: '1px solid '+ Colors.GRAY3,
    padding: '10px',
    textAlign: 'left',
  },
  StoryBadge: {
    background: Colors.TEAL,
    color: Colors.WHITE,
    fontSize: '11px',
    fontWeight: 600,
    letterSpacing: '.2em',
    lineHeight: '10px',
    padding: '6px 10px 4px',
    textTransform: 'uppercase',
  },
};

document.addEventListener('DOMContentLoaded', function () {
  // use vanilla JS to recursively apply inline styles
  for (Component in Components) {
    var nodes = document.querySelectorAll('.'+ Component);
    for (var i = 0; i < nodes.length; i++) {
      var style = Components[Component];
      for (key in style) {
        if (key.substring(0,1) !== ':') {
          nodes[i].style[key] = style[key];
        }
      }
    }
  }
});