@import '../main.css';

input[type=range] {
  -webkit-appearance: none; /* Hides the slider so that custom slider can be made */
  width: 100%; /* Specific width is required for Firefox. */
  background: transparent; /* Otherwise white in Chrome */
}

h1 {
  margin-bottom: 20px;
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
}

input[type=range]:focus {
  outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
}

.underweight,
.overweight {
  color: orange;
}

.obese {
  color: red;
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: 1px solid #aaa;
  height: 24px;
  width: 24px;
  background: #fff;
  cursor: pointer;
  border-radius: 100px;
  margin-top: -11px; /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
}

input[type=range]::-webkit-slider-thumb:active {
  transform: scale(0.9);
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
}


input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 1px;
  cursor: pointer;
  background: #4592fb;
}

input[type=range]:focus::-webkit-slider-runnable-track {
  background: #1562cb;
}

input[type=range]::-moz-range-track {
  width: 100%;
  height: 1px;
  cursor: pointer;
  background: #4592fb;
}

