content-styles()
  &
    {block}
  content::content // @stylint ignore
    {block} // @stylint ignore

slotted-styles(selector='*')
  ::slotted({selector}) // @stylint ignore
    {block} // @stylint ignore

  // use direct descendant to mimic the actual behavior of shadow dom slots
  & > {selector}
    {block}

host-styles(tagName, additionalSelector='')
  // apply host styles for FF, Safari, IE
  // :host doesn't work with webcomponents polyfill, so we have to use the tag name
  {tagName}{additionalSelector}
    {block} // @stylint ignore

  // since :host is a pseudo selector we need to wrap any additional selector with parens
  if additionalSelector != ''
    additionalSelector = '(' + additionalSelector + ')'

  // apply host styles
  :host{additionalSelector} // @stylint ignore
    {block} // @stylint ignore

host-context(hostTag, contextSelector)
  // apply host context styles for FF, Safari, IE
  {contextSelector} {hostTag} // @stylint ignore
    {block} // @stylint ignore

  // apply host-context
  :host-context({contextSelector}) // @stylint ignore
    {block} // @stylint ignore