/* Native selects are never shown: the settings replace them with themed dropdowns (settings-dropdown, see settings.css) */

.slider::-webkit-slider-thumb {
  appearance: none;
  width: 24px;
  height: 12px;
  background-image: url("/png/bg2.png?v=5b440427c14f");
  cursor: pointer; 
  border: 1px solid black;
}

.slider::-moz-range-thumb {
  width: 24px;
  height: 12px;
  background-image: url("/png/bg2.png?v=5b440427c14f");
  cursor: pointer;
  border: 1px solid black;
  border-radius: 0px;
}

/* Hovered thumb: the accent border of the theme in every browser (separate rules: a browser drops a whole rule
   with a pseudo-element it does not know) */
.slider::-webkit-slider-thumb:hover {
  border: 1px solid var(--color-accent);
}

.slider::-moz-range-thumb:hover {
  border: 1px solid var(--color-accent);
}

.slider {
  background-image: url("/png/bg3.png?v=cabdf9c77067");
  padding: 0px;
  appearance: none;
  height: 12px;
  outline: none;
  caret-color: transparent;
}

/* Master volume: Settings > Sound and the sound box of the login screen */
#volume-slider,
#login-volume-slider {
  appearance: none;
  border: 0;
  outline: none;
  box-shadow: none;
  padding: 0;
  height: 16px;
  background: transparent;
  --volume-fill: 100%;
}

/* The filled part of the track and the thumb use the accent color (see theme.css). Separate rules per browser:
   a browser drops a whole rule with a pseudo-element it does not know */
#volume-slider::-webkit-slider-runnable-track,
#login-volume-slider::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(to right, var(--color-accent) var(--volume-fill), rgba(0, 0, 0, 0.5) var(--volume-fill));
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.7);
}

#volume-slider::-webkit-slider-thumb,
#login-volume-slider::-webkit-slider-thumb {
  appearance: none;
  width: 16px;
  height: 16px;
  margin-top: -5px;
  border: 1px solid black;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 4px var(--color-accent-glow);
  cursor: pointer;
}

#volume-slider::-moz-range-track,
#login-volume-slider::-moz-range-track {
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(to right, var(--color-accent) var(--volume-fill), rgba(0, 0, 0, 0.5) var(--volume-fill));
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.7);
}

#volume-slider::-moz-range-thumb,
#login-volume-slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: 1px solid black;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 4px var(--color-accent-glow);
  cursor: pointer;
}