@charset "UTF-8";
/*
# This Source Code Form is subject to the terms of the Mozilla Public
# License, v. 2.0. If a copy of the MPL was not distributed with this
# file, You can obtain one at http://mozilla.org/MPL/2.0/.
*/

:root {
  --sound-button-size: var(--svg-small-icon-size);
}

.sound-button {
  background: none transparent;
  border: none 0 transparent;
  display: none;
  height: var(--sound-button-size);
  margin: 0;
  min-height: var(--sound-button-size);
  min-width: var(--sound-button-size); /* this is required to prevent shrinking of the box which has no position:static content */
  opacity: 0.75;
  padding: 0;
  position: relative;
  width: var(--sound-button-size);
}

.tab.faviconized .sound-button::before,
.sound-button::after {
  -moz-context-properties: fill;
  background: none no-repeat center / 100%;
  content: "";
  display: inline-block;
  fill: var(--tab-text);
  height: var(--sound-button-size);
  position: absolute;
  right: 0;
  top: 0;
  width: var(--sound-button-size);
}
:root.simulate-svg-context-fill .tab.faviconized .sound-button::before,
:root.simulate-svg-context-fill .sound-button::after {
  background: var(--tab-text);
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: 100%;
}

.tab.faviconized .sound-button::before {
  fill: var(--tab-text-inverted);
  transform: scale(1.3, 1.3);
}
:root.simulate-svg-context-fill .tab.faviconized .sound-button::before {
  background: var(--tab-text-inverted);
}

.tab:not(.collapsed) .sound-button:hover {
  opacity: var(--button-hover-opacity);
}

.tab:not(.collapsed) .sound-button:active {
  opacity: var(--button-active-opacity);
}

.tab:not(.collapsed).sound-playing .sound-button,
.tab:not(.collapsed).has-sound-playing-member.subtree-collapsed[data-child-ids]
  .sound-button,
.tab:not(.collapsed).muted .sound-button,
.tab:not(.collapsed).has-muted-member.subtree-collapsed[data-child-ids]
  .sound-button {
  display: inline-block;
}

.tab:not(.collapsed).muted.faviconized .sound-button::before,
.tab:not(.collapsed).muted .sound-button::after,
.tab:not(.collapsed).has-muted-member.subtree-collapsed[data-child-ids].faviconized
  .sound-button::before,
.tab:not(.collapsed).has-muted-member.subtree-collapsed[data-child-ids]
  .sound-button::after {
  background-image: url("./icons/audio-16-mute.svg");
}
:root.simulate-svg-context-fill .tab:not(.collapsed).muted.faviconized .sound-button::before,
:root.simulate-svg-context-fill .tab:not(.collapsed).muted .sound-button::after,
:root.simulate-svg-context-fill .tab:not(.collapsed).has-muted-member.subtree-collapsed[data-child-ids].faviconized
  .sound-button::before,
:root.simulate-svg-context-fill .tab:not(.collapsed).has-muted-member.subtree-collapsed[data-child-ids]
  .sound-button::after {
  background-image: none;
  mask-image: url("./icons/audio-16-mute.svg");
}

/* put style definition for sound-playing tab after muted tab,
   because "sound-playing" is more important than muted for
   mixed state tree. */
.tab:not(.collapsed).sound-playing:not(.muted).faviconized .sound-button::before,
.tab:not(.collapsed).sound-playing:not(.muted) .sound-button::after,
.tab:not(.collapsed).has-sound-playing-member.subtree-collapsed[data-child-ids].faviconized
  .sound-button::before,
.tab:not(.collapsed).has-sound-playing-member.subtree-collapsed[data-child-ids]
  .sound-button::after {
  background-image: url("./icons/audio-16.svg");
}
:root.simulate-svg-context-fill .tab:not(.collapsed).sound-playing:not(.muted).faviconized .sound-button::before,
:root.simulate-svg-context-fill .tab:not(.collapsed).sound-playing:not(.muted) .sound-button::after,
:root.simulate-svg-context-fill .tab:not(.collapsed).has-sound-playing-member.subtree-collapsed[data-child-ids].faviconized
  .sound-button::before,
:root.simulate-svg-context-fill .tab:not(.collapsed).has-sound-playing-member.subtree-collapsed[data-child-ids]
  .sound-button::after {
  background-image: none;
  mask-image: url("./icons/audio-16.svg");
}

.tab.faviconized .sound-button:hover::before {
  background-color: var(--tab-text-inverted);
  background-image: none !important;
  mask-image: none !important;
  border-radius: 150%;
  transform: scale(1.1, 1.1);
}

.tab.faviconized .sound-button {
  transform: scale(0.9, 0.9);
  padding: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 200;
}
