//-- Mixin ---------------------------------------------------------------------
@mixin _tab_counter_without_centered() {
  @include Option("userChrome.centered.tab") {
    @include NotOption("userChrome.centered.tab.label") {
      @content;
    }
  }
  @include NotOption("userChrome.centered.tab") {
    @content;
  }
}

// Copy from "../tab/sound_tab/show_with_favicons"
@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;
    }
  }
}

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

#tabbrowser-tabs {
  counter-reset: tab-counts;
}

.tabbrowser-tab:not([hidden="true"]) {
  counter-increment: tab-counts;

  // https://www.designcise.com/web/tutorial/how-to-add-space-before-or-after-an-element-using-css-pseudo-elements
  &[pinned="true"] .tab-label-container::before  {
    content: "\00a0" counter(tab-counts);
  }
  &:not([pinned="true"]) .tab-label-container::before {
    content: counter(tab-counts) ":\00a0";
  }

  .tab-label-container {
    display: grid;

    align-content: safe center;
    align-items: safe center;

    @include _tab_counter_without_centered {
      justify-content: start;
      justify-items: start;
    }

    &::before {
      display: inline-block;
      grid-row: 1;
    }
    > .tab-text {
      grid-row: 1;
    }

    &[pinned] {
      width: unset !important; /* Original: 0 */
      > .tab-text,
      > .tab-secondary-label {
        width: 0;
      }
    }
  }
}

// Like centered label
.tab-label,
.tab-secondary-label {
  overflow: hidden;
}

// Compatibility with sound tab
@include Option("userChrome.tab.sound_with_favicons") {
  @include _hidden_tabIcon_soundTabLabel {
    .tabbrowser-tab:not([sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) {
      &[pinned] .tab-label-container {
        &[labeldirection=ltr],
        &:not([labeldirection]):-moz-locale-dir(ltr) {
          --uc-sound-tab-label-position-x: 2px;
        }
        &[labeldirection=rtl],
        &:not([labeldirection]):-moz-locale-dir(rtl) {
          --uc-sound-tab-label-position-x: -2px;
        }
      }
      .tab-label-container::before {
        transform: translateX(var(--uc-sound-tab-label-position-x, 0px));
      }
    }
  }

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