/**
 * BiDi note: because this stylesheet is 'scoped', instead of:
 *     html[dir="rtl"] #volume { ... }
 * we must use:
 *     #volume:-moz-dir(rtl) { ... }
 */

#volume {
  text-align: center;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4rem;
  -moz-transition: opacity var(--transition-duration) ease;
  display: none;
  background-image: url("images/header_bg.png");
  pointer-events: auto;
}

#volume.visible {
  display: block;
}

#volume > span {
  height: 4rem;
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
}
#volume:-moz-dir(ltr) > span { float: left; }
#volume:-moz-dir(rtl) > span { float: right; }

#volume section {
  overflow: hidden;
  margin: 1.5rem 1rem 0;
  margin-inline-start: 0;
  height: 1rem;
}

/* Default shows 15 sound pieces */
#volume section div {
  width: 6.6%!important;
  height: 100%;
  background: #666;
  box-sizing: border-box;
  border-inline-start: solid 0.2rem #3e3e3e;
}
#volume:-moz-dir(ltr) section div { float: left; }
#volume:-moz-dir(rtl) section div { float: right; }

#volume section div:first-child {
  border: none;
  margin-inline-start: 1%;
}
#volume:-moz-dir(ltr) section div:first-child { border-radius: 0.6rem 0 0 0.6rem; }
#volume:-moz-dir(rtl) section div:first-child { border-radius: 0 0.6rem 0.6rem 0; }

/* Last visible bar */
#volume:-moz-dir(ltr) section div:nth-last-child(2) { border-radius: 0 0.6rem 0.6rem 0; }
#volume:-moz-dir(rtl) section div:nth-last-child(2) { border-radius: 0.6rem 0 0 0.6rem; }

#volume section div:last-child {
  display: none;
}

#volume section div.active {
  background: #00abcc;
}

#volume.mute section div {
  background: #666;
}

#volume span {
  display: inline-block;
  width: 3rem;
  margin-inline-start: 0.8rem;
}
#volume:-moz-dir(ltr) span { float: left; }
#volume:-moz-dir(rtl) span { float: right; }

/* Icon states */
#volume span.channel-type {
  background-size: 3rem auto;
}

/* Telephony channel, just shows 6 progress pieces */
#volume[data-channel="telephony"] section div {
  width: 16.5%!important;
}

/* First always keep active */
#volume[data-channel="telephony"] section div:first-child {
  background: #00abcc;
}

/* Last visible bar */
#volume[data-channel="telephony"]:-moz-dir(ltr) section div:nth-child(n+6) { border-radius: 0 0.6rem 0.6rem 0; }
#volume[data-channel="telephony"]:-moz-dir(rtl) section div:nth-child(n+6) { border-radius: 0.6rem 0 0 0.6rem; }

#volume[data-channel="telephony"] section div:nth-child(n+7) {
  display: none;
}

#volume[data-channel="telephony"] span.channel-type {
  background-image: image-set(url("images/telephony_normal.png") 1x, url("images/telephony_normal@1.5x.png") 1.5x, url("images/telephony_normal@2x.png") 2x, url("images/telephony_normal@2.25x.png") 2.25x);
}

/* bt_sco channel, shows 16 (all of them) progress pieces */
#volume[data-channel="bt_sco"] section div {
  width: 6.25%!important;
}

/* First always keep active */
#volume[data-channel="bt_sco"] section div:first-child {
  margin-inline-start: 0;
  background: #00abcc;
}

#volume[data-channel="bt_sco"] section div:nth-last-child(2) {
  border-radius: 0;
}

/* Last visible bar */
#volume[data-channel="bt_sco"] section div:last-child {
  display: block;
}
#volume[data-channel="bt_sco"]:-moz-dir(ltr) section div:last-child { border-radius: 0 0.6rem 0.6rem 0; }
#volume[data-channel="bt_sco"]:-moz-dir(rtl) section div:last-child { border-radius: 0.6rem 0 0 0.6rem; }

#volume[data-channel="bt_sco"] span.channel-type {
  background-image: image-set(url("images/telephony_normal.png") 1x, url("images/telephony_normal@1.5x.png") 1.5x, url("images/telephony_normal@2x.png") 2x, url("images/telephony_normal@2.25x.png") 2.25x);
}

/* Notification channel */
#volume[data-channel="notification"] span.channel-type {
  background-image: image-set(url("images/ringer-notifications_normal.png") 1x, url("images/ringer-notifications_normal@1.5x.png") 1.5x, url("images/ringer-notifications_normal@2x.png") 2x, url("images/ringer-notifications_normal@2.25x.png") 2.25x);
}

#volume[data-channel="notification"].mute span.channel-type {
  /* Use the same image as the content channel to sync with the status bar */
  background-image: image-set(url("images/media_silent.png") 1x, url("images/media_silent@1.5x.png") 1.5x, url("images/media_silent@2x.png") 2x, url("images/media_silent@2.25x.png") 2.25x);
}

#volume[data-channel="notification"].mute.vibration span.channel-type {
  background-image: image-set(url("images/ringer-notifications_vibrate.png") 1x, url("images/ringer-notifications_vibrate@1.5x.png") 1.5x, url("images/ringer-notifications_vibrate@2x.png") 2x, url("images/ringer-notifications_vibrate@2.25x.png") 2.25x);
}

/* Alarm channel */
#volume[data-channel="alarm"] span.channel-type {
  background-image: image-set(url("images/alarm_normal.png") 1x, url("images/alarm_normal@1.5x.png") 1.5x, url("images/alarm_normal@2x.png") 2x, url("images/alarm_normal@2.25x.png") 2.25x);
}

#volume[data-channel="alarm"].mute span.channel-type {
  background-image: image-set(url("images/alarm_silent.png") 1x, url("images/alarm_silent@1.5x.png") 1.5x, url("images/alarm_silent@2x.png") 2x, url("images/alarm_silent@2.25x.png") 2.25x);
}

/* Content channel */
#volume[data-channel="content"] span.channel-type {
  background-image: image-set(url("images/media_normal.png") 1x, url("images/media_normal@1.5x.png") 1.5x, url("images/media_normal@2x.png") 2x, url("images/media_normal@2.25x.png") 2.25x);
}

#volume[data-channel="content"].mute span.channel-type {
  background-image: image-set(url("images/media_silent.png") 1x, url("images/media_silent@1.5x.png") 1.5x, url("images/media_silent@2x.png") 2x, url("images/media_silent@2.25x.png") 2.25x);
}