#content {
  margin: 0;
  max-width: 100%;
}

#fsdocs-main-menu {
  padding: var(--spacing-200);

  & .menu {

    & a[href*="guides"]:before {
      display: inline-block;
      position: relative;
      top: 3px;
      width: 16px;
      height: 16px;
      content: "";
      background-color: currentColor;
      mask-size: contain;
      mask-repeat: no-repeat;
      mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23000' d='m14 20.18l-3.59-3.59L9 18l5 5l9-9l-1.41-1.42z'/%3E%3Cpath fill='%23000' d='M25 5h-3V4a2 2 0 0 0-2-2h-8a2 2 0 0 0-2 2v1H7a2 2 0 0 0-2 2v21a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2M12 4h8v4h-8Zm13 24H7V7h3v3h12V7h3Z'/%3E%3C/svg%3E");
    }

    & a[href*="explanations"]:before {
      display: inline-block;
      position: relative;
      top: 3px;
      width: 16px;
      height: 16px;
      content: "";
      background-color: currentColor;
      mask-size: contain;
      mask-repeat: no-repeat;
      mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23000' d='M26 30H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h20a2 2 0 0 1 2 2v24a2 2 0 0 1-2 2M6 4v24h20V4Z'/%3E%3Cpath fill='%23000' d='M9 7h11v2H9zm0 5h7v2H9z'/%3E%3C/svg%3E");
    }

    & a[href*="reference"]:before {
      display: inline-block;
      position: relative;
      top: 3px;
      width: 16px;
      height: 16px;
      content: "";
      background-color: currentColor;
      mask-size: contain;
      mask-repeat: no-repeat;
      mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23000' d='M24 4v22.75l-7.1-3.59l-.9-.45l-.9.45L8 26.75V4zm0-2H8a2 2 0 0 0-2 2v26l10-5l10 5V4a2 2 0 0 0-2-2'/%3E%3C/svg%3E");
    }
  }
}

.menu {
  .nav-header {
    padding-bottom: var(--spacing-50);
    color: var(--nav-item-border-color);
    font-size: var(--font-100);
    text-transform: none;
  }

  .nav-item {
    background-color: var(--background);
    background: linear-gradient(90deg, var(--background) 0%, var(--background) 75%, var(--header-background) 100%);

    & a {
      padding: var(--spacing-100);
      font-size: var(--font-100);

      & .icon {
        position: relative;
        top: 3px;
      }

      &:hover {
        background-color: var(--menu-item-hover-background);
        background: linear-gradient(90deg, var(--menu-item-hover-background) 0%, var(--menu-item-hover-background) 75%, var(--header-background) 100%);
      }
    }
  }
}

#fsdocs-page-menu {
  #on-this-page {
    color: var(--nav-item-border-color);
  }

  li {
    background-color: var(--background);
    background: linear-gradient(90deg, var(--background) 0%, var(--background) 75%, var(--header-background) 100%);

    &:has(> a:hover) {
      background-color: var(--menu-item-hover-background);
      background: linear-gradient(90deg, var(--menu-item-hover-background) 0%, var(--menu-item-hover-background) 75%, var(--header-background) 100%);
    }

    & a {
      padding: var(--spacing-100);
      font-size: var(--font-100);

      &:hover {
        background-color: var(--menu-item-hover-background);
        background: linear-gradient(90deg, var(--menu-item-hover-background) 0%, var(--menu-item-hover-background) 75%, var(--header-background) 100%);
      }
    }
  }
}

code {
  font-size: var(--font-100);
}

.lang-bar {
  display: flex;
  align-content: stretch;
  align-items: stretch;
  flex-wrap: wrap;
  gap: var(--spacing-50) var(--spacing-400);
  margin-top: var(--spacing-100);
}

.lang-block {
  width: max-content;
  flex-grow: 1;

  &:first-child {
    width: 100%;
  }

  &:last-child {
    width: 100%;
  }

  & summary {
    pointer-events: none;
  }
}

.lang-block.console table.pre {
  border: 1px solid var(--shadow-color) !important;
  border-right-width: 20px !important;
  border-radius: 5px !important;
  background-color: var(--ananoid-console-field-color) !important;
}

.lang-block.console table.pre code {
  color: var(--code-value-color);
}

.lang-block > img {
  border: 1px solid var(--shadow-color);
  border-radius: 14px;
  box-shadow: 6px 6px 10px 1px var(--shadow-color);
}

.lang-block > img:hover {
  box-shadow: 8px 8px 12px 2px var(--shadow-color);
}

blockquote {
  display: block;
  margin-left: var(--spacing-200);
  margin-right: var(--spacing-400);
  border-top: 1px solid var(--shadow-color);
  border-left: 1px solid var(--code-value-color);
  border-bottom: 1px solid var(--shadow-color);
  background: linear-gradient(to right, var(--ananoid-logo-field-color), transparent 25px);
  white-space: nowrap;

  > h2 {
    margin: 0;
    padding: var(--spacing-100) 0 var(--spacing-50) 0;

    & a {
      font-size: var(--font-500);
      text-shadow: 1px 1px 2px var(--ananoid-logo-field-color);
      color: var(--code-value-color);
    }
  }

  > p {
    margin: 0;
    padding: var(--spacing-50) 0 var(--spacing-100) 0;

    > strong {
      color: var(--heading-color);
    }
  }
}

.perf {
  table {
    width: 100%;
    border-collapse: collapse;

    & thead {
      border-bottom: 1px solid var(--shadow-color);

      & tr > th {
        color: var(--code-value-color);
        font-size: var(--font-100);
        text-align: center;
      }
    }

    & tbody {
      & td {
        padding: 0 var(--spacing-100) var(--spacing-50) var(--spacing-100);
        border-right: 1px solid var(--shadow-color);
        border-bottom: 1px solid var(--shadow-color);
        font-family: var(--monospace-font);
      }

      & td:nth-child(1) {
        border-bottom: none;
        background: linear-gradient(to left, var(--shadow-color), var(--background) 50%);
        font-family: var(--system-font);
        font-style: italic;
        font-size: var(--font-100);
        text-align: right;
      }

      & tr:nth-child(odd) {
        background-color: var(--ananoid-console-field-color);
      }

      & tr:nth-child(even) {
        background-color: var(--background);
      }
    }
  }
}

[data-theme=dark] {
  --code-value-color: #c9fd63;
  --shadow-color: #8C6C41;
  --ananoid-logo-field-color: #c9fd63;
  --ananoid-console-field-color: #303030;

  .lang-block.console table.pre {
    border: 1px solid var(--shadow-color) !important;
    border-right-width: 20px !important;
    border-radius: 5px !important;
    background-color: var(--ananoid-console-field-color) !important;
  }

  .lang-block.console table.pre code {
    color: var(--code-value-color);
  }

  blockquote {
    border-top: 1px solid var(--shadow-color);
    border-left: 1px solid #af75c1;
    border-bottom: 1px solid var(--shadow-color);
    background: linear-gradient(to right, var(--ananoid-logo-field-color), transparent 25px);

    > h2 {
      & a {
        text-shadow: 1px 1px 2px var(--code-color);
        color: #af75c1;
      }
    }

    > p {
      > strong {
        color: var(--heading-color);
      }
    }
  }
}