transition: max-height 0.25s ease-out;
}
.error {
  color: darkred;
  background: yellow;
}
.warning {
  color: black;
  background: yellow;

}
.hidden {
  /* The framework-wide way of hiding elements is to assign them this
     CSS class. To make them visible again, remove it. The !important
     qualifiers are unfortunate but sometimes necessary when hidden
     element has other classes which specify visibility-related
     options. */

  border: 1px solid black;
  border-radius: 0.25em;
  position: absolute;
  display: inline-block;
  z-index: 100;
  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.75);
  background-color: inherit;

}

.fossil-toast-message {
  /* "toast"-style popup message.
     See fossil.popupwidget:toast() */
  position: absolute;
  display: block;
  z-index: 101;
  text-align: left;
  padding: 0.15em 0.5em;
  margin: 0;

  font-size: 1em;

  border-width: 1px;
  border-style: solid;
  border-color: rgba( 127, 127, 127, 0.75 );
  border-radius: 0.25em;
  background-color: rgba(20, 20, 20, 1)
  /* problem: if we inherit the color it may either be
     transparent or inherit translucency via the
     skin, leaving it unreadable. Since we set the bg
     color we must also set the fg color. */;
  color: rgba(235, 235, 235, 0.9);
}
.fossil-toast-message.error,
.fossil-toast-message.warning {
  background: yellow;
}
.fossil-toast-message.error {
  font-weight: bold;
  color: darkred;
  border-color: darkred;
}
.fossil-toast-message.warning {
  color: black;
}

blockquote.file-content {
  /* file content block in the /file page */
  margin: 0 1em;
}

            link = D.span();
      this.state = {link};
      F.copyButton(btnCopy,{
        copyFromElement: link,
        extractText: ()=>link.dataset.url,
        oncopy: (ev)=>{
          D.flashOnce(ev.target, undefined, ()=>lineTip.hide());
          F.toast.message("Copied link to clipboard.");
        }
      });
      this.e.addEventListener('click', ()=>btnCopy.click(), false);
      D.append(this.e, btnCopy, link)
    }
  });

      return this;
    },

    hide: function(){return this.show(false)}
  }/*F.PopupWidget.prototype*/;

  /**
     Internal impl for F.toast() and friends.

     args:

     1) CSS class to assign to the outer element, along with
     fossil-toast-message. Must be falsy for the non-warning/non-error
     case.



     2) Multiplier of F.toast.config.displayTimeMs. Should be
     1 for default case and progressively higher for warning/error
     cases.

     3) The 'arguments' object from the function which is calling
     this.

     Returns F.toast.
  */
  const toastImpl = function f(cssClass, durationMult, argsObject){
    if(!f.toaster){

      f.toaster = new F.PopupWidget({
        cssClass: 'fossil-toast-message'
      });
    }
    const T = f.toaster;
    if(f._timer) clearTimeout(f._timer);
    D.clearElement(T.e);
    if(f._prevCssClass) T.e.classList.remove(f._prevCssClass);
    if(cssClass) T.e.classList.add(cssClass);
    f._prevCssClass = cssClass;
    D.append(T.e, Array.prototype.slice.call(argsObject,0));
    T.show(F.toast.config.position.x, F.toast.config.position.y);
    f._timer = setTimeout(
      ()=>T.hide(),
      F.toast.config.displayTimeMs * durationMult
    );
    return F.toast;
  };

  F.toast = {
    config: {
      position: { x: 5, y: 5 /*viewport-relative, pixels*/ },
      displayTimeMs: 3000
    },
    /**
       Convenience wrapper around a PopupWidget which pops up a shared
       PopupWidget instance to show toast-style messages (commonly seen
       on Android). Its arguments may be anything suitable for passing
       to fossil.dom.append(), and each argument is first append()ed to

       the toast widget, then the widget is shown for
       F.toast.config.displayTimeMs milliseconds. This is called while
       a toast is currently being displayed, the first will be overwritten
       and the time until the message is hidden will be reset.

       The toast is always shown at the viewport-relative coordinates
       defined by the F.toast.config.position.

       The toaster's DOM element has the CSS classes fossil-tooltip
       and fossil-toast, so can be style via those.
    */
    message: function(/*...*/){
      return toastImpl(false,1, arguments);
    },
    /**
       Displays a toast with the 'warning' CSS class assigned to it. It

       displays for 1.5 times as long as a normal toast.
    */
    warning: function(/*...*/){
      return toastImpl('warning',1.5,arguments);
    },
    /**
       Displays a toast with the 'warning' CSS class assigned to it. It
       displays for twice as long as a normal toast.
    */
    error: function(/*...*/){
      return toastImpl('error',2,arguments);
    }
  }/*F.toast*/;

})(window.fossil);