/** Mostly copy from WaveFox */
@include Option("userChromeJS.Sidra.Tabs.Compact") {
  @import "drag-space";
  #TabsToolbar {
    --toolbarbutton-inner-padding: inherit !important;
    &::before {
      content: "";
      display: block;
      position: absolute;
      width: 100%;
      height: 100%;
      bottom: 0px;
      inset-inline-start: 0px;
      box-shadow: var(--inner-box-border, inset 0 0 0 transparent),
        var(--inner-box-shadow, inset 0 0 0 transparent);
      pointer-events: none;
      z-index: 2;
    }
    #search-container {
      padding-block: 0 !important;
    }
  }

  @include Option("userChromeJS.Sidra.Tabs.NewtabBtn.Pinned") {
    #tabs-newtab-button,
    #newPrivateTab-button {
      display: none !important;
    }

    #tabbrowser-tabs[hasadjacentnewtabbutton]:not([overflow])
      ~ :is(#new-tab-button, #privateTab-button) {
      display: revert !important;
    }
  }

  // 控制按钮旁边的隐私浏览指示器
  .accessibility-indicator,
  #private-browsing-indicator-with-label {
    height: auto !important;
    width: auto !important;
    box-sizing: border-box !important;
    padding: 0 var(--toolbarbutton-outer-padding) !important;
    margin: 0 !important;
    background: none !important;
    border: 0 !important;
    outline: 0;
    fill: currentColor !important;
    -moz-context-properties: fill, fill-opacity !important;
    align-items: center !important;
  }

  #private-mask,
  #private-browsing-indicator-with-label {
    background: none !important;
    appearance: none !important;

    > image {
      content: "";
      box-sizing: border-box !important;
      width: calc(2 * var(--toolbarbutton-inner-padding) + 16px) !important;
      height: calc(2 * var(--toolbarbutton-inner-padding) + 16px) !important;
      background-image: url("./images/skin/privateBrowsing.svg") !important;
      background-size: 16px !important;
      background-position: center !important;
      background-repeat: no-repeat !important;
      padding: var(--toolbarbutton-inner-padding) !important;
      border-radius: var(--toolbarbutton-border-radius) !important;
      list-style-image: unset !important;
    }

    > label {
      display: none !important;
    }
  }

  #private-mask,
  #private-browsing-indicator-with-label {
    -moz-context-properties: fill, fill-opacity !important;
    fill: currentColor !important;
  }

  .accessibility-indicator {
    > .button-box {
      width: calc(2 * var(--toolbarbutton-inner-padding) + 16px) !important;
      height: calc(2 * var(--toolbarbutton-inner-padding) + 16px) !important;
      padding: var(--toolbarbutton-inner-padding) !important;
      border-radius: var(--toolbarbutton-border-radius) !important;
    }
  }

  .accessibility-indicator:is(:hover, :focus-visible) > .button-box,
  toolbarbutton#private-browsing-indicator-with-label:is(:hover, :focus-visible)
    > image {
    background-color: var(--arrowpanel-dimmed) !important;
  }

  .accessibility-indicator:is(:hover:active, [open]) > .button-box,
  toolbarbutton#private-browsing-indicator-with-label:is(:hover:active, [open])
    > image {
    background-color: var(--arrowpanel-dimmed-further) !important;
  }

  #alltabs-button[visibility="hidden"] {
    visibility: collapse !important;
    display: none !important;
  }

  #alltabs-button[visibility="visible"],
  #tabbrowser-tabs[overflow] ~ #alltabs-button[visibility="auto"] {
    @include Box(true);
  }

  @media (prefers-contrast) {
    // 自动模式不能跟随 accent color
    #TabsToolbar .tabbrowser-tab {
      background-color: var(--lwt-accent-color) !important;
    }
  }

  // 去除鼠标指向非激活标签的动画速度
  tab:not(:active) .tab-background {
    transition: none !important;
  }

  // 去除主题引入的选中标签 outline
  #TabsToolbar #firefox-view-button[open] > .toolbarbutton-icon:-moz-lwtheme,
  .tab-background[selected]:not([multiselected="true"]):-moz-lwtheme {
    outline: none !important;
  }

  // 高亮未读标签; 依赖 italicizeUnreadTabs.uc.js
  :root[italic-unread-tabs]
    .tabbrowser-tab[notselectedsinceload]:not([pending]),
  :root[italic-unread-tabs]
    .tabbrowser-tab[notselectedsinceload][pending][busy] {
    font-style: italic !important;
  }

  // ---------------------------------------- Tab Bar ----------------------------------------

  #TabsToolbar {
    --toolbarbutton-inner-padding: inherit !important;
    position: relative !important;
  }

  #TabsToolbar::before {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    bottom: 0px;
    inset-inline-start: 0px;
    box-shadow: var(--additional-inner-box-shadow, inset 0 0 0 transparent),
      var(--inner-box-shadow, inset 0 0 0 transparent);
    pointer-events: none;
    z-index: 2;
  }

  #TabsToolbar #search-container {
    padding-block: 0 !important;
  }

  // ---------------------------------------- Indents ----------------------------------------

  #TabsToolbar-customization-target
    > :is(toolbarbutton, toolbaritem):first-child,
  #TabsToolbar-customization-target
    > toolbarpaletteitem:first-child
    > :is(toolbarbutton, toolbaritem) {
    margin-inline-start: calc(
      var(--toolbar-start-end-padding) - var(--toolbarbutton-outer-padding)
    ) !important;
  }

  #TabsToolbar-customization-target
    > :is(toolbarbutton, toolbaritem):last-child,
  #TabsToolbar-customization-target
    > toolbarpaletteitem:last-child
    > :is(toolbarbutton, toolbaritem) {
    margin-inline-end: calc(
      var(--toolbar-start-end-padding) - var(--toolbarbutton-outer-padding)
    ) !important;
  }

  #tabbrowser-tabs:not([overflow])
    .tabbrowser-tab:nth-child(1 of .tabbrowser-tab:not([pinned], [hidden])) {
    margin-inline-start: 0px !important;
  }

  #tabbrowser-tabs:not([overflow])
    .tabbrowser-tab:nth-child(1 of .tabbrowser-tab:not([hidden])),
  #tabbrowser-tabs[overflow]
    .tabbrowser-tab:nth-child(1 of .tabbrowser-tab:not([pinned], [hidden])),
  #tabbrowser-tabs[overflow][haspinnedtabs] {
    margin-inline-start: var(--tab-first-last-inline-margin) !important;
  }

  .tabbrowser-tab:nth-last-child(1 of .tabbrowser-tab:not([hidden])) {
    margin-inline-end: var(--tab-first-last-inline-margin) !important;
  }

  #tabs-newtab-button {
    margin-inline-start: calc(
      -1 * var(--tab-first-last-inline-margin) / 2
    ) !important;
  }

  .toolbarbutton-1:has(+ #tabbrowser-tabs:not([overflow])),
  .toolbarbutton-1:has(+ #tabbrowser-tabs[overflow][haspinnedtabs]) {
    margin-inline-end: calc(
      -1 * var(--tab-first-last-inline-margin) / 2 + 1px
    ) !important;
    z-index: 0 !important;
  }

  /** Floorp 样式修复 */
  :root[tabposition="4"] {
    #TabsToolbar {
      background-image: var(--lwt-additional-images);
      background-repeat: var(--lwt-background-tiling);
      background-position: var(--lwt-background-alignment);
      background-color: var(
        --lwt-accent-color-inactive,
        var(--lwt-accent-color)
      );
    }
    #urlbar-container {
      margin-top: 0 !important;
    }
  }

  :root[tabbarstyle="2"] {
    #TabsToolbar {
      --tab-first-last-inline-margin: 0;
      --tab-first-last-inline-margin: 0;
    }
  }

  #TabsToolbar
    :is(
      .tabbrowser-tab,
      .toolbarbutton-1,
      separator,
      #personal-bookmarks,
      #search-container,
      .accessibility-indicator,
      .private-browsing-indicator,
      #private-browsing-indicator-with-label
    ) {
    margin-top: var(--drag-space, 0px) !important;
  }

  // ---------- Shadow DOM ----------
  #tabbrowser-arrowscrollbox {
    --margin-top: var(--drag-space, 0px) !important;
  }

  #scrollbutton-up,
  #scrollbutton-down,
  spacer[part="overflow-start-indicator"],
  spacer[part="overflow-end-indicator"] {
    margin-top: var(--margin-top, revert) !important;
  }

  @include Option("userChromeJS.Sidra.Tabs.Separators.Enabled") {
    /* ---------------------------------------- Separators ---------------------------------------- */
    :root {
      --separators-color-saturation: 0.25;
    }

    .tab-stack {
      margin-inline-end: 1px !important;
    }

    .tabbrowser-tab:nth-child(1 of .tabbrowser-tab:not([hidden]))
      .tab-stack::before,
    #tabbrowser-tabs[overflow][haspinnedtabs]
      .tabbrowser-tab:nth-child(1 of .tabbrowser-tab:not([pinned], [hidden]))
      .tab-stack::before,
    .tab-stack::after {
      content: "";
      display: block;
      position: absolute;
      width: 1px;
      height: 50%;
      border-inline-end: 1px solid currentColor;
      top: 25%;
      opacity: var(--separators-color-saturation);
      box-sizing: border-box;
      pointer-events: none;
    }

    .tab-stack::before {
      inset-inline-end: 100%;
      transform: translateX(calc(-1 * var(--tab-separator-offset)));
    }

    :root:-moz-locale-dir(rtl) .tab-stack::before {
      transform: translateX(var(--tab-separator-offset));
    }

    .tab-stack::after {
      inset-inline-start: 100%;
      transform: translateX(var(--tab-separator-offset));
    }

    :root:-moz-locale-dir(rtl) .tab-stack::after {
      transform: translateX(calc(-1 * var(--tab-separator-offset)));
    }

    .tabbrowser-tab:not([hidden]):is([selected], :hover, [multiselected])
      .tab-stack::before,
    .tabbrowser-tab:not([hidden]):is([selected], :hover, [multiselected])
      .tab-stack::after,
    .tabbrowser-tab:not([hidden]):has(
        + .tabbrowser-tab:is([selected], :hover, [multiselected]):not([hidden])
      )
      .tab-stack::after,
    .tabbrowser-tab:not([hidden]):has(
        + .tabbrowser-tab[hidden]
          + .tabbrowser-tab:is([selected], :hover, [multiselected]):not(
            [hidden]
          )
      )
      .tab-stack::after,
    .tabbrowser-tab:not([hidden]):has(
        + .tabbrowser-tab[hidden]
          ~ .tabbrowser-tab[hidden]
          + .tabbrowser-tab:is([selected], :hover, [multiselected]):not(
            [hidden]
          )
      )
      .tab-stack::after {
      opacity: 0 !important;
    }

    #tabbrowser-tabs[overflow]
      .tabbrowser-tab[pinned]:not([selected], :hover, [multiselected]):has(
        + .tabbrowser-tab:nth-child(
            1 of .tabbrowser-tab:not([pinned], [hidden])
          )
      )
      .tab-stack::after,
    #tabbrowser-tabs[overflow]
      .tabbrowser-tab[pinned]:not([selected], :hover, [multiselected]):has(
        + .tabbrowser-tab[hidden]
          + .tabbrowser-tab:nth-child(
            1 of .tabbrowser-tab:not([pinned], [hidden])
          )
      )
      .tab-stack::after,
    #tabbrowser-tabs[overflow]
      .tabbrowser-tab[pinned]:not([selected], :hover, [multiselected]):has(
        + .tabbrowser-tab[hidden]
          ~ .tabbrowser-tab[hidden]
          + .tabbrowser-tab:nth-child(
            1 of .tabbrowser-tab:not([pinned], [hidden])
          )
      )
      .tab-stack::after {
      opacity: var(--separators-color-saturation) !important;
    }
  }

  @import "tabs";

  // ---------------------------------------- Tab Scroll Animation ----------------------------------------

  #tabbrowser-tabs[overflow] .tabbrowser-tab:not([pinned]) {
    box-sizing: content-box !important;
  }

  #tabbrowser-tabs[overflow]:not([movingtab]) .tabbrowser-tab:not([pinned]) {
    pointer-events: none !important;
    box-sizing: content-box !important;
    padding-inline: var(--tab-scroll-animation-inline-padding) !important;
    margin-inline: var(--tab-scroll-animation-inline-margin) !important;
    overflow-clip-margin: 0px !important;
  }

  #tabbrowser-tabs[overflow]:not([movingtab])
    .tabbrowser-tab:not([pinned])
    .tab-stack {
    pointer-events: auto !important;
  }

  #tabbrowser-tabs[overflow]:not([movingtab])
    .tabbrowser-tab:nth-child(1 of .tabbrowser-tab:not([pinned], [hidden])) {
    margin-inline-start: 0px !important;
  }

  #tabbrowser-tabs[overflow]:not([movingtab])
    .tabbrowser-tab:nth-last-child(1 of .tabbrowser-tab:not([hidden])) {
    margin-inline-end: 0px !important;
  }

  @include Option("userChromeJS.Sidra.Tabs.TabsOnBottom.Enabled") {
    /* -------------------- Title Bar -------------------- */

    #TabsToolbar {
      order: 3 !important;
    }

    #toolbar-menubar {
      order: 0 !important;
      background-color: var(--toolbar-bgcolor) !important;
      color: var(--toolbar-color) !important;
      --toolbarbutton-icon-fill: inherit !important;
      --toolbarbutton-hover-background: inherit !important;
      --toolbarbutton-active-background: inherit !important;
    }

    #TabsToolbar::before {
      transform: rotateX(180deg);
    }

    /* -------------------- Nav Bar -------------------- */

    #nav-bar {
      order: 1 !important;
    }

    /* -------------------- Personal Bar -------------------- */

    #PersonalToolbar {
      order: 2 !important;
    }

    /* -------------------- Tabs -------------------- */

    :root {
      --drag-space: 0px !important;
    }

    .tab-background {
      transform: rotateX(180deg);
    }

    /* -------------------- Window Control Buttons -------------------- */

    #TabsToolbar > :is(.titlebar-buttonbox-container, .titlebar-spacer) {
      display: none !important;
    }

    #toolbar-menubar[inactive] ~ #nav-bar > .titlebar-buttonbox-container {
      display: block !important;
    }
  }
}
