/* STAGE 9 — кнопка музыки */

.sound-button{
  position:fixed;
  right:18px;
  bottom:20px;
  z-index:35;
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.12);
  border-radius:50%;
  background:rgba(10,10,10,.22);
  color:#fff;
  backdrop-filter:blur(22px) saturate(120%);
  -webkit-backdrop-filter:blur(22px) saturate(120%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 12px 36px rgba(0,0,0,.18);
  cursor:pointer;
  transition:transform .22s ease,background .22s ease,border-color .22s ease;
}

.sound-button:hover{
  transform:translateY(-2px);
  background:rgba(255,255,255,.10);
  border-color:rgba(255,255,255,.25);
}

.sound-icon{
  width:18px;
  height:18px;
  fill:currentColor;
}

.sound-icon--on{display:none}
.sound-button[aria-pressed="true"] .sound-icon--on{display:block}
.sound-button[aria-pressed="true"] .sound-icon--off{display:none}

@media(max-width:700px){
  .sound-button{
    width:38px;
    height:38px;
    right:14px;
    bottom:16px;
  }

  .sound-icon{
    width:16px;
    height:16px;
  }
}