div[class^='PlayGround-module--exampleContainerWrapper'] {
  overflow: hidden;

  #container {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .teaser-img img {
    margin-left: 0 !important;
    margin-top: 60px !important;
  }
}

@media (max-width: 900px) {
  .teaser-img img {
    margin-left: 0 !important;
    margin-top: 0 !important;
  }
}

// 自定义 G2Plot 官网样式
pre[class*='language-'] {
  margin: 0.6em 0 0.8em;
  padding: 0.6em 1em;
  font-size: 90%;
}

code.language-sign,
pre.language-sign,
.sign .language-ts {
  background: #e6f7ff !important;
}

description code.language-text {
  color: #3c43d1;
}

code.language-text {
  padding: 2px 4px;
  color: #8085e8;
  font-size: 90%;
  background-color: #f5f5f5 !important;
  border: none;
  border-radius: 4px;
}

:not(pre) > code[class*='language-'] {
  padding: 1px 4px;
}

[class*='markdown-module--markdown--'] table {
  margin: 0.5em 0 24px 0 !important;
}

// 复写 H 边距
[class*='markdown-module--markdown'] h3 {
  margin: 1em 0 0.6em;
  line-height: 36px;
}

/** 教程文档 自定义样式 **/

// 自定义 playground 样式
.manual-docs .lake-table td [class*='MdPlayGround-module--playground'] {
  border: none;
}

.manual-docs .lake-table .SplitPane .Pane:first-child {
  width: 100% !important;
}

.lake-table img.lake-drag-image {
  max-height: unset;
}

.lake-table [class*='markdown-module--markdown'] table td:first-child {
  width: auto;
}

.manual-docs img[alt='design'] {
  max-width: 100%;
  max-height: unset;
  display: block;
}

.manual-docs table img[data-role='image'] {
  max-width: 100%;
  max-height: unset;
  margin: 0 auto;
  display: block;
}

.manual-docs .lake-table td[colspan='1'] {
  vertical-align: top;
  background-color: rgb(255, 255, 255);
  color: rgb(38, 38, 38);
  min-width: 90px;
  font-size: 14px;
  white-space: normal;
  overflow-wrap: break-word;
  border: 1px solid rgb(217, 217, 217);
  padding: 4px 8px;
  cursor: default;
}

.manual-docs .lake-table td.style1 {
  min-width: 90px;
  font-size: 14px;
  white-space: normal;
  overflow-wrap: break-word;
  border: 1px solid rgb(217, 217, 217);
  padding: 4px 8px;
  cursor: default;
}

.design-guide-list li,
.manual-docs .lake-fontsize-12 {
  color: rgba(0, 0, 0, 0.65);
  font-size: 12px;
  font-weight: 400;
}

.manual-docs .lake-table strong {
  font-size: 12px;
  color: rgb(38, 38, 38);
  line-height: 1.74;
  letter-spacing: 0.05em;
}

[class*='markdown-module--markdown'] .manual-docs {
  h1 {
    margin: 40px 0 20px;
  }
  p {
    margin: 0 !important;
  }
}

// 自定义一个 marker START
a.ant-anchor-link-title[href='#快速上手'],
a.ant-anchor-link-title[href='#quick-start'],
a.ant-anchor-link-title[href='#事件监听'],
a.ant-anchor-link-title[href='#event-listener']  {
  transform: translateX(-10px);
}

a.ant-anchor-link-title[href='#快速上手']::before,
a.ant-anchor-link-title[href='#quick-start']::before, 
a.ant-anchor-link-title[href='#事件监听']::before,
a.ant-anchor-link-title[href='#event-listener']::before {
  content: ' ';
  display: inline-flex;
  width: 10px;
  height: 10px;
  transform: translateY(-4.5px);
  border: 5px solid rgb(140, 140, 140);
  border-right-color: transparent;
  border-top-color: transparent;
  border-bottom-color: transparent;
}
// 自定义一个 marker END

/** 教程文档 自定义样式 END **/

/** 图表示例 API 文档样式 START */
[class*='markdown-module--exampleContent'] [class*='APIDoc-module--docContent'] {
  h5::before {
    content: '👉 ';
    display: inline-block;
    width: 14px;
    height: 18px;
    margin-right: 8px;
  }
}
/** 图表示例 API 文档样式 END */

/** 自定义 组件-API 文档页样式 START **/

[class*="markdown-module--main"] [class*="markdown-module--content"] .component-img {
  display: block;
  margin: 0 auto;
  max-height: 400px;
  border: 1px solid #efefef;
  padding: 4px;
}

img.img-400 {
  max-width: 400px !important;
  border: 1px solid #efefef;
}

/** 自定义 组件-API 文档页样式 END **/
