//-- Mixin ---------------------------------------------------------------------
@mixin _hidden_tabIcon_soundTabLabel() {
  @include NotOption("userChrome.hidden.tab_icon") {
    @content;
  }
  @include Option("userChrome.hidden.tab_icon") {
    @include NotOption("userChrome.hidden.tab_icon.always") {
      @content;
    }
  }
}

@mixin _hidden_tabIcon_soundTabIcon() {
  @include NotOption("userChrome.hidden.tab_icon") {
    &:not([image]) {
      @content;
    }
  }
  @include Option("userChrome.hidden.tab_icon") {
    @include NotOption("userChrome.hidden.tab_icon.always") {
      @content;
    }
  }
}

//------------------------------------------------------------------------------

/* Makes the favicons always visible (also on hover) */
.tab-icon-image:not([pinned]) {
  opacity: 1 !important;
}

/* Makes the speaker icon to always appear if the tab is playing (not only on hover) */
.tabbrowser-tab {
  --uc-sound-tab-icon-position-x-default: -0.5px;
  --uc-sound-tab-icon-position-x: var(--uc-sound-tab-icon-position-x-default);
  --uc-sound-tab-icon-position-y: -6px;
  &:-moz-locale-dir(rtl) {
    --uc-sound-tab-icon-position-x: calc(-1 * var(--uc-sound-tab-icon-position-x-default));
  }

  @include Option("userChrome.tab.sound_with_favicons.on_center") {
    &:not([pinned]) {
      --uc-sound-tab-icon-position-x-default: 7px;
      --uc-sound-tab-icon-position-y: -1px;
    }
  }
}
.tab-icon-overlay:not([crashed]),
.tab-icon-overlay[pinned][crashed][selected] {
  /* Position */
  top: 0 !important;
  inset-inline-end: -9px !important;
  z-index: 1 !important;
  transform: translateX(var(--uc-sound-tab-icon-position-x)) translateY(var(--uc-sound-tab-icon-position-y));

  /* Shape */
  padding: 1.5px !important;
  border-radius: 10px !important;
  width: 17px !important;
  height: 17px !important;
}
.tab-icon-overlay:not([crashed]) {
  // https://github.com/black7375/Firefox-UI-Fix/issues/1011
  &:is([soundplaying], [muted], [activemedia-blocked]) {
    -moz-context-properties: fill, fill-opacity, stroke !important;
    fill: currentColor !important;
    border: none !important;
  }
  &:is([pinned], [sharing]) {
    stroke: var(--tab-icon-overlay-stroke, light-dark(white, black));
    color: var(--tab-icon-overlay-fill, light-dark(black, white));
  }

  // There is a difference in size between background-image and list-style-image due to margins, etc.
  &[soundplaying] {
    list-style-image: url("./icons/tab-audio-playing-small.svg");
  }
  &[muted] {
      list-style-image: url("./icons/tab-audio-muted-small.svg");
  }
  &[activemedia-blocked] {
      list-style-image: url("./icons/tab-audio-blocked-small.svg");
  }
}
.tab-icon-overlay:not([sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) {
  /* Color */
  color: currentColor !important;
  stroke: transparent !important;
  background: transparent !important;
  fill-opacity: 0.8 !important;
  opacity: 1 !important;
}

.tab-audio-button:not([crashed]),
.tab-audio-button[pinned][crashed][selected] {
  /* Position */
    margin-inline-start: -8px !important;
    margin-inline-end: -4px !important;
    z-index: 1 !important;
    transform: translateX(var(--uc-sound-tab-icon-position-x)) translateY(var(--uc-sound-tab-icon-position-y));
    
    /* Shape */
    --button-size-icon-small: 17px !important;
    --button-min-height-small: 17px !important;
    --button-border-radius: 100% !important;
    width: 17px !important;
    height: 17px !important;
    border-radius: 100%;
    overflow: clip;
    
    --button-text-color-ghost-hover: light-dark(white, black);
    --button-background-color-ghost-hover: light-dark(black, white);
}
.tab-audio-button:not([sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) {
  display: flex !important;
  fill-opacity: 0.8 !important;
  opacity: 1 !important;
}

/* Label */
@include _hidden_tabIcon_soundTabLabel {
  .tabbrowser-tab:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) {
    .tab-label-container {
      --uc-sound-tab-label-position-x-default: 4px;
      @include Option("userChrome.tab.sound_with_favicons.on_center") {
        --uc-sound-tab-label-position-x-default: 8px;
      }

      &[labeldirection=ltr],
      &:not([labeldirection]):-moz-locale-dir(ltr) {
        --uc-sound-tab-label-position-x: var(--uc-sound-tab-label-position-x-default);
      }
      &[labeldirection=rtl],
      &:not([labeldirection]):-moz-locale-dir(rtl) {
        --uc-sound-tab-label-position-x: calc(-1 * var(--uc-sound-tab-label-position-x-default));
      }

      > * {
        transform: translateX(var(--uc-sound-tab-label-position-x));
      }
    }
  }
}

/* Animate */
@include Animate {
  .tab-icon-overlay:not([crashed]),
  .tab-icon-overlay[pinned][crashed][selected] {
    transition: 0.1s var(--animation-easing-function);
  }

  .tab-label-container > * {
    transition: transform 0.25s var(--animation-easing-function);
  }
}

/* None exist favicon - Size bigger */
@include NotOption("userChrome.tab.always_show_tab_icon") {
  .tabbrowser-tab {
    .tab-label-container {
      &[labeldirection=ltr],
      &:not([labeldirection]):-moz-locale-dir(ltr) {
        --uc-sound-tab-no-icon-position-x: -0.5px;
        --uc-sound-tab-no-icon-label-position-x: 3px;
      }
      &[labeldirection=rtl],
      &:not([labeldirection]):-moz-locale-dir(rtl) {
        --uc-sound-tab-no-icon-position-x: 0.5px;
        --uc-sound-tab-no-icon-label-position-x: -3px;
      }
    }

    @include _hidden_tabIcon_soundTabIcon {
      .tab-icon-overlay:not([pinned], [sharing], [crashed]) {
        transform: translateX(var(--uc-sound-tab-no-icon-position-x)) translateY(-1px);
        inset-inline-end: 0 !important;
        margin-inline-end: 0 !important;
        padding: 0 !important;
      }
      &:is([soundplaying], [muted], [activemedia-blocked]) .tab-icon-image:not([pinned]) {
        opacity: 0 !important; /* Favicon hidden */
      }
      &:not([image]):not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked])
        .tab-label-container > * {
        transform: translateX(var(--uc-sound-tab-no-icon-label-position-x));
      }
    }
  }
}

/* Busy - Show */
.tab-throbber[busy],
.tab-icon-pending[busy] {
  opacity: 1 !important;
}

/* Busy - Overlay Position */
.tabbrowser-tab:not([pinned])[busy] .tab-icon-overlay:is([soundplaying], [muted], [activemedia-blocked]) {
  transform: translateX(var(--uc-sound-tab-icon-position-x)) translateY(-6px);
}
.tabbrowser-tab:not([image]) .tab-icon-overlay:not([pinned], [sharing], [crashed])[busy] {
  inset-inline-end: -9px !important;
  margin-inline-end: 9.5px !important;
  padding: 1.5px !important;
}

/* Hover */
.tab-icon-overlay:not([crashed])[soundplaying]:hover,
.tab-icon-overlay:not([crashed])[muted]:hover,
.tab-icon-overlay:not([crashed])[activemedia-blocked]:hover {
  color: var(--toolbar-bgcolor, white) !important;
  stroke: var(--lwt-tab-text, var(--toolbar-color)) !important;
  background-color: var(--lwt-tab-text, var(--toolbar-color)) !important;
  fill-opacity: 0.95 !important;
}

#TabsToolbar[brighttext] .tab-icon-overlay:not([crashed])[soundplaying]:hover,
#TabsToolbar[brighttext] .tab-icon-overlay:not([crashed])[muted]:hover,
#TabsToolbar[brighttext] .tab-icon-overlay:not([crashed])[activemedia-blocked]:hover {
  color: var(--toolbar-bgcolor, black) !important;
}

.tabbrowser-tab:not([image]) .tab-icon-overlay:not([pinned], [sharing], [crashed]):hover {
  padding: 0 !important;
}
