@import '../../style/variables';

.#{$prefix}slider {
  height: 4px;
  margin: 13px 7px;
  background-color: #e4e8f1;
  border-radius: 3px;
  position: relative;
  box-sizing: border-box;

  &__bar {
    box-sizing: border-box;
    height: 4px;
    border-radius: 3px;
    background-color: $primary-color;
    position: absolute;
  }

  &__thumb {
    box-sizing: border-box;
    width: 14px;
    height: 14px;
    position: absolute;
    border: 1px solid lighten($primary-color, 15);
    background-color: rgb(245, 248, 250);
    background-image: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0));
    border-radius: 50%;
    cursor: pointer;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}