 
   fadeOut: ->
     @$el.removeClass 'factlink-control-visible'
+
+  _setStylesFromElement: (element) ->
+    $element = $(element)
+    targetColor = $element.css('color')
+
+    # See https://gamedev.stackexchange.com/questions/38536/given-a-rgb-color-x-how-to-find-the-most-contrasting-color-y/38561#38561
+    targetRGB = targetColor.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/)
+    r = targetRGB[1]/255; g = targetRGB[2]/255; b = targetRGB[3]/255;
+    targetBrightness = 0.2126*r*r + 0.7152*g*g + 0.0722*b*b
+
+    @$el.css
+      'line-height': $element.css('line-height')
+      'font-size': Math.max 15, Math.min 20, parseInt $element.css('font-size')
+      'color': if targetBrightness > 0.5 then 'black' else 'white'
+
+    @$el.find('factlink-icon-button-bubble').css
+      'background-color': targetColor
+
+    @$el.find('factlink-icon-button-bubble-triangle').css
+      'border-top-color': targetColor
+
 
 class FactlinkJailRoot.ShowButton
   constructor: (highlightElements, factId) ->

      mouseleave: options.onmouseleave
    @$el.on 'click', options.onclick

    targetColor = $targetElement.css('color')

    # See https://gamedev.stackexchange.com/questions/38536/given-a-rgb-color-x-how-to-find-the-most-contrasting-color-y/38561#38561
    targetRGB = targetColor.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/)
    r = targetRGB[1]/255; g = targetRGB[2]/255; b = targetRGB[3]/255;
    targetBrightness = 0.2126*r*r + 0.7152*g*g + 0.0722*b*b

    @$el.css
      'line-height': $targetElement.css('line-height')
      'font-size': Math.max 15, Math.min 20, parseInt $targetElement.css('font-size')
      'color': if targetBrightness > 0.5 then 'black' else 'white'

    @$el.find('factlink-icon-button-bubble').css
      'background-color': targetColor

    @$el.find('factlink-icon-button-bubble-triangle').css
      'border-top-color': targetColor

  destroy: ->
    @_tether.destroy()

class IconButton
  constructor: (options) ->
    @$el = $ """
      <factlink-icon-button>
        <factlink-icon-button-bubble>
