@include NotOption("userChrome.tab.photon_like_contextline") {
  .tab-context-line {
    display: none;
  }
}

#tabbrowser-tabs {
  $containerPositionX: 9px;
  --uc-container-position-x: #{ $containerPositionX };
  &:-moz-locale-dir(rtl) {
    --uc-container-position-x: #{ $containerPositionX * -1 };
  }

  --uc-container-position-y-default: 11.5px;
  --uc-container-position-y-bottom: calc(50% + var(--uc-container-position-y-default));
  --uc-container-position-y: var(--uc-container-position-y-bottom);
  @include Option("userChrome.tab.container.on_top") {
    --uc-container-position-y: calc(var(--uc-container-position-y-bottom) * -1);
  }

  // Pinned Tab - Titlechanged Indicator override
  --uc-titlechanged-container-position-x: 32%, 50%, 70%;
}
:root[uidensity="compact"] #tabbrowser-tabs {
  --uc-container-position-y-default: 10.5px;

  --uc-titlechanged-container-position-x: 30%, 50%, 70%;
}
:root[uidensity="touch"] #tabbrowser-tabs {
  --uc-container-position-y-default: 12.5px;
}
.tab-content::before {
  /* Box Model */
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  transform: translate(var(--uc-container-position-x), var(--uc-container-position-y));

  /* Shape */
  border-bottom: 2px solid var(--identity-icon-color);
  width: calc(100% - 30px);
  opacity: 0.75;
}
.tabbrowser-tab[visuallyselected] .tab-content::before {
  opacity: 1;
}

@include NotOption("userChrome.tab.container.always_long") {
  .tab-content::before {
    width: 25%;
  }
  .tabbrowser-tab[visuallyselected]:not([pinned]) .tab-content::before {
    width: calc(100% - 30px);
  }
  #tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab[visuallyselected]:not([pinned]) .tab-content::before {
    width: calc(100% - 33px);
  }
}

/* Animate */
@include Animate {
  .tab-content:not([titlechanged])::before {
    transition: 0.15s var(--animation-easing-function);
    transition-property: width, opacity;
  }
}

/* Pinned Tab */
.tabbrowser-tab[pinned] .tab-content::before {
  transform: translateY(var(--uc-container-position-y));
  width: 16px;
}
@include Option("userChrome.tab.close_button_at_pinned") {
  .tabbrowser-tab[pinned][visuallyselected]:not([busy]):hover .tab-content::before {
    opacity: 0;
  }
  // Don't hide at userChrome.tab.close_button_at_pinned.background
}

@include NotOption("userChrome.tab.container.on_top") {
  .tabbrowser-tab:is([image], [pinned])[usercontextid] > .tab-stack > .tab-content[attention]:not([selected])::before,
  .tabbrowser-tab[usercontextid] > .tab-stack > .tab-content[pinned][titlechanged]:not([selected])::before {
    opacity: 0;
  }

  /* Pinned Tab - Titlechanged Indicator override */
  .tabbrowser-tab:is([image], [pinned])[usercontextid] > .tab-stack > .tab-content[attention]:not([selected]),
  .tabbrowser-tab[usercontextid] > .tab-stack > .tab-content[pinned][titlechanged]:not([selected]) {
    /* Original: radial-gradient(circle, var(--attention-icon-color), var(--attention-icon-color) 2px, transparent 2px); */
    --dotted-identity-image: radial-gradient(
      circle,
      var(--identity-icon-color),
      var(--identity-icon-color) 2px,
      transparent 2px
    );
    background-image: var(--dotted-identity-image), var(--dotted-identity-image), var(--dotted-identity-image) !important;
    background-position-x: var(--uc-titlechanged-container-position-x) !important;
  }

  .tabbrowser-tab:is([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected]),
  .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected]) {
    /* Original: center bottom calc(6.5px + var(--tabs-navbar-shadow-size)); */
    background-position-y: top var(--uc-container-position-y) !important;
  }

  /* Pinned Tab - Titlechanged & soundplaying */
  .tabbrowser-tab:is([image], [pinned])[usercontextid]:is([soundplaying], [muted], [activemedia-blocked])
    > .tab-stack
    > .tab-content[attention]:not([selected]),
  .tabbrowser-tab[usercontextid]:is([soundplaying], [muted], [activemedia-blocked])
    > .tab-stack
    > .tab-content[pinned][titlechanged]:not([selected]) {
    --uc-titlechanged-container-position-x: calc(32% - 1px), calc(50% - 1px), calc(70% - 1px);
  }
  :root[uidensity="compact"]
    .tabbrowser-tab:is([image], [pinned])[usercontextid]:is([soundplaying], [muted], [activemedia-blocked])
    > .tab-stack
    > .tab-content[attention]:not([selected]),
  :root[uidensity="compact"]
    .tabbrowser-tab[usercontextid]:is([soundplaying], [muted], [activemedia-blocked])
    > .tab-stack
    > .tab-content[pinned][titlechanged]:not([selected]) {
    --uc-titlechanged-container-position-x: calc(30% - 1px), calc(50% - 1px), calc(70% - 1px);
  }
}

@include Option("userChrome.tab.container.on_top") {
  .tabbrowser-tab:is([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected]),
  .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected]) {
    /* Original: center bottom calc(6.5px + var(--tabs-navbar-shadow-size)); */
    background-position-y: top var(--uc-container-position-y-bottom) !important;
  }
}
