:host {
  /**
  * @prop --color-background: The color of the inactive tabs.
  * @prop --color-text: The color of the text for inactive tabs.
  * @prop --color-visible: The color of the active tab.
  * @prop --color-visible-text: The color of the text for the active tab.
  * @prop --color-focus: outline color when hovering or pre-selecting a tab.
  */
  display: block;
  --color-background: var(--dnn-color-secondary-dark, lightgray);
  --color-text: var(--dnn-color-secondary-contrast, #333);
  --color-visible: var(--dnn-color-primary, #3792ED);
  --color-visible-text: var(--dnn-color-primary-contrast, #FFF);
  --color-focus: var(--dnn-color-primary, #3792ed);
}

.tabTitles {
  display: flex;
  background-color: var(--color-background);
}
.tabTitles button {
  cursor: pointer;
  padding: 0.5rem 1rem;
  border: 0;
  margin: 0;
  background-color: transparent;
  color: var(--color-text);
}
.tabTitles button.visible {
  background-color: var(--color-visible);
  color: var(--color-visible-text);
}
.tabTitles button:focus-visible, .tabTitles button:hover {
  outline: none;
  box-shadow: 0 0 2px 2px var(--color-focus);
}

.currentTab {
  border: 1px solid var(--color-background);
}