[data-markdown] {
  .markdown-code-group {
    margin: 18px 0;
  }

  .markdown-code-group-list {
    display: flex;
    min-height: 37px;
    align-items: flex-end;
    gap: 2px;
    padding: 0;
    overflow: visible;
    overscroll-behavior: contain;
  }

  .markdown-code-group-tab {
    position: relative;
    padding: 9px 14px 10px;
    color: var(--ink-muted);
    appearance: none;
    background: transparent;
    border: 0;
    border-top: 2px solid transparent;
    border-radius: 0;
    cursor: default;
    font: 600 13px/1 var(--font-ui);
    transition: color 45ms ease, border-color 45ms ease;

    &:not(.is-active) {
      cursor: pointer;

      &:hover {
        color: var(--ink);
      }
    }

    &.is-active {
      z-index: 1;
      color: var(--clay);
      border-top-color: var(--clay);
    }
  }

  .markdown-code-group-panel {
    padding-top: 8px;

    &[hidden] {
      display: none;
    }

    .markdown-code-block {
      margin-top: 0;
      border-radius: 7px;

      &[data-lang]::before {
        display: none;
      }
    }
  }
}