.gf-range,
.range-field {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.gf-range__summary,
.range-summary {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.gf-range__summary-item,
.range-summary > div {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.gf-range__summary-value {
  font-weight: 600;
}

.gf-range__track,
.range-slider-wrapper {
  position: relative;
  height: 32px;
}

.gf-range__track-line,
.range-slider-track {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 4px;
  border-radius: 999px;
  background-color: #d3d3d3;
}

.gf-range__track-fill,
.range-slider-fill {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 4px;
  border-radius: 999px;
  background-color: var(--gf-color-primary);
  left: 0;
  right: 0;
}

.gf-range input[type='range'],
.range-field .range-slider {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 32px;
  margin: 0;
  background: none;
  appearance: none;
  pointer-events: none;
}

.gf-range input[type='range']:focus {
  outline: none;
}

.gf-range input[type='range']::-webkit-slider-thumb,
.range-field .range-slider::-webkit-slider-thumb {
  appearance: none;
  pointer-events: auto;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: var(--gf-color-primary);
  border: 4px solid #ffffff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.gf-range input[type='range']::-moz-range-thumb,
.range-field .range-slider::-moz-range-thumb {
  pointer-events: auto;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: var(--gf-color-primary);
  border: 4px solid #ffffff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.gf-range input[type='range']::-webkit-slider-thumb:hover,
.range-field .range-slider::-webkit-slider-thumb:hover,
.gf-range input[type='range']::-moz-range-thumb:hover,
.range-field .range-slider::-moz-range-thumb:hover {
  transform: scale(1.04);
  box-shadow: 0 4px 12px rgba(var(--gf-color-primary-rgb), 0.2);
}

.gf-range input[data-range-handle='min'],
.range-field .range-slider[data-range-handle='min'] {
  z-index: 4;
}

.gf-range input[data-range-handle='max'],
.range-field .range-slider[data-range-handle='max'] {
  z-index: 3;
}

.gf-range__boundaries,
.range-field .range-boundaries {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.875rem;
}

.gf-range.is-disabled,
.range-field.is-disabled {
  opacity: 0.6;
  pointer-events: none;
}

.gf-range.is-disabled .gf-range__track-fill,
.range-field.is-disabled .range-slider-fill {
  background-color: var(--bs-gray-400);
}