/* 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/. */

/* Removing styling from the button */
.tabBarTabButton {
  overflow: hidden;
  width: 100%;
  height: 100%;
  padding: 0;
  border: none;
  margin: 0;
  background: none;
  font: inherit;
  text-overflow: ellipsis;
}

.tabBarTabWrapper {
  display: flex;
  overflow: auto hidden;
  min-width: 0; /* This makes the tab container actually shrinkable below min-content */
  flex: 1;
  flex-flow: row nowrap;
  padding: 0;
  margin: 0 -0.5px -1px; /* The -0.5px horizontal margin combines with the -0.5px horizontal margin of .tabBarTab to clip off the first tab's 1px starting border. The -1px bottom margin makes our contents overlap the .Details-top-bar bottom border, so that the selected tab can cover that bottom border. */
  list-style: none;
  scrollbar-width: none;
}

.tabBarTab {
  position: relative;
  min-width: 8em;
  padding: 6px 4px 5px;
  border: solid transparent;
  border-width: 0 1px;
  margin: 0 -0.5px 1px; /* The -0.5px horizontal margin makes the 1px border between adjacent tabs overlap. The 1px bottom margin makes space for the .Details-top-bar bottom border. */
  background-clip: padding-box;
  cursor: default;
  font-size: 12px;
  text-align: center;
  transition:
    background-color 200ms,
    border-color 200ms;
  transition-timing-function: var(--animation-timing);
  user-select: none;
  white-space: nowrap;
}

/* Place the top tab bar in a separate element to avoid tapered corners. */
.tabBarTab::before {
  position: absolute;
  top: 0;
  right: -1px;
  left: -1px;
  height: 2px;
  background-color: transparent;
  content: '';
  transition:
    background-color 200ms,
    border-color 200ms;
  transition-timing-function: var(--animation-timing);
}

.tabBarTab.selected::before {
  background-color: var(--blue-50);
  transition: none; /* Switch the background color instantly when a tab is selected */
}

.tabBarTab:not(.selected):hover {
  border-color: var(--grey-20);
  background-color: var(--grey-20);
}

.tabBarTab:not(.selected):hover::before {
  background-color: var(--grey-40);
}

.tabBarTab.selected {
  z-index: 1;
  padding: 6px 4px;
  border-color: var(--grey-30);
  margin: 0 -0.5px; /* No bottom margin, so that this tab covers the .Details-top-bar bottom border. */
  background: #fff;
  color: var(--blue-60);
  transition: none; /* Switch the background color instantly when a tab is selected */
}

@media (forced-colors: active) {
  .tabBarTab {
    transition: none; /* Transition of background color doesn't look nice with backplating, so disable it */
  }

  /* In High Contrast Mode, we have distinct background/foreground color, so we don't need the thin
     line at the top to indicate which tab is selected */
  .tabBarTab::before {
    display: none;
  }

  .tabBarTab.selected {
    background: SelectedItem;
  }

  .tabBarTab.selected button {
    color: SelectedItemText;
  }

  .tabBarTab:not(.selected):hover {
    border-color: SelectedItem;
    background-color: SelectedItemText;
  }

  .tabBarTab:not(.selected):hover button {
    color: SelectedItem;
  }
}
