/**
 * Redoc 文档内容主题样式。
 *
 * 本文件只覆盖 Redoc 渲染区域的菜单、代码块、右侧示例区和明暗主题视觉，
 * 不负责公共 header、页面高度和滚动布局。
 */

#redoc-container {
  a[href*="redocly.com"] {
    display: none;
  }
  .menu-content {
    background: #f0f0f0;
    [role="search"] {
      padding: 20px 0px 10px;
    }
    label {
      background-color: #f0f0f0;
      border-top: 1px solid #f0f0f0;
      border-bottom: 1px solid #f0f0f0;
      font-size: 14px;
      font-weight: 500;
      color: #151515;
    }
    label:hover {
      background-color: #f8f8f8;
      color: inherit;
    }
    label[class*="active"] {
      background-color: #fff;
      color: #1677ff;
      border-color: #eaeaea;
      border-right: 1px solid #fff;
    }
  }
  pre {
    background-color: #303336;
    code[class*="language-"] {
      text-shadow: none;
    }
    .punctuation {
      color: rgb(252, 253, 254);
    }
    .token.property {
      color: rgb(252, 253, 254);
      opacity: 0.85;
    }
    .token.operator {
      color: rgb(252, 253, 254);
    }
    .token.string {
      color: rgb(230, 85, 13);
    }
  }

  .redoc-wrap {
    .api-content {
      color: #151515;
      [data-section-id^="tag/"][data-section-id*="/paths/"] > div > div:last-child {
        background: #303336;
      }
      > [data-section-id] > div,
      > [data-section-id] > div > div:first-child {
        min-width: 0;
        max-width: 100%;
      }
      > [data-section-id] > div > div:first-child {
        table:has(.property-name) {
          max-width: 100%;
          table-layout: fixed;
        }
        table:has(.property-name) td {
          min-width: 0;
          max-width: 100%;
          white-space: normal;
          overflow-wrap: anywhere;
          word-break: break-word;
        }
        table:has(.property-name) td:first-child {
          width: 25%;
        }
        table:has(.property-name) td:last-child {
          width: 75%;
        }
        table:has(.property-name) td[colspan] {
          width: 100%;
        }
        table:has(.property-name) td[colspan] > div,
        table:has(.property-name) .redoc-markdown,
        table:has(.property-name) .property-name,
        table:has(.property-name) code {
          max-width: 100%;
          white-space: normal;
          overflow-wrap: anywhere;
          word-break: break-word;
        }
      }
      h1 {
        font-weight: 600;
      }
      h2 {
        font-size: 22px;
        font-weight: 600;
      }
    }
  }
  .redoc-wrap > div:last-child {
    background: #303336;
  }
  .redoc-json {
    code {
      .token.property.string {
        color: rgb(252, 253, 254);
        opacity: 0.85;
      }
      .token.string {
        color: rgb(230, 85, 13);
      }
      .token.boolean {
        color: rgb(117, 107, 177);
      }
    }
  }
  .codeSample details {
    margin-bottom: 10px;
    summary {
      cursor: pointer;
    }
  }
}

html[data-theme="dark"] #redoc-container {
  .menu-content {
    background: #141414;
    label {
      background-color: #141414;
      border: initial;
      color: #ffffff;
    }
    label:hover {
      background-color: #393939;
      color: #ffffff;
    }
    label[class*="active"] {
      background-color: #393939;
      color: #1677ff;
    }
  }
  pre {
    background-color: #303336;
    .punctuation {
      color: rgb(252, 253, 254);
    }
    .token.property {
      color: rgb(252, 253, 254);
    }
    .token.operator {
      color: rgb(252, 253, 254);
    }
    .token.string {
      color: rgb(230, 85, 13);
    }
  }

  .redoc-wrap {
    .api-content {
      color: #e6e6e6;
      background: #191919;
      [data-section-id^="tag/"][data-section-id*="/paths/"] > div > div:last-child {
        background: #191919;
      }
      h1,
      h2,
      h3,
      h4,
      h5,
      h6 {
        color: #e6e6e6;
        span {
          color: #e6e6e6;
        }
      }
      table tr,
      table th,
      table td {
        span {
          color: #ffffff;
        }
        background: #191919;
        div {
          background: #191919;
        }
      }
    }
  }
  .redoc-wrap > div:last-child {
    background: #303336;
  }
  .redoc-json {
    code {
      .token.property.string {
        color: rgb(252, 253, 254);
      }
      .token.string {
        color: rgb(230, 85, 13);
      }
      .token.boolean {
        color: rgb(117, 107, 177);
      }
    }
  }
}