Gapminder/vizabi

//general styles
.vzb-slider-holder {
  margin: 0 auto;
  position: relative;

  .vzb-slider-svg {
    max-width: 100%;
    max-height: 100%;
    margin: 0 auto;
    display: block;
    position: relative;
  }

  .vzb-slider {
    fill: #000;

    .vzb-slider-thumb-badge {
      fill: rgba($vzb-color-primary, 1);
      stroke: $vzb-color-white;
      stroke-width: 2px;
      stroke-linejoin: round;
      stroke-opacity: 1;
    }

    .overlay {
      fill-opacity: 0.1;
      //shape-rendering: crispEdges;
      cursor: pointer !important;
    }

    .selection {
      fill: unset;
      fill-opacity: 0.125;
      stroke-width: 0;
      cursor: col-resize !important;
    }

    .handle {
      cursor: pointer !important;
    }
  }
}

//large specific styles
&.vzb-large,
&.vzb-presentation {
  .vzb-slider-holder {
    //...
    height: 150px;
  }
}

//medium specific styles
&.vzb-medium {
  .vzb-slider-holder {
    //...
    height: 120px;
  }
}

//small specific styles
&.vzb-small {
  .vzb-slider-holder {
    //...
    height: 90px;
  }
}