/* Flat Slider: style customizer for a native range input */

.flat-slider-tool {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: 3rem;
  align-items: start;
}

.flat-slider-tool__group {
  margin-bottom: 1.75rem;
}

.flat-slider-tool__group h3 {
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--color-faint);
  margin-bottom: .6rem;
}

.flat-slider-tool__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem;
}

.flat-slider-tool__field {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .9rem;
}

.flat-slider-tool__field label {
  color: var(--color-muted);
}

.flat-slider-tool__field input[type="number"] {
  width: 4.5em;
  padding: .3em .5em;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  font: inherit;
}

.flat-slider-tool__radio {
  display: flex;
  gap: .35rem;
  align-items: center;
  font-size: .85rem;
}

.flat-slider-tool__output {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px dashed var(--color-border);
}

.flat-slider-tool__output h3 {
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--color-faint);
  margin-bottom: .5rem;
}

.flat-slider-tool__output pre {
  background: var(--color-bg-subtle);
  border-radius: var(--radius);
  padding: .75rem 1rem;
  font-size: .8rem;
  margin-bottom: 1.25rem;
  overflow-x: auto;
}

.flat-slider-tool__preview {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 220px;
  border-radius: var(--radius);
}

/* The styled range input itself */

.flat-slider {
  --fs-line-width: 6px;
  --fs-line-radius: 7px;
  --fs-line-background: #f7d2cc;
  --fs-handle-width: 20px;
  --fs-handle-height: 20px;
  --fs-handle-radius: 50%;
  --fs-handle-background: #38b11f;
  --fs-range-background: #f99;
  --fs-fill-percent: 45%;

  appearance: none;
  width: 220px;
  height: var(--fs-handle-height);
  background: transparent;
  cursor: pointer;
}

.flat-slider::-webkit-slider-runnable-track {
  height: var(--fs-line-width);
  border-radius: var(--fs-line-radius);
  background: var(--fs-line-background);
}

.flat-slider--range::-webkit-slider-runnable-track {
  background: linear-gradient(
    to right,
    var(--fs-range-background) var(--fs-fill-percent),
    var(--fs-line-background) var(--fs-fill-percent)
  );
}

.flat-slider::-webkit-slider-thumb {
  appearance: none;
  width: var(--fs-handle-width);
  height: var(--fs-handle-height);
  border-radius: var(--fs-handle-radius);
  background: var(--fs-handle-background);
  margin-top: calc((var(--fs-line-width) - var(--fs-handle-height)) / 2);
  border: none;
}

.flat-slider::-moz-range-track {
  height: var(--fs-line-width);
  border-radius: var(--fs-line-radius);
  background: var(--fs-line-background);
}

.flat-slider--range::-moz-range-track {
  background: linear-gradient(
    to right,
    var(--fs-range-background) var(--fs-fill-percent),
    var(--fs-line-background) var(--fs-fill-percent)
  );
}

.flat-slider::-moz-range-thumb {
  width: var(--fs-handle-width);
  height: var(--fs-handle-height);
  border-radius: var(--fs-handle-radius);
  background: var(--fs-handle-background);
  border: none;
}

.flat-slider--vertical {
  writing-mode: vertical-lr;
  direction: rtl;
  width: var(--fs-handle-width);
  height: 220px;
}

@media (max-width: 720px) {
  .flat-slider-tool {
    grid-template-columns: 1fr;
  }
}