body {
	/* --slider-line-width: 100%; */
	--slider-height: var(--size-xs);
    --slider-thumb-size: calc(var(--slider-height)*0.8);
	--slider-thumb-border-radius: 50%;
	--slider-thumb-border: none;
}

.comp--font-controls-panel {
    display: flex;
    flex-direction: column;
    gap: var(--size-s);
    background-color: var(--background);
}

.font-controls {
  display: flex;
  flex-direction: column;
  gap: var(--size-2xs);
}

.font-controls--parameters-group {
  display: flex;
  flex-direction: column;
  gap: var(--size-xs);
}

.control-group {
  display: flex;
  flex-direction: column;
  gap: var(--size-2xs);
}

.control-group label {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: var(--size-xs);
}

.slider-container {
  position: relative;
  height: var(--slider-height);
  display: flex;
  align-items: center;
  padding: 0 0.5%; /* Prevents the thumb from being cut off */
}

.slider-line {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: calc(var(--size-2xs)*0.23);
  background-color: var(--foreground);
  transform: translateY(-50%);
  pointer-events: none;
}

.slider {
  position: relative;
  width: 99%; /* Prevents the thumb from being cut off */
  height: var(--slider-height);
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  margin: 0;
  margin-left: auto;
  margin-right: auto;
  background: none;
  border: none;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: var(--slider-thumb-size);
  height: var(--slider-thumb-size);
  border-radius: 50%;
  background: var(--foreground);
  cursor: pointer;
  border: none;
}

.slider::-moz-range-thumb {
  width: var(--slider-thumb-size);
  height: var(--slider-thumb-size);
  border-radius: 50%;
  background: var(--foreground);
  cursor: pointer;
  border: none;
}

.slider:focus {
  outline: none;
}

.slider::-webkit-slider-thumb:hover {
  transform: scale(1.1);
}

.slider::-moz-range-thumb:hover {
  transform: scale(1.1);
}

@media (min-width: 900px) {
  .comp--font-controls-panel {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    width: auto;
    height: auto;
    padding: var(--size-s) 0 0 0;
    margin: 0;
    gap: var(--size-m);
    align-self: start;

  }

.font-controls {
  gap: var(--size-s);
}

.font-controls--basic-parameters,
.parameters-group--shape {
  gap: var(--size-xs);
}

.control-group {
  gap: var(--size-2xs);
}
}