@import '~bootstrap-sass/assets/stylesheets/bootstrap/variables';
@import '../../themes/common-variables';
@import "../../themes/media-queries.scss";

// mobile
.diffContainer {
  overflow: hidden;
}

.imgDescription {
  color: $gray-tag-bg;
  margin: 16px auto;
}

.wrapper {
  position: relative;
}

.imgContainer {
  max-width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}

.overlayContainer {
  @extend .imgContainer;
  border-right: 3px solid $white;
}

.rangeInput {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

.sliderButton {
  position: absolute;
  margin-top: -1px;
  top: 0;
  width: 2.2em;
  transform: translate(-50%, 0);
  margin-left: -2px;
  transition: width 0.3s ease-in-out;
}

.hovered {
  width: 2.8em;
}

// tablet
@include mq($min-width: $screen-sm-min, $max-width: $screen-sm-max) {
}

// desktop. wait for spec
@include mq($min-width: $screen-md-min) {
  .sliderButton {
    width: 2.6em;
  }

  .hovered {
    width: 3.2em;
  }
}