:root {
  --noui-slider-background-color: white;
  --noui-slider-border: none;
  --noui-slider-height: 8px;
  --noui-slider-handle-size: 20px;
  --noui-slider-connect-background-color: var(--color-material-grey-200, transparent);
  --noui-slider-connect-color: var(--color-primary);
}

.noUi-target {
  height: var(--noui-slider-height);
  margin: var(--spacing-sm, 16px) calc(var(--noui-slider-handle-size) / 2);
  border: var(--noui-slider-border);
  border-radius: 2px;
  background-color: var(--noui-slider-background-color);
}

.noUi-base,
.noUi-connects {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
}

.noUi-connect,
.noUi-origin {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-origin: 0 0;
  transform-style: flat;
  will-change: transform;
}

.noUi-horizontal .noUi-origin {
  left: auto;
  right: 0;
  height: 100%;
}

.noUi-connects {
  background-color: var(--noui-slider-connect-background-color);
  border-radius: var(--radius-md);
}

.noUi-connect {
  background-color: var(--noui-slider-connect-color);
}

.noUi-handle {
  position: absolute;
  width: var(--noui-slider-handle-size);
  height: var(--noui-slider-handle-size);
  background-color: var(--color-white);
  box-shadow: 0 1px 4px 0 var(--color-black-o-25);
  border-radius: 50%;
  transition: transform ease-in 0.1s;
  background-image: url('../../../icons/bdbdbd/menu.svg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: 9px;
}

.noUi-horizontal .noUi-handle {
  left: auto;
  right: 0;
  top: 50%;
  transform: translate(50%, -50%);
}

.noUi-touch-area {
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.min-max-slider__inputs {
  grid-gap: var(--spacing-sm);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.min-max-slider__input .text-input {
  --input-height: 2.25rem;
  --input-padding-inline: var(--spacing-sm);
  --input-font: var(--typography-body-small);
}