
.multiform {
  .content {
    // need to set line-height to 1px so
    // that the .content will wrap the visualization without more spacing
    // (e.g. without this: the .content is 20px, even if the svg is only 2px height)
    line-height: 1px;
    margin-bottom: 2px;
    // font-size: 1px;
  }
}

/* overrides phovea-barplot */
.taggle-vis-barplot {
  background-color: #fff;

  rect {
    fill: #aaa;
  }
}

/* overrides phovea-list */
.taggle-vis-list {
  div {
    padding: 1px 1px 1px 11px;
    height: 100%;
    display: flex;
    align-items: center;

    &.phovea-select-selected {
      border: 1px solid $select-color;
      padding: 0 0 0 10px;
    }
  }
}

.phovea-mosaic {
  .phovea-select-selected rect {
    fill: $select-color;
  }
}

.phovea-pie {
  .phovea-select-selected path {
    fill: $select-color;
  }
}


.multiform {
  .content {
    // need to set line-height to 1px so
    // that the .content will wrap the visualization without more spacing
    // (e.g. without this: the .content is 20px, even if the svg is only 2px height)
    line-height: 1px;
    margin-bottom: 4px;
    // font-size: 1px;
  }
}

/* overrides phovea-barplot */
.taggle-vis-barplot {
  background-color: #fff;

  rect {
    fill: #aaa;
  }
}

/* overrides phovea-list */
.taggle-vis-list {
  div {
    padding: 1px 1px 1px 11px;
    height: 100%;
    display: flex;
    align-items: center;

    &.phovea-select-selected {
      border: 1px solid $select-color;
      padding: 0 0 0 10px;
    }
  }
}

.phovea-mosaic {
  .phovea-select-selected rect {
    fill: $select-color;
  }
}

.phovea-pie {
  .phovea-select-selected path {
    fill: $select-color;
  }
}

.phovea-heatmap rect {
  stroke: white;
  stroke-width: 0.1;
}

Increase spacing between multiforms and categorical heatmap items
Increase spacing between multiforms and categorical heatmap items
