.slider-container {
  position: relative;
  svg {
    width: 0;
    height: 0;
  }

  .slider {
    background: #e6e9f2;

    .range-slider__thumb {
      width: 30px;
      height: 30px;
      background: $primary;
      box-sizing: border-box;
      border: 6px solid $primary;
      box-shadow: 0 0 6px 1px rgba(0, 0, 0, 0.2);

      &:focus-visible {
        box-shadow: 0 0 0 6px rgba($primary, 0.5);
      }
      &:focus {
        border-color: $primary !important;
        box-shadow: none !important;
      }
    }

    .range-slider__range {
      background: rgba($primary, 0.8);
      border-radius: 6px;
    }
  }

  .blobs {
    filter: url('#gooey');
    pointer-events: none;
    z-index: 3;

    .blob {
      &.value {
        background: #597483;
        width: 17px;
        height: 17px;
      }
      background: $primary;
      width: 18px;
      height: 18px;
      border-radius: 8px;
      transition:
        top 0.25s,
        width 0.25s,
        height 0.25s;
      transition-timing-function: cubic-bezier(0.38, 0.69, 0.61, 1.34);
    }

    &.active {
      .blob:first-child {
        top: calc(50% - 34px);
        width: 30px;
        height: 30px;
      }

      ~ .value-text {
        top: calc(50% - 34px);
        opacity: 1;
      }
    }
  }

  .value-text {
    pointer-events: none;
    color: #fff;
    opacity: 0;
    z-index: 4;
    font-weight: 500;
    font-size: 15px;
    transition:
      top 0.32s,
      opacity 0.32s;
    transition-timing-function: cubic-bezier(0.38, 0.69, 0.61, 1.34);
  }
  .centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

#single-thumb .slider .range-slider__thumb[data-lower] {
  width: 0;
  height: 0;
  border: 0;
}