/*
 * The displayFooter hook renders inside a Bootstrap .row in this theme, so the
 * button is matched by `.row > *` (width: 100%; max-width: 100%; flex-shrink: 0;
 * gutter padding; margin-top). That stretched the wrapper across the viewport and
 * pushed the logo to the bottom-left corner. Selectors are prefixed with #was so
 * they outrank the theme's class rules without needing !important.
 */
#was.was {
  position: fixed;
  bottom: 12px;
  z-index: 1030;
  opacity: 0.6;
  transition: opacity 0.3s, bottom 0.2s cubic-bezier(0.7, 0, 0.3, 1);

  /* Undo `.row > *` */
  width: auto;
  max-width: none;
  flex-shrink: initial;
  margin: 0;
  padding: 0;
  line-height: 0;
}

#was.was--right {
  right: 12px;
  left: auto;
}

#was.was--left {
  left: 12px;
  right: auto;
}

#was.was:hover {
  opacity: 1;
}

#was.was a {
  display: block;
  line-height: 0;
}

/* Kills the inline-element descender gap under the logo. */
#was.was img {
  display: block;
}