---

.range {
  display: flex;
  flex-direction: column;
  gap: var(--space-0250);

  &_label {
    font-size: var(--space-0875);
    color: var(--neutral-11);
  }

  &_wrapper {
    display: flex;
    align-items: center;
    gap: var(--space-0500);
  }

  &_value {
    min-width: var(--space-2000);
    color: var(--neutral-11);
    font-size: var(--space-0750);
    text-align: right;
  }

  &_input {
    --range-color: var(--blue-1);

    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: var(--space-0750);
    border: 1px solid var(--neutral-8);
    border-radius: 999px;
    cursor: pointer;
    outline: none;
    overflow: hidden;
    background:
      linear-gradient(to right, transparent 0%, var(--range-color) 100%),
      linear-gradient(45deg, rgba(255, 255, 255, 0.08) 25%, transparent 25%),
      linear-gradient(-45deg, rgba(255, 255, 255, 0.08) 25%, transparent 25%),
      linear-gradient(45deg, transparent 75%, rgba(255, 255, 255, 0.08) 75%),
      linear-gradient(-45deg, transparent 75%, rgba(255, 255, 255, 0.08) 75%);
    background-size:
      100% 100%,
      var(--space-0500) var(--space-0500),
      var(--space-0500) var(--space-0500),
      var(--space-0500) var(--space-0500),
      var(--space-0500) var(--space-0500);
    background-position:
      0 0,
      0 0,
      0 calc(var(--space-0500) / 2),
      calc(var(--space-0500) / 2) calc(var(--space-0500) / -2),
      calc(var(--space-0500) / -2) 0;

    &::-webkit-slider-runnable-track {
      height: var(--space-0750);
      background: transparent;
      border: none;
    }

    &::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: var(--space-1000);
      height: var(--space-1000);
      margin-top: calc((var(--space-1000) - var(--space-0750)) / -2);
      border: var(--space-0125) solid var(--neutral-1);
      border-radius: 50%;
      background: var(--range-color);
    }

    &::-moz-range-track {
      height: var(--space-0750);
      background: transparent;
      border: none;
      border-radius: 999px;
    }

    &::-moz-range-progress {
      background: transparent;
    }

    &::-moz-range-thumb {
      width: var(--space-1000);
      height: var(--space-1000);
      border: var(--space-0125) solid var(--neutral-1);
      border-radius: 50%;
      background: var(--range-color);
    }
  }
}