@use "utils/theme" as *;
@use "utils/selector" as *;
@use "utils/option" as *;
@use "utils/image" as *;
// Mostly copy from WaveFox
@layer LowPriority, HighPriority;
@layer LowPriority {
  .tab-close-button {
    list-style-image: url("./images/icons/close-9px.svg") !important;
  }

  /* ---------------------------------------- Tabs (SVG) ---------------------------------------- */
  @include TabStyle("1") {
    --left-svg: #{image("tabs/option_1/left_corners.svg")};
    --center-svg: #{image("tabs/option_1/center.svg")};
    --right-svg: #{image("tabs/option_1/right_corners.svg")};
  }
  @include TabStyle("2") {
    --left-svg: #{image("tabs/option_2/left_corners.svg")};
    --center-svg: #{image("tabs/option_2/center.svg")};
    --right-svg: #{image("tabs/option_2/right_corners.svg")};
  }
  @include TabStyle("3") {
    --left-svg: #{image("tabs/option_3/left_corners.svg")};
    --center-svg: #{image("tabs/option_3/center.svg")};
    --right-svg: #{image("tabs/option_3/right_corners.svg")};
  }
  @include TabStyle("4") {
    --left-svg: #{image("tabs/option_4/left_corners.svg")};
    --center-svg: #{image("tabs/option_4/center.svg")};
    --right-svg: #{image("tabs/option_4/right_corners.svg")};
  }
  @include TabStyle("5") {
    --left-svg: #{image("tabs/option_5/left_corners.svg")};
    --center-svg: #{image("tabs/option_5/center.svg")};
    --right-svg: #{image("tabs/option_5/right_corners.svg")};
  }
  @include TabStyle("6") {
    --left-svg: #{image("tabs/option_1/left_corners.svg")};
    --center-svg: #{image("tabs/option_1/center.svg")};
    --right-svg: #{image("tabs/option_1/right_corners.svg")};
    --tab-first-last-inline-margin: calc(var(--tab-min-height) / 4);
  }
  @include TabStyle("7") {
    --left-svg: #{image("tabs/option_6/left_corners.svg")};
    --center-svg: #{image("tabs/option_6/center.svg")};
    --right-svg: #{image("tabs/option_6/right_corners.svg")};
    --tab-first-last-inline-margin: calc(var(--tab-min-height) / 4);
    --outer-drop-border-offset: 1px;
  }
  @include TabStyle("8") {
    --left-svg: #{image("tabs/option_7/left_corners.svg")};
    --center-svg: #{image("tabs/option_7/center.svg")};
    --right-svg: #{image("tabs/option_7/right_corners.svg")};
    --tab-first-last-inline-margin: calc(var(--tab-min-height) / 4);
    --outer-drop-border-offset: 1px;
  }
  @include TabStyle("9") {
    --left-svg: #{image("tabs/option_8/left_corners.svg")};
    --center-svg: #{image("tabs/option_8/center.svg")};
    --right-svg: #{image("tabs/option_8/right_corners.svg")};
    --tab-first-last-inline-margin: calc(var(--tab-min-height) / 4);
    --outer-drop-border-offset: 1px;
  }
  @include TabStyle("10") {
    --left-svg: #{image("tabs/option_9/left_corners.svg")};
    --center-svg: #{image("tabs/option_9/center.svg")};
    --right-svg: #{image("tabs/option_9/right_corners.svg")};
    --tab-first-last-inline-margin: calc(var(--tab-min-height) / 2 - 6px);
    --outer-drop-border-offset: 1px;
  }
  @include TabStyle("11") {
    --left-svg: #{image("tabs/option_10/left_corners.svg")};
    --center-svg: #{image("tabs/option_10/center.svg")};
    --right-svg: #{image("tabs/option_10/right_corners.svg")};
    --tab-first-last-inline-margin: calc(var(--tab-min-height) / 2);
    --outer-drop-border-offset: 1px;
  }
  @include TabStyle("12") {
    --left-svg: #{image("tabs/option_11/left_corners.svg")};
    --center-svg: #{image("tabs/option_11/center.svg")};
    --right-svg: #{image("tabs/option_11/right_corners.svg")};
    --tab-first-last-inline-margin: calc(var(--tab-min-height) / 2);
    --outer-drop-border-offset: 1px;
  }
  @include TabStyle("13") {
    --left-svg: #{image("tabs/option_12/left_corners.svg")};
    --center-svg: #{image("tabs/option_12/center.svg")};
    --right-svg: #{image("tabs/option_12/right_corners.svg")};
    --tab-first-last-inline-margin: calc(var(--tab-min-height) / 2);
    --outer-drop-border-offset: 1px;
  }

  @include TabStyle("6,7,8,10,11,12,13") {
    --tab-first-last-inline-margin: calc(var(--tab-min-height) / 4);
  }

  @include TabStyle("9") {
    --tab-first-last-inline-margin: calc(var(--tab-min-height) / 2 - 6px);
  }

  /* -------------------- Floating Tabs -------------------- */
  @include TabStyle("1,2,3,4,5") {
    --tab-first-last-inline-margin: calc(var(--tab-block-margin) / 2);
    --tab-scroll-animation-inline-margin: calc(
      -1 * var(--tab-first-last-inline-margin)
    );
    --tab-scroll-animation-inline-padding: calc(
      var(--tab-first-last-inline-margin) * 2
    );
    --tab-bg-block-margin: var(--tab-block-margin);
    --my-tab-inline-padding: var(--tab-first-last-inline-margin);
    --tab-separator-offset: var(--tab-first-last-inline-margin);
  }

  /* -------------------- Attached Tabs -------------------- */
  @include TabStyle("6,7,8,9,10,11,12,13") {
    --tab-scroll-animation-inline-margin: calc(
      -1 * var(--tab-first-last-inline-margin)
    );
    --tab-scroll-animation-inline-padding: var(--tab-first-last-inline-margin);
    --tab-bg-block-margin: 0px;
    --my-tab-inline-padding: 0px;
    --tab-separator-offset: 0px;
    --pinned-tabs-width-offset: 2px;
  }

  /* ---------------------------------------- Main Window ---------------------------------------- */

  :root {
    --tab-shadow-max-size: 0px !important;
    --tab-attention-indicator-position: 50% calc(50% + 12px);
    --tabstrip-min-height: auto !important;
  }

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

  #nav-bar {
    border: none !important;
  }

  /* ---------------------------------------- Titlebar ---------------------------------------- */

  :root[tabsintitlebar] {
    .browser-titlebar {
      will-change: auto !important;
      transition: color var(--inactive-window-transition) !important;

      &:-moz-window-inactive {
        color: color-mix(
          in srgb,
          currentColor calc(var(--inactive-titlebar-opacity) * 100%),
          transparent
        ) !important;
        opacity: 1 !important;
      }
    }
  }

  /* ---------------------------------------- Density ---------------------------------------- */
  :root {
    &[uidensity="compact"] {
      --tab-min-height: 32px !important;
    }
    &[onload="TMP_TBP_Startup();"][uidensity="compact"] {
      --tab-min-height: 24px !important;
    }
    &[uidensity="touch"] {
      --tab-min-height: 40px !important;
    }
  }

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

  .tabbrowser-tab {
    --tab-label-mask-size: 0px !important;
    overflow-clip-margin: var(--tab-min-height) !important;
    padding-inline: var(--my-tab-inline-padding) !important;

    &[visuallyselected] {
      color: var(--toolbar-color) !important;
      position: relative;
      z-index: 2 !important;
      @include Option(
        "userChromeJS.Sidra.Tabs.SelectedTab.FillWithToolbarBg.Enabled"
      ) {
        .tab-background {
          --gradient-background-image: linear-gradient(
            var(--toolbar-bgcolor),
            var(--toolbar-bgcolor)
          );
          --gradient-background-attachment: fixed;
          --gradient-background-size: auto auto;
          --gradient-background-position: left top;
          --gradient-background-repeat: no-repeat;

          --amo-background-image-1: var(--lwt-header-image, none);
          --amo-background-attachment-1: fixed;
          --amo-background-size-1: auto auto;
          --amo-background-position-1: right top;
          --amo-background-repeat-1: no-repeat;

          --amo-background-image-2: var(--lwt-additional-images, none);
          --amo-background-attachment-2: fixed, fixed, fixed;
          --amo-background-size-2: auto auto, auto auto, auto auto;
          --amo-background-position-2: var(--lwt-background-alignment);
          --amo-background-repeat-2: var(--lwt-background-tiling);

          background-color: transparent !important;
          background-image: var(--gradient-background-image),
            var(--amo-background-image-1), var(--amo-background-image-2) !important;
          background-attachment: var(--gradient-background-attachment),
            var(--amo-background-attachment-1),
            var(--amo-background-attachment-2) !important;
          background-size: var(--gradient-background-size),
            var(--amo-background-size-1), var(--amo-background-size-2) !important;
          background-position: var(--gradient-background-position),
            var(--amo-background-position-1), var(--amo-background-position-2) !important;
          background-repeat: var(--gradient-background-repeat),
            var(--amo-background-repeat-1), var(--amo-background-repeat-2) !important;
        }
      }
    }

    &:not([visuallyselected]) {
      color: inherit !important;

      &:hover .tab-background {
        background-color: var(--toolbarbutton-hover-background) !important;
      }

      &[multiselected] .tab-background {
        background-color: var(--toolbarbutton-active-background) !important;
      }

      #tabbrowser-tabs[movingtab] & {
        z-index: 0 !important;
      }
    }

    .tab-background {
      mask-image: var(--left-svg), var(--center-svg), var(--right-svg);
      mask-size:
        auto 100%,
        calc(100% - var(--tab-min-height) * 2) 100%,
        auto 100%;
      mask-position:
        left center,
        center center,
        right center;
      mask-repeat: no-repeat, no-repeat, no-repeat;
      box-shadow: none !important;
      outline: none !important;
      margin-block: var(--tab-bg-block-margin) !important;
      margin-inline: calc(-1 * (var(--tab-min-height) / 2)) !important;
      border-radius: 0px !important;
      pointer-events: none !important;
    }

    &[pinned] .tab-content {
      padding-inline: calc(
        (var(--tab-min-height) - 16px) / 2 +
          var(--pinned-tabs-width-offset, 0px)
      ) !important;
    }

    &:not([pinned]) .tab-content {
      padding-inline: 10px !important;
    }
  }

  #tabbrowser-tabs[overflow] .tab-drop-indicator {
    inset-inline-start: var(--tab-first-last-inline-margin) !important;
  }

  .tabbrowser-tab[pending] .tab-icon-image {
    filter: saturate(0) !important;
  }

  .tab-close-button {
    width: 16px !important;
    height: 16px !important;
    border-radius: 50% !important;
    padding: 2px !important;
    margin: 0px !important;
  }

  .tab-close-button:hover {
    background-color: var(--toolbarbutton-hover-background) !important;
  }

  .tab-close-button:hover:active {
    background-color: var(--toolbarbutton-active-background) !important;
  }

  /* -------------------- Container Indicators -------------------- */
  .tab-context-line {
    margin: 0px !important;
  }

  /* -------------------- Tab Icon Indicators -------------------- */
  .tabbrowser-tab:is([image], [pinned]) .tab-content[attention]:not([selected]),
  .tab-content[pinned][titlechanged]:not([selected]) {
    background-position: var(--tab-attention-indicator-position) !important;
  }

  /* ---------------------------------------- Tab Bar ---------------------------------------- */
  #TabsToolbar #search-container {
    padding-block: 0 !important;
  }

  /* ---------------------------------------- Indents ---------------------------------------- */

  #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;
  }

  /* ---------------------------------------- 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.TabCounter.Enabled") {
    /* -------------------- Tab Counter -------------------- */
    #tabbrowser-tabs {
      counter-reset: TabCounter;
    }

    .tabbrowser-tab {
      counter-increment: TabCounter;
    }

    #tabbrowser-tabs ~ #alltabs-button::after {
      content: counter(TabCounter);
    }
  }

  /* -------------------- Selected Tab Indicator -------------------- */
  @include Option("userChromeJS.Sidra.Tabs.SelectedTabIndicator.Enabled") {
    .tabbrowser-tab[visuallyselected][usercontextid] .tab-background {
      box-shadow: inset 0 -2px 0 var(--tab-loading-fill) !important;
    }

    .tabbrowser-tab[visuallyselected]:not([usercontextid]) .tab-background {
      box-shadow: inset 0 2px 0 var(--tab-loading-fill) !important;
    }
  }
}
