.tabbrowser-tab {
  &[pinned] {
    &:is([soundplaying], [muted], [activemedia-blocked]) {
      .tab-icon-image {
        display: none !important;
        visibility: collapse !important;
      }

      .tab-icon-overlay {
        display: block !important;
        opacity: 1 !important;
      }
    }

    &:not([soundplaying], [muted], [activemedia-blocked]) {
      .tab-icon-overlay {
        display: none !important;
        visibility: collapse !important;
      }
    }
  }

  &:not([pinned]):is([soundplaying], [muted], [activemedia-blocked]) {
    .tab-label-container {
      z-index: -2 !important;
    }
  }
}

// default position for sound icon
[dir="ltr"] {
  .tabbrowser-tab {
    // apply only for soundplaying not pinned tabs
    &:not([pinned]):is([soundplaying], [muted], [activemedia-blocked]) {
      // .tab-label,
      // .tab-icon-overlay {
      //   margin-right: 9px !important;
      //   inset-inline-end: -7px !important;
      // }

      // margin between favicon and text label
      .tab-icon-stack {
        margin-right: 18px !important;
      }

      // sound icon position
      .tab-icon-overlay {
        transform: translateX(20px) !important;
        // inset-inline-end: -7px !important;
      }

      // make more space for rtl text fade gradient
      &[labeldirection="rtl"] {
        .tab-icon-stack {
          margin-right: 20px !important;
        }
      }
    }
  }
}

// rtl position for sound icon
[dir="rtl"] {
  .tabbrowser-tab {
    // set default margin as zero
    .tab-icon-stack {
      margin-left: 0 !important;
    }

    // apply only for soundplaying not pinned tabs
    &:not([pinned]):is([soundplaying], [muted], [activemedia-blocked]) {
      // margin between favicon and text label
      .tab-icon-stack {
        margin-left: 18px !important;
      }

      // sound icon position
      .tab-icon-overlay {
        transform: translateX(-20px) !important;
        // inset-inline-end: -7px !important;
      }

      // make more space for ltr text fade gradient
      &[labeldirection="ltr"] {
        .tab-icon-stack {
          margin-left: 20px !important;
        }
      }
    }
  }
}

.tab-content {
  position: relative !important;
}

.tab-icon-overlay {
  $icon-size: 16px;
  position: relative !important;
  display: block !important;
  border-radius: 100px !important;
  min-width: $icon-size !important;
  min-height: $icon-size !important;
  max-width: $icon-size !important;
  max-height: $icon-size !important;
  top: 0 !important; // fix middle position if pinned
  inset-inline-end: 0 !important; // fix space from the icon
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;

  margin-inline-end: 0px !important; // fix position for waterfox

  // fix opacity
  fill-opacity: 1 !important;

  &:not([pinned], [sharing], [crashed]):is(
      [soundplaying],
      [muted],
      [activemedia-blocked]
    ) {
    display: block !important;
    opacity: 1 !important;
  }
}

.tab-icon-image,
.tab-icon-overlay {
  z-index: -1 !important;
}

.tab-icon-stack,
.tab-label,
.tab-icon-overlay {
  margin-right: 0 !important;
  transform: translateX(0) !important;
  inset-inline-end: 0px !important;

  transition-property: margin, transform, background-size, background-color !important;
  transition-duration: get-var("medium-duration"), get-var("medium-duration"),
    get-var("short-duration"), get-var("short-duration") !important;
  transition-timing-function: get-var("point-to-point"),
    get-var("point-to-point"), get-var("fade-in-out"), ease !important;
}

.tabbrowser-tab[pinned]:is([soundplaying], [muted], [activemedia-blocked]) {
  .tab-icon-stack {
    z-index: 2 !important;
  }
}

.tab-icon-image:not([pinned]) {
  opacity: 1 !important;
}

// fix colors for pinned tab icon
#TabsToolbar .tab-icon-overlay:is([pinned], [sharing]):not([crashed]) {
  color: get-var("text-primary") !important;
}

// hide sound icon if not sound playing
.tabbrowser-tab:not([soundplaying], [muted], [activemedia-blocked]) {
  .tab-icon-overlay {
    visibility: collapse !important;
  }
}

// little margin for tab close button
[dir="ltr"] {
  .tabbrowser-tab[labeldirection="rtl"] {
    .tab-close-button {
      margin-left: 3px !important;
    }
  }
}
[dir="rtl"] {
  .tabbrowser-tab[labeldirection="ltr"] {
    .tab-close-button {
      margin-right: 3px !important;
    }
  }
}

// hide the new sound icon (to fix audio button duplication)
.tab-audio-button {
  display: none !important;
}
