/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

.filterNavigatorBar {
  --internal-background-color: transparent;
  --internal-hover-background-color: rgb(0 0 0 / 0.1);
  --internal-hover-color: inherit;
  --internal-active-background-color: rgb(0 0 0 / 0.2);
  --internal-selected-background-color: transparent;
  --internal-selected-color: var(--selected-color, var(--blue-60));
  --internal-separator-img: url(../../../res/img/svg/scope-bar-separator.svg);

  display: flex;
  height: 24px;
  flex-flow: row nowrap;
  flex-shrink: 0;
  padding: 0;
  margin: 0;
  cursor: default;
  user-select: none;

  /* Note: no overflow: hidden for historical reasons - we wanted to see
     an animation for items at the end while they were fading out, but
     we have removed this animation in the meantime */
}

.filterNavigatorBarItem {
  position: relative;
  display: flex;
  min-width: 0;
  height: 24px;
  flex-flow: row nowrap;
  padding: 0 6px 0 8px;
  border: solid transparent;
  border-width: 0 8px 0 6px;
  border-right-color: transparent !important;
  background-clip: padding-box;
  background-color: var(--internal-background-color);

  /* Make sure the design also works in High Contrast Mode. The colors are overriden
     in the forced colors media query. */
  forced-color-adjust: none;
  line-height: 24px;
}

.filterNavigatorBarRootItem {
  max-width: 100%;
  flex-shrink: 0;
  margin-left: -8px;
}

.filterNavigatorBarItemContent {
  display: flex;
  overflow: hidden;

  /* These lines are mostly to override the default browser styles for `<button>`.
   * The 8px are used by the box-shadow when the button receives focus */
  padding: 0;
  border: none;
  margin: auto;
  background: none;
  color: inherit;
  font: inherit;
  line-height: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.filterNavigatorBarItemContent > .nodeIcon {
  margin-inline-end: 5px;
}

.filterNavigatorBarItem::before,
.filterNavigatorBarItem::after {
  position: absolute;
  top: 0;
  bottom: 0;
  display: block;
  width: 0;
  border: 12px solid transparent;
  border-right-width: 2px;
  content: '';
  pointer-events: none;
}

.filterNavigatorBarItem::before {
  left: -14px;
  border-left-color: transparent !important;
}

.filterNavigatorBarItem::after {
  right: -14px;
  border-top-color: transparent !important;
  border-right-color: transparent !important;
  border-bottom-color: transparent !important;
}

.filterNavigatorBarItem:not(.filterNavigatorBarLeafItem)::after {
  background-image: var(--internal-separator-img);
  background-position: -18px -12px;
  background-repeat: no-repeat;
  background-size: 24px 24px;
}

.filterNavigatorBarItem:not(
    .filterNavigatorBarRootItem,
    .filterNavigatorBarLeafItem
  )::before,
.filterNavigatorBarItem:not(.filterNavigatorBarLeafItem)::after {
  border-color: var(--internal-background-color);
}

.filterNavigatorBarItem.filterNavigatorBarSelectedItem {
  background-color: var(--internal-selected-background-color);
  color: var(--internal-selected-color);
}

.filterNavigatorBarSelectedItem:not(.filterNavigatorBarRootItem)::before,
.filterNavigatorBarSelectedItem:not(:first-of-type:last-of-type)::after {
  border-color: var(--internal-selected-background-color);
}

.filterNavigatorBarItem:not(.filterNavigatorBarLeafItem):hover,
.filterNavigatorBarItem:has(button.profileFilterNavigator--tab-selector):hover {
  background-color: var(--internal-hover-background-color);
  color: var(--internal-hover-color);
}

.filterNavigatorBarItem:not(
    .filterNavigatorBarRootItem,
    .filterNavigatorBarLeafItem
  ):hover::before,
.filterNavigatorBarItem:not(.filterNavigatorBarLeafItem):hover::after {
  border-color: var(--internal-hover-background-color);
}

.filterNavigatorBarItem:not(.filterNavigatorBarLeafItem):active:hover {
  background-color: var(--internal-hover-background-color);
}

.filterNavigatorBarItem:not(
    .filterNavigatorBarRootItem,
    .filterNavigatorBarLeafItem
  ):active:hover::before,
.filterNavigatorBarItem:not(.filterNavigatorBarLeafItem):active:hover::after {
  border-color: var(--internal-hover-background-color);
}

.filterNavigatorBarUncommittedItem {
  opacity: 0.65;
}

@media (forced-colors: active) {
  .filterNavigatorBar {
    --internal-background-color: ButtonFace;
    --internal-hover-background-color: SelectedItemText;
    --internal-hover-color: SelectedItem;
    --internal-active-background-color: SelectedItemText;
    --internal-selected-background-color: SelectedItem;
    --internal-selected-color: SelectedItemText;
    --internal-separator-img: url(../../../res/img/svg/scope-bar-separator-hcm-light.svg);
  }

  .filterNavigatorBarItem {
    color: ButtonText;
  }

  /* When the tab selector is active, we want the item to look like a button */
  .filterNavigatorBarSelectedItem:has(
    button.profileFilterNavigator--tab-selector
  ) {
    background-color: ButtonFace;
    color: ButtonText;
  }

  /* In regular mode, the opacity is tweaked, which isn't suited for High Contrast Mode.
     Here we want the full opacity and a gray text */
  .filterNavigatorBarUncommittedItem {
    color: GrayText;
    opacity: 1;
  }

  @media (prefers-color-scheme: dark) {
    .filterNavigatorBar {
      --internal-separator-img: url(../../../res/img/svg/scope-bar-separator-hcm-dark.svg);
    }
  }
}
