.mutebutton {
  position: relative;
  display: inline-block;
  cursor: pointer;
  border-radius: var(--panelRadius);
  transition: background-color 0.2s;
  flex: 0 0 27px;
  margin-left: 2px;
}

.mutebutton input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.mutecheck {
  display: flex;
  font-family: "Arimo";
  font-size: 20px;
  text-align: center;
  color: var(--lightText);
  width: 24px;
  height: 24px;
  border-radius: 100%;
  align-items: center;
  justify-content: center;
  padding: 4px;
  margin: -4px;
}

/* unmuted state */
.mutecheck::before {
  content: '';
}

/* muted state */
input:checked ~ .mutecheck::before {
  content: '';
  color: var(--icon);
}

.mutecheck:hover {
  background-color: color-mix(in srgb, var(--icon) 40%, #00000000);
}
input:checked ~ .mutecheck:hover::before {
  color: var(--lightText);
}

.volume-slider {
  position: relative;
  display: inline-block;
  width: 100%;
  height: 20px;
  vertical-align: middle;
  cursor: pointer;
  margin-left: 10px;
  margin-right: 10px;
}

.volume-track {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  height: 4px;
  background-color: var(--btn);
  border-radius: 2px;
  user-select: none;
}

.volume-fill {
  position: absolute;
  height: 100%;
  width: 20%;
  background-color: var(--selectedMenuFaintLink);
  border-radius: 2px;
}

.volume-thumb {
  position: absolute;
  top: 50%;
  left: 20%;
  transform: translate(-50%, -50%);
  width: 12px;
  height: 12px;
  background-color: var(--link);
  border-radius: 50%;
  user-select: none;
}

.audioControl {
  border-radius: var(--panelRadius);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  min-height: 36px;
  max-height: 36px;
}

.volume-button-dwn, .volume-button-up {
  display: unset;
  font-family: "Arimo" !important;
  font-size: 24px;
  text-align: center;
  color: var(--icon);
  width: 24px;
  height: 25px;
  flex: 0 0 24px;
}

.volume-button-up:hover, .volume-button-dwn:hover {
  color: var(--lightText);
}

.volume-percentage {
  width: 32px;
  flex: 0 0 32px;
  user-select: none;
}