:host {
  margin-block-end: var(--markdown-syntax-margin-block-end, 16px);
}

* {
  box-sizing: border-box;
}

img {
  height: var(--code-tabs-icon-height, 24px);
  width: auto;
}

#tabs,
#tabpanels {
  --code-tabs-border: 1px solid var(--code-tabs-border-color, transparent);
}

:host(:is(:focus-within, :hover)) :is(#tabs, #tabpanels) {
  --code-tabs-border: 1px solid var(--code-tabs-border-focus-color, var(--primary-color));
}

:host(:is(:focus-within, :hover)) #tabs button {
  border-block-end-color: var(--code-tabs-border-focus-color, var(--primary-color));
}

#tabs {
  display: flex;
  background: var(--code-tabs-tabs-background);
  overflow-x: auto;
  z-index: 2;
  position: relative;
  inset-block-end: -1px;
}

#tabs button {
  display: flex;
  align-items: center;
  gap: 9px;
  border-start-start-radius: var(--code-border-radius);
  border-start-end-radius: var(--code-border-radius);
  border-block-end: var(--code-tabs-border);
  border-block-end-color: var(--code-tabs-background, var(--markdown-syntax-background-color, #f6f8fa));
}

#tabs button[selected] {
  background: var(--code-tabs-background, var(--markdown-syntax-background-color, #f6f8fa));
  border: var(--code-tabs-border);
  border-block-start: 2px solid var(--code-tabs-selected-highlight-color, var(--markdown-link-color));
  border-block-end-color: var(--code-tabs-background, var(--markdown-syntax-background-color, #f6f8fa));
  border-block-end-width: 0;
  padding: 9px 15px 11px 15px;
}

#tabs button[selected]:focus,
#tabs button[selected]:hover {
  color: inherit;
}

#tabs button[selected]::before {
  content: '';
  z-index: -1;
  position: absolute;
  inset-inline-start: -100%;
  border-end-end-radius: 3px;
  background-color: var(--code-tabs-background, var(--markdown-syntax-background-color, #f6f8fa));
}

#tabs button img:not([src]) {
  display: none;
}

#tabpanels {
  background: var(--code-tabs-tabpanel-background, var(--markdown-syntax-background-color, #f6f8fa));
  border-radius: var(--code-border-radius);
  overflow: hidden;
  min-height: var(--code-tabs-min-height, 1px);
  z-index: 1;
  position: relative;
  border: var(--code-tabs-border);
}

:host([selected-index="0"]) #tabpanels {
  border-start-start-radius: 0;
}

:host([align="start"]) #tabs {
  justify-content: var(--code-tabs-justify-tabs, start);
}

:host([align="end"]) #tabs {
  justify-content: var(--code-tabs-justify-tabs, end);
}

:host([align="start"]) #tabpanels {
  border-start-start-radius: 0;
  border-start-end-radius: var(--code-border-radius);
}

:host([align="end"]) #tabpanels {
  border-start-start-radius: var(--code-border-radius);
  border-start-end-radius: 0;
}

/* visually hidden */
#sr-clone {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}