/* Redoc Styling */

/* This is not a realy good way to do this! */
/* But there is no plan to add class names or support styling another way for CE */
/* see: https://github.com/Redocly/redoc/pull/2159 */

/* Not supported for dark theme: */
/* - authorisation */
/* - Request Body schema: when there are multiple options */
/* - value background e.g. enums */
/* - OneOf */

/* Variables */
/* TODO: get all vars direct from md vars */
body {
  --redoc-plugin-name-font-size: 18px;
  --redoc-plugin-text-font-size: 18px;
  --redoc-plugin-secondary-font-size: 15px;
}

/* Lightmode */
body[data-md-color-scheme="default"] {
  --redoc-plugin-heading-color: #272727;
  --redoc-plugin-text-color: #3b3c45;
  --redoc-plugin-secondary-font-color: #525252;
  --redoc-plugin-required-color: #d41f1c;
  --redoc-plugin-json-name-color: #262626;
  --redoc-plugin-responses-disabled: #d41f1c;
  --redoc-plugin-table-border-color: #dcdde5;
  --redoc-plugin-one-of-color: #32329f;

  --redoc-plugin-menu-point-bg: #f2f2f2;
  --redoc-plugin-json-nesting-bg: rgba(0, 0, 0, 0.04);
  --redoc-plugin-samples-bg: rgba(0, 0, 0, 0.01);

  --redoc-plugin-json-main-color: #272727;
  --redoc-plugin-json-token-string-color: #16bc28;
  --redoc-plugin-json-token-number-color: #2989c4;
  --redoc-plugin-json-token-keyword-color: #ff4a4a;
}

/* Darkmode */
body[data-md-color-scheme="slate"] {
  --redoc-plugin-heading-color: #ffffff;
  --redoc-plugin-text-color: #e2e4e9d1;
  --redoc-plugin-secondary-font-color: #a5a1a1;
  --redoc-plugin-required-color: #9a1614;
  --redoc-plugin-json-name-color: #f3efef;
  --redoc-plugin-responses-disabled: #b71114;
  --redoc-plugin-table-border-color: #363636;
  --redoc-plugin-one-of-color: #32329f;

  --redoc-plugin-menu-point-bg: #262931;
  --redoc-plugin-json-nesting-bg: hsla(0, 0%, 100%, 0.039);
  --redoc-plugin-samples-bg: rgba(0, 0, 0, 0.04);

  --redoc-plugin-json-main-color: #ffffff;
  --redoc-plugin-json-token-string-color: #a0fbaa;
  --redoc-plugin-json-token-number-color: #4a8bb3;
  --redoc-plugin-json-token-keyword-color: #d2435b;
}

/* ------------------------- */
/* ---- Overall Spacing ---- */
/* ------------------------- */

body:has(#redoc) {
  padding: 0;
  margin: 0;
}

/* Inline styles */
.md-main__inner.md-grid:has(#redoc) {
  margin-inline: auto;
  margin-block: 0;
  max-width: 80rem;
}

.md-main__inner.md-grid:has(#redoc) .md-content__inner.md-typeset {
  margin: 0;
  padding: 0;
}

.md-content__inner:before,
.md-main__inner.md-grid:has(#redoc) .md-content__inner.md-typeset > h1,
.md-main__inner.md-grid:has(#redoc) .md-content__inner.md-typeset > a {
  display: none;
}

/* Top Section */
#redoc div:has(> div > div.api-info) {
  /* display: none; */
}

/* disable smooth scrolling, otherwise navigation wont work */
/* TODO: make it work with smooth scrolling */
html:has(#redoc) {
  scroll-behavior: auto;
}

/* -------------------------- */
/* ------- Navigation ------- */
/* -------------------------- */

#redoc .menu-content {
  background-color: var(--md-default-bg-color);
  top: 48px !important;
  height: calc(100vh - 48px) !important;
}

#redoc .menu-content > .scrollbar-container > ul,
#redoc .menu-content > .scrollbar-container > ul > li {
  margin: 0;
}

#redoc .menu-content > .scrollbar-container > ul {
  padding-top: 40px;
}

#redoc .menu-content > div > ul > li > label:has(+ ul) {
  display: flex;
  flex-direction: row;
}

#redoc .menu-content > div > ul > li:has(ul) > label > span {
  font-size: var(--redoc-plugin-text-font-size);
  font-weight: bold;
  color: var(--redoc-plugin-heading-color);
}

/* menu arrows */
#redoc .menu-content > div > ul > li:has(ul) > label > svg > polygon {
  fill: var(--redoc-plugin-heading-color);
}

#redoc .menu-content > div > ul > li > label,
#redoc .menu-content > div > ul > li > ul > li > label {
  background-color: #ffffff00;
  display: flex;
  flex-direction: row-reverse;
  font-size: var(--redoc-plugin-secondary-font-size);
  border-radius: 12px;
  transition: background-color 0.2s ease-out;
}

#redoc .menu-content > div > ul > li > label > .operation-type,
#redoc .menu-content > div > ul > li > ul > li > label > .operation-type {
  font-size: var(--redoc-plugin-secondary-font-size);
  margin-top: 5px;
  margin-right: 0;
  text-align: end;
}

#redoc .menu-content > div > ul > li > label:hover,
#redoc .menu-content > div > ul > li > ul > li > label:hover {
  background-color: var(--redoc-plugin-menu-point-bg);
}

/* when active */
#redoc .menu-content > div > ul > li > label.-depth1.active,
#redoc .menu-content > div > ul > li > label.-depth2.active,
#redoc .menu-content > div > ul > li > ul > li > label.-depth2.active {
  background-color: var(--redoc-plugin-menu-point-bg);
}

/* redoc credits */
#redoc .menu-content div:has(> div > a) {
  height: -webkit-fill-available;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

#redoc .menu-content div:has(> a) {
  position: sticky;
  width: auto;
  background-color: var(--md-default-bg-color);
}

#redoc .menu-content div > a {
  color: var(--redoc-plugin-secondary-font-color) !important;
  border-top: 1px solid var(--redoc-plugin-table-border-color);
}

/* Responsive */
@media (max-width: 1760px) {
  #redoc .menu-content {
    width: 300px;
  }

  #redoc .api-content {
    width: calc(100% - 300px);
  }
}
@media (max-width: 850px) {
  #redoc .menu-content,
  #redoc .api-content {
    width: 100%;
  }
}

/* -------------------------- */
/* ---- Middle and Right ---- */
/* -------------------------- */

/* Tag Overview Section */
.api-content > div[data-section-id]:not([data-section-id*="operation"]) {
}

/* Operation Section */
.api-content > div[data-section-id*="operation"] {
}

/* Operation Section Left */
.api-content > div[data-section-id*="operation"] > div > div:first-child {
}

/* Request Schema Table */
.api-content > div[data-section-id*="operation"] > div > div:first-child table {
}

/* Section  */
.api-content
  > div[data-section-id]:not([data-section-id*="operation"]):not(:first) {
  padding-top: 100px;
}
.api-content > div[data-section-id*="operation"] {
  padding-bottom: 80px;
}

/* Reqest/Response Table - positioning */
.api-content
  > div[data-section-id*="operation"]
  > div
  > div:first-child
  table
  > tbody
  > tr:has(> td + td) {
  display: flex;
  flex-direction: column;
  padding-top: 1em;
  padding-bottom: 1em;
}

/* Reqest/Response Table - seperator */
/* operation section seperator */
.api-content
  > div[data-section-id*="operation"]
  > div
  > div:first-child
  table
  > tbody
  > tr:has(*:nth-child(2)):not(.expanded):not(:last-child),
.api-content > div[data-section-id*="operation"]::after {
  border-bottom: 1px solid var(--redoc-plugin-table-border-color);
}

/* Reqest/Response Table - deeper level styling */
.api-content
  > div[data-section-id*="operation"]
  > div
  > div:first-child
  table
  > tbody
  > tr
  > td:only-child
  > div {
  margin: 0;
  border-radius: 12px;
}

/* Reqest/Response Table - name and required positioning */
/* Reqest/Response Table - remove left line */
.api-content
  > div[data-section-id*="operation"]
  > div
  > div:first-child
  table
  > tbody
  > tr
  > td {
  padding: 0;

  background-image: none;
  border-left: none;
}

/* Reqest/Response Table - remove left points */
.api-content
  > div[data-section-id*="operation"]
  > div
  > div:first-child
  table
  > tbody
  > tr
  > td:first-child
  > span:first-child {
  display: none;
}

/* Reqest/Response Table - remove bottom border */
.api-content
  > div[data-section-id*="operation"]
  > div
  > div:first-child
  table
  > tbody
  > tr
  > td:nth-child(2) {
  border-bottom: none;
}

/* Reqest/Response Header - display required next to rest */
/* Reqest/Response Table - display required next to name */
.api-content > div[data-section-id*="operation"] > div > div:first-child h5,
.api-content
  > div[data-section-id*="operation"]
  > div
  > div:first-child
  table
  > tbody
  > tr
  > td:first-child:not(:only-child) {
  display: flex;
  align-items: baseline;
}

/* Reqest/Response Header - required left margin */
/* Reqest/Response Table - required left margin */
.api-content
  > div[data-section-id*="operation"]
  > div
  > div:first-child
  h5
  > div:last-child,
.api-content
  > div[data-section-id*="operation"]
  > div
  > div:first-child
  table
  > tbody
  > tr
  > td:not(:only-child):first-child
  > div:last-child {
  margin-left: 1em;
}

/* Reqest/Response Table - margin beneath type */
.api-content
  > div[data-section-id*="operation"]
  > div
  > div:first-child
  table
  > tbody
  > tr
  > td:nth-child(2)
  > div {
  display: grid;
  grid-template-areas:
    "type"
    "description"
    "default"
    "value";
}
/* not all areas are used, because there is not rly a way to differentiate the elements */

/* Reqest/Response Table - assign grid area */
.api-content
  > div[data-section-id*="operation"]
  > div
  > div:first-child
  table
  > tbody
  > tr
  > td:nth-child(2)
  > div
  > div:has(> div) {
  grid-area: description;
  padding-top: 8px;
}

/* Reqest/Response Table - assign grid area */
.api-content
  > div[data-section-id*="operation"]
  > div
  > div:first-child
  table
  > tbody
  > tr
  > td:nth-child(2)
  > div
  > div:has(> div):has(+ div) {
  padding-bottom: 8px;
}

/* Reqest/Response Table - darken further layer of nesting */
.api-content
  > div[data-section-id*="operation"]
  > div
  > div:first-child
  table
  tr
  > td:only-child
  > div {
  background: var(--redoc-plugin-json-nesting-bg);
}

.api-content > div[data-section-id*="operation"] > div > div:first-child table {
  display: table !important; /* needed for responsiv */
  margin-left: 20px;
}

/* Operation Section Right - path */
.api-content
  > div[data-section-id*="operation"]
  > div
  > div:nth-child(2)
  > div:first-child {
  background-color: var(--redoc-plugin-samples-bg);
  border: var(--redoc-plugin-table-border-color) solid 1px;
  border-radius: 12px;
}

/* Operation Section Right - path dropdown icon */
.api-content
  > div[data-section-id*="operation"]
  > div
  > div:nth-child(2)
  > div:first-child
  > button
  svg
  > polygon {
  fill: var(--redoc-plugin-secondary-font-color);
}

/* Operation Section Right - path - focus */
.api-content
  > div[data-section-id*="operation"]
  > div
  > div:nth-child(2)
  > div:first-child
  > button:focus {
  box-shadow: none;
}

/* Operation Section Right - example boxes */
.api-content
  > div[data-section-id*="operation"]
  > div
  > div:nth-child(2)
  > div:not(:first-child) {
  background-color: var(--redoc-plugin-samples-bg);
  margin-top: 24px;
}
.api-content
  > div[data-section-id*="operation"]
  > div
  > div:nth-child(2)
  > div:not(:first-child)
  > h3 {
  padding: 20px;
  border: var(--redoc-plugin-table-border-color) solid 1px;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}
.api-content
  > div[data-section-id*="operation"]
  > div
  > div:nth-child(2)
  > div:not(:first-child)
  > div {
  padding: 20px;
  border: var(--redoc-plugin-table-border-color) solid 1px;
  border-top: none;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
}

/* Operation Section Right - example boxes */
.api-content
  > div[data-section-id*="operation"]
  > div
  > div:nth-child(2)
  > div:not(:first-child)
  > div
  > ul
  > li {
  margin: 0;
}

/* Operation Section Right - heading */
.api-content
  > div[data-section-id*="operation"]
  > div
  > div:nth-child(2)
  > div:not(:first-child)
  h3 {
  margin: 0;
  padding-bottom: 20px;
  font-weight: bold;
}

/* ------------------------ */
/* ----- Text styling ----- */
/* ------------------------ */

/* Request body schema styling */
.api-content > div[data-section-id*="operation"] > div > div:first-child h5 {
  color: var(--redoc-plugin-secondary-font-color);
}
.api-content
  > div[data-section-id*="operation"]
  > div
  > div:first-child
  h5
  > span {
  color: var(--redoc-plugin-secondary-font-color);
}

/* Reqest/Response Table - name styling */
.api-content .property-name {
  font-size: var(--redoc-plugin-name-font-size);
  font-weight: bold;
  font-family: ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono",
    "Roboto Mono", "Oxygen Mono", "Ubuntu Mono", "Fira Mono", "Droid Sans Mono",
    "Courier New", monospace;
  color: var(--redoc-plugin-json-name-color);
}

/* Reqest/Response Table - expandalbe style */
.api-content .property-name + svg {
  height: var(--redoc-plugin-name-font-size);
  width: var(--redoc-plugin-name-font-size);
}

/* One of styling */
.api-content
  > div[data-section-id*="operation"]
  > div
  > div:first-child
  span:has(+ div:empty),
.api-content
  > div[data-section-id*="operation"]
  > div
  > div:first-child
  div:has(+ div:empty)
  > button {
  /* TODO: */
  /* background-color: var(--redoc-plugin-one-of-color);
    border-color: var(--redoc-plugin-one-of-color); */
}

/* 'required' styling */
.api-content
  > div[data-section-id*="operation"]
  > div
  > div:first-child
  h5
  > div:nth-child(3),
.api-content
  > div[data-section-id*="operation"]
  > div
  > div:first-child
  table
  > tbody
  > tr
  > td:not(:only-child):first-child
  > div:last-child {
  font-size: var(--redoc-plugin-secondary-font-size);
}

/* Reqest/Response samples buttons */
.api-content
  > div[data-section-id*="operation"]
  > div
  > div:nth-child(2)
  > div:has(> h3)
  > div
  > ul
  > li {
  background-color: var(--redoc-plugin-json-nesting-bg);
  color: var(--redoc-plugin-heading-color);
}
.api-content
  > div[data-section-id*="operation"]
  > div
  > div:nth-child(2)
  > div:has(> h3)
  > div
  > ul
  > li.tab-success {
  color: rgb(29, 129, 39);
}

/* application/json styling */
.api-content
  > div[data-section-id*="operation"]
  > div
  > div:first-child
  h5
  > div:has(select.dropdown-select)
  > label,
.api-content
  > div[data-section-id*="operation"]
  > div
  > div:first-child
  h5
  > div:has(select.dropdown-select)
  > svg,
.api-content
  > div[data-section-id*="operation"]
  > div
  > div:nth-child(2)
  > div:has(> h3)
  > div
  > div
  > div
  > div:has(select.dropdown-select)
  svg
  > polyline,
.api-content
  > div[data-section-id*="operation"]
  > div
  > div:nth-child(2)
  > div:has(> h3)
  > div
  > div
  > div
  > div:first-child
  > div,
.api-content
  > div[data-section-id*="operation"]
  > div
  > div:nth-child(2)
  > div:has(> h3)
  > div
  > div
  > div
  > div:has(select.dropdown-select)
  label {
  color: var(--redoc-plugin-heading-color);
}
/* application/json 'Content Type' styling */
.api-content
  > div[data-section-id*="operation"]
  > div
  > div:nth-child(2)
  > div:has(> h3)
  > div
  > div
  > div
  > div:first-child
  > span,
.api-content
  > div[data-section-id*="operation"]
  > div
  > div:nth-child(2)
  > div:has(> h3)
  > div
  > div
  > div
  > div:has(select.dropdown-select)
  > div:first-child
  > span {
  color: var(--redoc-plugin-secondary-font-color);
}

/* application/json samples bg color */
.api-content
  > div[data-section-id*="operation"]
  > div
  > div:nth-child(2)
  > div:has(> h3)
  > div
  > div
  > div
  > div:first-child,
.api-content
  > div[data-section-id*="operation"]
  > div
  > div:nth-child(2)
  > div:has(> h3)
  > div
  > div
  > div
  > div:has(select.dropdown-select)
  > div:first-child {
  background-color: var(--redoc-plugin-json-nesting-bg);
}

/* Reqest/Response samples button spacing */
.api-content
  > div[data-section-id*="operation"]
  > div
  > div:nth-child(2)
  > div:has(> h3)
  > div
  > ul {
  padding-bottom: 10px;
  padding-inline: 0;
  margin: 0;
}

/* 'Type' / 'Default' / 'Value' styling*/
.api-content
  > div[data-section-id*="operation"]
  > div
  > div:first-child
  table
  > tbody
  > tr
  > td:nth-child(2)
  > div
  > div
  > span {
  font-size: var(--redoc-plugin-secondary-font-size);
  color: var(--redoc-plugin-secondary-font-color);
}

/* Heading Color */
.api-content > div > div > div > h1,
.api-content
  > div[data-section-id]:not([data-section-id*="operation"])
  > div:first-child
  h2,
.api-content > div[data-section-id*="operation"] h2,
.api-content > div[data-section-id*="operation"] h3 {
  color: var(--redoc-plugin-heading-color);
}

/* Operation Heading margin */
.api-content > div[data-section-id*="operation"] h2 {
  margin-top: 0;
}

/* Text Color */
.api-content > div > div > div:has(h1),
.api-content
  > div[data-section-id]:not([data-section-id*="operation"])
  > div:not(:first-child),
.api-content > div[data-section-id*="operation"] > div > div:first-child,
.api-content
  > div[data-section-id*="operation"]
  > div
  > div:first-child
  table
  > tbody
  > tr
  > td:nth-child(2)
  > div
  > div:has(> div) {
  color: var(--redoc-plugin-text-color);
  font-size: var(--redoc-plugin-text-font-size);
}

/* Responses font size */
.api-content
  > div[data-section-id*="operation"]
  > div
  > div:first-child
  > div:last-child
  > div
  > button {
  font-size: var(--redoc-plugin-text-font-size);
}

/* Responses disabled color */
.api-content
  > div[data-section-id*="operation"]
  > div
  > div:first-child
  > div:last-child
  > div
  > button[disabled] {
  color: var(--redoc-plugin-responses-disabled);
}

/* Request / Response samples styling */
.api-content
  > div[data-section-id*="operation"]
  > div
  > div:nth-child(2)
  > div:has(> h3)
  .redoc-json
  > code {
  font-size: var(--redoc-plugin-secondary-font-size);
}

/* Request / Response samples - expand icon */
.api-content
  > div[data-section-id*="operation"]
  > div
  > div:nth-child(2)
  > div:has(> h3)
  .redoc-json
  > code
  button.collapser {
  height: calc(var(--redoc-plugin-secondary-font-size) * 1.5);
  width: calc(var(--redoc-plugin-secondary-font-size) * 1.5);
  top: 0px;
}

.api-content
  > div[data-section-id*="operation"]
  > div
  > div:nth-child(2)
  > div:has(> h3)
  > div
  > div
  > div {
  padding-inline: 0;
  padding-bottom: 0;
}

.api-content
  > div[data-section-id*="operation"]
  > div
  > div:nth-child(2)
  > div:has(> h3)
  .redoc-json
  > code
  button.collapser::after {
  mask-image: url("data:image/svg+xml,%3Csvg class='sc-cwHptR ehtaAK' version='1.1' viewBox='0 0 24 24' x='0' xmlns='http://www.w3.org/2000/svg' y='0' aria-hidden='true'%3E%3Cpolygon fill='black' points='17.3 8.3 12 13.6 6.7 8.3 5.3 9.7 12 16.4 18.7 9.7 '%3E%3C/polygon%3E%3C/svg%3E");
  mask-repeat: no-repeat;
  mask-size: contain;
  background-color: var(--redoc-plugin-heading-color);
  display: inline-block;
  width: -webkit-fill-available;
  height: -webkit-fill-available;
  vertical-align: middle;
  transition: transform 0.2s ease-out;
  transform: rotateZ(-90deg);
}

.api-content
  > div[data-section-id*="operation"]
  > div
  > div:nth-child(2)
  > div:has(> h3)
  .redoc-json
  > code
  button.collapser[aria-label="collapse"]::after {
  transform: rotateZ(0deg);
}

.api-content
  > div[data-section-id*="operation"]
  > div
  > div:nth-child(2)
  > div:not(:first-child)
  > div
  > div
  > div
  > div:not(:first-child)
  > div
  > div:first-child
  > button {
  color: var(--redoc-plugin-secondary-font-color);
}

.api-content
  > div[data-section-id*="operation"]
  > div
  > div:nth-child(2)
  > div:not(:first-child)
  > div
  > div
  > div
  > div:not(:first-child)
  > div
  > div:first-child
  > button:hover {
  background-color: var(--redoc-plugin-json-nesting-bg);
}

/* ------------------------ */
/* ----- JSON STYLING ----- */
/* ------------------------ */

.api-content .redoc-json > code .token.property.string {
  color: var(--redoc-plugin-json-main-color);
}

.api-content .redoc-json > code .token.string {
  color: var(--redoc-plugin-json-token-string-color);
}

.api-content .redoc-json > code .token.number {
  color: var(--redoc-plugin-json-token-number-color);
}

.api-content .redoc-json > code .token.keyword {
  color: var(--redoc-plugin-json-token-keyword-color);
}

/* ------------------------- */
/* ----- HTTP Methoden ----- */
/* ------------------------- */

#redoc span[type="post"].post,
#redoc span[type="get"].get,
#redoc span[type="put"].put,
#redoc span[type="patch"].patch,
#redoc span[type="delete"].delete {
  background-color: inherit;
  font-weight: bold;
  padding: 0;
}

#redoc span[type="post"].post {
  color: rgb(30, 101, 245);
}

#redoc span[type="get"].get {
  color: rgb(37, 184, 105);
}

#redoc span[type="put"].put {
  color: rgb(245, 144, 29);
}

#redoc span[type="patch"].patch {
  color: rgb(239, 104, 32);
}

#redoc span[type="delete"].delete {
  color: rgb(231, 11, 70);
}

#redoc span[type="post"].post + span,
#redoc span[type="get"].get + span,
#redoc span[type="put"].put + span,
#redoc span[type="patch"].patch + span,
#redoc span[type="delete"].delete + span {
  color: var(--redoc-plugin-text-color);
}