/* ViewletExtensionDetailTabs.css */
/* TODO move into separate files */
.ExtensionDetailTabs {
  display: flex;
  gap: 10px;
  contain: content;
  border-bottom: 1px solid var(--PanelBorderTopColor, color-mix(in srgb, var(--WorkbenchForeground) 28%, transparent));
  padding-left: 20px;
  contain: strict;
  height: 36px;
  max-width: var(--ExtensionDetailMaxWidth);
  margin: 0 auto;
  width: 100%;
}

.ExtensionDetailTab {
  padding: 3px;
  contain: content;
  user-select: none;
  cursor: pointer;
  text-transform: uppercase;
  font-size: 11px;
  background: transparent;
  border: none;
  color: var(--PanelTabForeground, color-mix(in srgb, var(--WorkbenchForeground) 72%, transparent));
}

.ExtensionDetailTab:focus-visible {
  outline: 1px solid var(--FocusBorder);
  outline-offset: -1px;
  border: none;
}

.ExtensionDetailTab:where(:hover) {
  color: var(--PanelTabHoverForeground, var(--WorkbenchForeground));
}

.ExtensionDetailTabSelected {
  border-bottom: 1px solid var(--PanelTabActiveForeground, var(--FocusBorder, currentColor));
  color: var(--PanelTabActiveForeground, var(--WorkbenchForeground));
}
