@property --drag-space {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}
// ---------------------------------------- Drag Space ----------------------------------------
@include Option("userChromeJS.Sidra.Tabs.DragSpace.Left.Disabled") {
  .titlebar-spacer[type="pre-tabs"] {
    display: none !important;
  }
}

@include Option("userChromeJS.Sidra.Tabs.DragSpace.Right.Disabled") {
  .titlebar-spacer[type="post-tabs"] {
    display: none !important;
  }
}

@include Option("userChromeJS.Sidra.Tabs.DragSpace.Top.Windowed.Enabled") {
  :root[sizemode="normal"] {
    --drag-space: 8px;
  }
}

@include Option("userChromeJS.Sidra.Tabs.DragSpace.Top.Maximized.Enabled") {
  :root[sizemode="maximized"] {
    --drag-space: 8px;
  }
}

@include Option("userChromeJS.Sidra.Tabs.DragSpace.Top.Fullscreen.Enabled") {
  :root[sizemode="fullscreen"] {
    --drag-space: 8px;
  }
}

#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) !important;
}

/* ---------- Shadow DOM ---------- */

#tabbrowser-arrowscrollbox {
  --drag-space-only-tabs: var(--drag-space) !important;
}

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