/* ┌───────────────────────────────┐ */
/* │          VOLUME/WEIGHT        │ */
/* │          RADIO BUTTONS        │ */
/* └───────────────────────────────┘ */




.tw-toggle {
  display: inline-block;
  padding: 0.2em 0.8em;
  border-radius: 12px;
  position:relative;
  border: 2px solid #95A5A6;
  box-shadow: inset 0px 0px 8px 2px rgba(0, 0, 0, 0.3);
}

.tw-toggle label {
  text-align: center;
  font-family: sans-serif;
  display: inline-block;
  color: var(--black);
  position:relative;
  z-index:2;
  text-align: center;
  font-size: 15px;
  margin: 0px 4px;
  cursor: pointer;
  min-width: 98px;
  transition:color 0.3s ease-in-out;
}

.tw-toggle input {
  position: absolute;
  z-index: 3;
  opacity: 0;
  cursor: pointer;
}

.tw-toggle span {
  height: 80%;
  width: 33%;
  line-height: 21px;
  border-radius: 12px;
  background: var(--dark-grey);
  display:block;
  position:absolute;
  top: 4px;
  transition:all 0.3s ease-in-out;
}

.tw-toggle input[value="volume"]:checked ~ span{
  left:2%;
}

.tw-toggle input[value="both"]:checked ~ span{
  left: 66%;
}
.tw-toggle input[value="weight"]:checked ~ span{
  left: 33%;
}

.tw-toggle input[value="volume"]:checked + label,
.tw-toggle input[value="weight"]:checked + label,
.tw-toggle input[value="both"]:checked + label {
  color:var(--white);
}