figure {
  display: inline-block;
  border: 1px solid grey;
  background: #F0F0F0;
  @psize: 0.5em;
  padding: @psize @psize 0 @psize;
  text-align: center;

  &.inline {
    border: none;
    margin: 0;
  }

  canvas {
    display: inline-block;
    background: white;
    border: 1px solid lightgrey;

    &:focus {
      border: 1px solid grey;
      outline: none;

      + figcaption .help button {
        border: 1px solid grey;
        border-top: none;
      }
    }
  }

  figcaption {
    position: relative;
    text-align: center;
    padding: 0.5em 0;
    font-style: italic;
    font-size: 90%;

    .help {
      position: relative;
      top: calc(~"-1em - 2px");
      left: calc(calc(calc(~"100% - var(--figurewidth)")~" / 2")~" - 1px");
      width: var(--figurewidth);
      margin-bottom: 0.5em;
      font-size: 8pt;

      a  {
        position:absolute;
        right: 0;
      }

      button {
        position: absolute;
        left: 0;
        border: 1px solid lightgray;
        border-top: none;
        border-radius: 0;
        top: 1.5px;
        left: 0px;
        background: white;
        padding: 0px 4px 2px 4px;
      }
    }

    button {
      font-family: Verdana;
      border: 1px solid grey;
      border-radius: 3px;
      background: #FDFDFD;
      &.selected {
        background: rgb(200,200,255);
      }
      & + button {
        margin-left: 0.25em;
      }
    }
  }

  &:not([class=inline]) + figure:not([class=inline]) {
    margin-top: 2em;
  }
}

div.figure {
  display: inline-block;
  border: 1px solid grey;
  text-align: center;
}