/* One range-control treatment for the site and its embedded licensing editor.
   Important declarations in this layer replace legacy route-specific skins
   without changing each control's width, placement, values or behavior. */
@layer af-range-controls {
  input[type="range"] {
    --af-range-ink: var(--afsync-ink, var(--af-ink, #131211));
    --af-range-line: color-mix(in srgb, var(--af-range-ink) 45%, transparent);
    appearance: none !important;
    -webkit-appearance: none !important;
    min-height: 24px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    cursor: ew-resize;
  }

  input[type="range"]::-webkit-slider-runnable-track {
    height: 1px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: var(--af-range-line) !important;
    box-shadow: none !important;
  }

  input[type="range"]::-webkit-slider-thumb {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 10px !important;
    height: 10px !important;
    margin-top: -4.5px !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: var(--af-range-ink) !important;
    box-shadow: none !important;
  }

  input[type="range"]::-moz-range-track {
    height: 1px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: var(--af-range-line) !important;
    box-shadow: none !important;
  }

  input[type="range"]::-moz-range-progress {
    height: 1px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  input[type="range"]::-moz-range-thumb {
    width: 10px !important;
    height: 10px !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: var(--af-range-ink) !important;
    box-shadow: none !important;
  }

  input[type="range"]:focus-visible::-webkit-slider-thumb {
    outline: 1px solid var(--af-range-ink) !important;
    outline-offset: 3px !important;
  }

  input[type="range"]:focus-visible::-moz-range-thumb {
    outline: 1px solid var(--af-range-ink) !important;
    outline-offset: 3px !important;
  }

  input[type="range"]:disabled {
    opacity: 0.4;
    cursor: default;
  }

  @media (forced-colors: active) {
    input[type="range"] {
      --af-range-ink: CanvasText;
      --af-range-line: CanvasText;
      forced-color-adjust: none;
    }
  }
}