@callstack/rspress-theme/dist/styles/styles.css

Callstack theme for Rspress docs

@font-face {
  font-family: "Fira Code";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("./fonts/FiraCode-Regular.ttf") format("truetype");
}

@font-face {
  font-family: "Fira Code";
  font-style: normal;
  font-weight: 500;
  font-display: block;
  src: url("./fonts/FiraCode-Medium.ttf") format("truetype");
}

:root {
  --ck-header-font-family: "Alliance No. 2", Arial, sans-serif;
  --ck-background-primary: #ffffff;
  --ck-border-primary: #cfced5;
  --ck-border-secondary: #e9e7ee;
  --ck-foreground-primary: #f9f8fd;
  --ck-foreground-secondary: #e9e7ee;
  --ck-text-primary: #201f24;
  --ck-text-secondary: #838289;
  --ck-text-tertiary: #bcbbc2;
  --ck-accent: #8232ff;
  --ck-accent-bg: #8232ff29;
  --ck-warning: #ffb14c;
  --ck-warning-bg: #ffb14c29;
  --ck-danger: #fa7171;
  --ck-danger-bg: #fa717129;
  --ck-success: #2fc717;
  --ck-success-bg: #2fc71729;
  --ck-note: #838289;
  --ck-note-bg: #83828929;
  --ck-neutral-darkest: #201f24;
}

/* Dark mode overrides */
.dark {
  --ck-background-primary: #201f24;
  --ck-border-primary: #424145;
  --ck-border-secondary: #636266;
  --ck-foreground-primary: #2b2a2f;
  --ck-foreground-secondary: #838289;
  --ck-text-primary: #ffffff;
  --ck-text-secondary: #cfced5;
  --ck-accent-code-highlight: #8232ff33;
}

/* Gradients */
:root {
  --ck-bg-radial-1: radial-gradient(
    ellipse calc(5 * 100vw) 100vw at 100% 0%,
    rgba(130, 50, 255, 0.5) 0%,
    transparent 30%,
    transparent 100%
  );
  --ck-bg-radial-2: radial-gradient(
    ellipse calc(5 * 100vw) 100vw at 100% 100%,
    rgba(130, 50, 255, 0.5) 0%,
    transparent 15%,
    transparent 100%
  );
  --ck-bg-radial-3: radial-gradient(
    ellipse 100vw 50vw at 0% 100%,
    rgba(130, 50, 255, 0.5) 0%,
    transparent 15%,
    transparent 100%
  );
}

/* rspress fonts */
:root {
  --rp-font-family-base: "Switzer Variable", Arial, sans-serif !important;
  --rp-font-family-mono: "Fira Code", monospace !important;
  /* compat */
  --rp-font-family: "Switzer Variable", Arial, sans-serif !important;
}

/* rspress sizing */
:root {
  --rp-nav-height: 48px !important;
  --rp-sidebar-width: 320px !important;
  --rp-sidebar-menu-height: 46px !important;
  --rp-aside-width: 268px !important;
  --rp-content-padding-x: 24px;
  --rp-content-padding-y: 64px;
  --rp-radius: 4px !important;
  --rp-radius-small: 2px !important;
  --rp-radius-large: 8px !important;
}

@media (max-width: 768px) {
  html:root {
    --rp-nav-height: 48px !important;
  }
}

@media (min-width: 1280px) {
  html:root {
    --rp-sidebar-menu-height: 0px !important;
  }
}

/* rspress colors */
:root {
  /* rspress background colors */
  --rp-c-bg: var(--ck-background-primary) !important;
  --rp-c-bg-soft: var(--ck-foreground-secondary) !important;
  --rp-c-bg-mute: var(--ck-foreground-primary) !important;
  /* rspress divider colors */
  --rp-c-divider: var(--ck-border-primary) !important;
  --rp-c-divider-light: var(--ck-border-secondary) !important;
  /* rspress text colors */
  --rp-c-text-1: var(--ck-text-primary) !important;
  --rp-c-text-2: var(--ck-text-secondary) !important;
  --rp-c-text-3: var(--ck-text-tertiary) !important;
  --rp-c-text-4: var(--ck-text-tertiary) !important;
  --rp-c-text-code: var(--ck-accent) !important;
  /* rspress brand colors */
  --rp-c-brand: var(--ck-accent) !important;
  --rp-c-brand-light: var(--ck-accent) !important;
  --rp-c-brand-lighter: var(--ck-accent) !important;
  --rp-c-brand-dark: var(--ck-accent) !important;
  --rp-c-brand-darker: var(--ck-accent) !important;
  --rp-c-brand-tint: var(--ck-accent) !important;
  /* rspress gray colors */
  --rp-c-gray: var(--ck-text-secondary) !important;
  --rp-c-gray-light-1: var(--ck-text-tertiary) !important;
  --rp-c-gray-light-2: var(--ck-foreground-secondary) !important;
  --rp-c-gray-light-3: var(--ck-foreground-secondary) !important;
  --rp-c-gray-light-4: var(--ck-foreground-secondary) !important;
  --rp-c-gray-light-5: var(--ck-foreground-secondary) !important;
  /* rspress dark colors */
  --rp-c-dark: var(--ck-neutral-darkest) !important;
  --rp-c-dark-light-1: var(--ck-neutral-darkest) !important;
  --rp-c-dark-light-2: var(--ck-neutral-darkest) !important;
  --rp-c-dark-light-3: var(--ck-neutral-darkest) !important;
  --rp-c-dark-light-4: var(--ck-neutral-darkest) !important;
  --rp-c-dark-light-5: var(--ck-neutral-darkest) !important;
  /* rspress code colors */
  --rp-code-title-bg: rgba(233, 231, 238, 1) !important;
  --rp-code-block-bg: rgba(249, 248, 253, 1) !important;
  /* rspress inline code colors */
  --rp-c-text-code: var(--rp-c-text-1) !important;
  --rp-c-text-code-bg: var(--ck-border-secondary) !important;
  /* rspress link colors */
  --rp-c-link: var(--rp-c-text-1) !important;
  /* rspress tip container colors */
  --rp-container-tip-border: var(--ck-success) !important;
  --rp-container-tip-text: var(--rp-c-text-1) !important;
  --rp-container-tip-bg: var(--ck-success-bg) !important;
  --rp-container-tip-code-bg: var(--rp-code-block-bg) !important;
  /* rspress info container colors */
  --rp-container-info-border: var(--ck-accent) !important;
  --rp-container-info-text: var(--rp-c-text-1) !important;
  --rp-container-info-bg: var(--ck-accent-bg) !important;
  --rp-container-info-code-bg: var(--rp-code-block-bg) !important;
  /* rspress warning container colors */
  --rp-container-warning-border: var(--ck-warning) !important;
  --rp-container-warning-text: var(--rp-c-text-1) !important;
  --rp-container-warning-bg: var(--ck-warning-bg) !important;
  --rp-container-warning-code-bg: var(--rp-code-block-bg) !important;
  /* rspress danger container colors */
  --rp-container-danger-border: var(--ck-danger) !important;
  --rp-container-danger-text: var(--rp-c-text-1) !important;
  --rp-container-danger-bg: var(--ck-danger-bg) !important;
  --rp-container-danger-code-bg: var(--rp-code-block-bg) !important;
  /* rspress note container colors */
  --rp-container-note-border: var(--ck-note) !important;
  --rp-container-note-text: var(--rp-c-text-1) !important;
  --rp-container-note-bg: var(--ck-note-bg) !important;
  --rp-container-note-code-bg: var(--rp-code-block-bg) !important;
  /* rspress details container colors */
  --rp-container-details-border: var(--ck-note) !important;
  --rp-container-details-text: var(--rp-c-text-1) !important;
  --rp-container-details-bg: var(--ck-note-bg) !important;
  --rp-container-details-code-bg: var(--rp-code-block-bg) !important;
}

.dark {
  /* rspress background colors */
  --rp-c-bg-soft: var(--ck-foreground-primary) !important;
  --rp-c-bg-mute: var(--ck-foreground-secondary) !important;
  /* rspress divider colors */
  --rp-c-divider: var(--ck-border-secondary) !important;
  --rp-c-divider-light: var(--ck-border-primary) !important;
  /* rspress code colors */
  --rp-code-title-bg: rgba(54, 53, 57, 1) !important;
  --rp-code-block-bg: rgba(43, 42, 47, 1) !important;
  /* rspress inline code colors */
  --rp-c-text-code-bg: var(--ck-border-primary) !important;
}

/* Body */
body {
  background: var(--rp-c-bg) !important;
  color: var(--rp-c-text-1) !important;
  font-family: var(--rp-font-family) !important;
}

body * {
  line-height: 1.5 !important;
  letter-spacing: -0.02em !important;
}

code,
kbd,
samp,
pre {
  font-family: var(--rp-font-family-mono) !important;
  font-style: normal !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
}

/* Header elements */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--ck-header-font-family) !important;
  font-variant-numeric: lining-nums tabular-nums !important;
  font-feature-settings: "ss04" on !important;
  font-style: normal !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.04em !important;
}

/* Nav header */
.rspress-nav {
  background-color: var(--rp-c-bg) !important;
  border-bottom: 1px solid var(--rp-c-divider-light) !important;
  color: var(--rp-c-text-1) !important;
}

.rspress-nav-screen {
  z-index: -1 !important;
}

div[class^="navTitleMask_"] {
  border-bottom: 1px solid var(--rp-c-divider-light) !important;
}

/* Scrollbar (nav & search) */
.rspress-scrollbar {
  scrollbar-gutter: auto !important;
  scrollbar-width: thin !important;
  overflow: scroll !important;
}

/* Sidebar right border */
.rspress-sidebar {
  border-right: 1px solid var(--rp-c-divider-light) !important;
}

/* Nav items */
div[class^="menuItem_"],
div[class^="menuItem_"] > span,
div[class^="menuItemActive_"],
div[class^="menuItemActive_"] > span {
  color: var(--rp-c-text-2);
  font-size: 14px !important;
  font-weight: 400;
  margin-left: 0 !important;
  padding-top: 2px;
  padding-bottom: 2px;
  line-height: 1.5;
  border-radius: 0 !important;
}

div[class^="menuItem_"]:hover {
  background-color: var(--ck-foreground-primary) !important;
}

div[class^="menuItem_"],
div[class^="menuItemActive_"] {
  padding-left: 24px;
}

div[class^="menuItemActive_"],
div[class^="menuItemActive_"] > span {
  color: var(--rp-c-brand);
}

div[class^="menuItemActive_"]:hover {
  background-color: var(--ck-foreground-primary) !important;
}

.rspress-sidebar-item > a > div {
  margin-top: 0 !important;
}

.rspress-sidebar-item span {
  font-size: 14px !important;
}

.rspress-sidebar-section {
  margin-top: 0 !important;
  margin-bottom: 16px !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
}

.rspress-sidebar-section:first-of-type {
  margin-top: 16px !important;
}

.rspress-sidebar-section h2 {
  margin-left: 0 !important;
  padding-left: 24px !important;
}

.rspress-sidebar-section-header {
  padding-top: 2px !important;
  padding-bottom: 2px !important;
}

/* Section header text */
.rspress-sidebar-section-header > span {
  color: var(--rp-c-text-3) !important;
  font-family: var(--rp-font-family-mono) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  text-transform: uppercase;
}

.rspress-sidebar-section-header > span::before {
  content: "//";
  color: var(--rp-c-brand) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  text-transform: uppercase;
  margin-right: 6px;
}

/* Sidebar group */
.rspress-sidebar-group {
  margin-left: 0 !important;
  padding-left: 0 !important;
  border: none !important;
}

/* Group collapse icon hover */
div[class^="collapseContainer_"]:hover {
  background-color: inherit !important;
}

/* Group collapse */
.rspress-sidebar-collapse {
  color: var(--rp-c-text-1) !important;
  border-radius: 0 !important;
}

.rspress-sidebar-collapse > h2 {
  padding-top: 0px !important;
  padding-bottom: 0px !important;
}

/* Group collapse header */
.rspress-sidebar-collapse > h2 > span {
  font-size: 14px !important;
  font-family: var(--rp-font-family) !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
}

/* Group collapse hover */
.rspress-sidebar-collapse:hover {
  color: var(--rp-c-brand) !important;
  background-color: transparent !important;
}

/* Sidebar active item disable bg */
.rspress-sidebar-item-active {
  background-color: transparent !important;
}

/* Sidebar active item disable border */
.rspress-sidebar-item-active::before {
  display: none !important;
}

/* Sidebar active item border right */
.rspress-sidebar-item-active::after {
  content: "";
  background-color: var(--rp-c-brand);
  width: 1px;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
}

/* Remove default vertical line */
.rspress-sidebar-group::before {
  content: none !important;
}

/* Solid border after sections */
.rspress-sidebar-item + div.rp-border-solid {
  display: none !important;
  margin-left: 0 !important;
}

/* Remove dashed border after sections */
.rp-border-dashed {
  display: none !important;
}

/* Table of Contents */
#aside-container {
  border-left: 1px solid var(--rp-c-divider-light) !important;
  margin: -64px 0 0 0 !important;
  padding: 64px 0 16px 0 !important;
}

/* Contents - header */
#aside-container > div {
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  color: var(--rp-c-text-1) !important;
}

.aside-link:hover {
  background-color: var(--ck-foreground-primary) !important;
}

/* Content - active link */
.aside-link.aside-active {
  color: var(--rp-c-text-1) !important;
  background-color: transparent !important;
}

/* Content - active indicator */
li:has(> a.aside-link.aside-active) {
  background-color: transparent !important;
  border-left: 1px solid var(--rp-c-text-1) !important;
  border-radius: 0 !important;
  transition: none !important;
}

.home-hero-name-img {
  width: 100%;
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

/* Overview page */
.overview-index {
  padding-top: var(--rp-content-padding-y) !important;
}

div:has(> p.rspress-home-hero-text) {
  align-items: stretch;
}

a:has(> span.home-hero-primary-action) {
  background: var(--rp-c-brand) !important;
}

p.rspress-home-hero-text {
  font-size: 1.35rem;
}

@media (min-width: 370px) {
  p.rspress-home-hero-text {
    font-size: 1.5rem;
  }
}

@media (min-width: 640px) {
  p.rspress-home-hero-text {
    font-size: 2rem;
  }
}

@media (min-width: 768px) {
  p.rspress-home-hero-text {
    font-size: 3rem;
  }
}

/* NAV */
.rspress-nav {
  padding: 8px 16px !important;
}

.rspress-nav-search-button {
  height: 30px !important;
  padding: 4px !important;
  border-radius: var(--rp-radius-small) !important;
  border: 1px solid var(--rp-c-divider-light) !important;
  background-color: var(--rp-c-bg) !important;
  transition: none !important;
}

.rspress-nav-search-button button > div {
  background-color: var(--rp-c-divider-light) !important;
}

.rspress-nav-appearance > div.rp-border {
  border: none !important;
  border-radius: var(--rp-radius-small) !important;
  padding: 4px !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: background 0.15s;
}

div[class^="social-links-icon"] {
  color: var(--rp-c-text-1) !important;
  margin: 0 !important;
}

div[class^="social-links-icon"] > div {
  background: var(--rp-c-divider-light) !important;
  border: none !important;
  border-radius: var(--rp-radius-small) !important;
  padding: 6px !important;
  margin: -4px !important;
  cursor: pointer !important;
  transition: background 0.15s;
}

/* Overview page */
.overview-index div > h2 {
  border-top: none !important;
  margin-bottom: 16px !important;
}

.overview-index div:has(input#api-filter) {
  gap: 0 !important;
}

/* Overview page - no results */
.overview-index div {
  border-top: none !important;
  color: var(--rp-c-text-1) !important;
  font-family: var(--rp-font-family) !important;
  font-weight: 400 !important;
  font-size: 16px !important;
}

/* Overview page - group */
div[class^="overview-group_"] {
  background-color: var(--ck-foreground-primary) !important;
  transition: none !important;
}

/* Overview page - group header */
div[class^="overview-group_"] h3 > a {
  font-size: 16px !important;
}

/* Overview page - link */
div[class^="overview-group_"] a {
  color: var(--rp-c-text-1) !important;
}

/* Overview page - link hover */
div[class^="overview-group_"] a:hover {
  color: var(--rp-c-brand) !important;
}

/* Overview page - search */
input#api-filter {
  background: var(--rp-c-bg) url("../assets/search.svg") no-repeat 12px center /
    16px 16px;
  border: 1px solid var(--ck-border-primary);
  color: var(--rp-c-text-2);
  border-radius: var(--rp-radius-small);
  font-family: var(--rp-font-family);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  padding: 10px 12px 10px 36px;
  box-sizing: border-box;
  outline: none;
  min-width: 200px;
}

/* Overview page - search placeholder */
input#api-filter::placeholder {
  color: var(--rp-c-text-3);
  opacity: 1;
  font-family: var(--rp-font-family);
  font-size: 16px;
  font-weight: 400;
}

/* Overview page - search placeholder - close button */
input#api-filter::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  height: 16px;
  width: 16px;
  background: url("../assets/close.svg") no-repeat center center / contain;
  cursor: pointer;
}

/* SEARCH */
div#search-container div[class^="mask_"] {
  background: rgba(21, 20, 21, 0.5);
  backdrop-filter: blur(2px);
}

div#search-container div[class^="modal_"] {
  background: var(--rp-c-bg);
  border: 1px solid var(--ck-border-primary);
  border-radius: var(--rp-radius);
  font-family: var(--rp-font-family);
  padding: 0px !important;
  box-shadow: 0px 40px 40px -20px rgba(32, 31, 36, 0.3);
}

div#search-container div[class^="inputForm_"] + h2 {
  display: none;
}

div#search-container div[class^="inputForm_"] {
  border: none !important;
}

input.rspress-search-panel-input {
  color: var(--rp-c-text-1) !important;
  font-family: var(--rp-font-family) !important;
  font-size: 16px !important;
  font-style: normal !important;
  font-weight: 400 !important;
  line-height: 150% !important; /* 24px */
}

div#search-container div[class^="searchHits"] {
  border-top: 1px solid var(--ck-border-primary) !important;
  box-shadow: 0px 40px 40px -20px rgba(32, 31, 36, 0.3);
}

div#search-container div[class^="searchHits"] > div:not(:has(ul)) {
  justify-content: flex-end;
}

div#search-container div[class^="searchHits"] svg {
  display: none !important;
}

li[class*="suggestItem_"] > a {
  padding: 0 16px 0 16px !important;
  background-color: transparent !important;
  box-shadow: none !important;
  margin-left: 1px !important;
  color: var(--rp-c-text-1) !important;
}

li[class*="suggestItem_"] > a span[class^="mark_"] {
  text-decoration: underline !important;
  color: var(--rp-c-text-1) !important;
}

li[class*="suggestItem_"][class*="current_"] > a {
  color: var(--rp-c-text-1) !important;
  text-decoration: none !important;
  background-color: var(--rp-c-bg-soft) !important;
}

li[class*="suggestItem_"][class*="current_"] > a p[class^="titleForContent_"] {
  color: var(--rp-c-text-2) !important;
}

li[class*="suggestItem_"][class*="current_"] > a span[class^="mark_"] {
  background-color: var(--rp-c-bg-soft) !important;
}

li[class*="suggestItem_"]
  > a
  > div[class^="suggestItemContainer_"]
  > div
  > svg {
  display: none !important;
}

li[class*="suggestItem_"]
  > a
  > div[class^="suggestItemContainer_"]
  > div[class^="contentWrapper_"] {
  padding: 0 !important;
}

/* Logo */
img#logo {
  max-height: 16px;
}

/* Table header */
tr > th {
  background-color: var(--rp-code-block-bg) !important;
  font-weight: 500 !important;
}

/* Table - don't color even rows */
tr.rp-border {
  background-color: var(--rp-c-bg) !important;
}

/* Package Manager Tabs - background */
div[class^="tab-list_"] {
  background-color: var(--rp-code-title-bg);
}

/* Package Manager Tabs - selected color */
div[class^="tab_"][class*="selected"],
div[class^="tab_"][class*="selected"] span {
  color: var(--rp-c-text-1);
  font-weight: 500;
  margin-bottom: 0;
}

/* Package Manager Tabs - not selected color */
div[class^="tab_"][class*="not-selected_"],
div[class^="tab_"][class*="not-selected_"] span {
  color: var(--rp-c-text-2);
  font-weight: 500;
  margin-bottom: 0;
}

/* Tabs - selected underline */
div[class^="tab_"][class*="selected"]::after {
  color: var(--rp-c-brand);
  border-radius: 0;
  width: 80%;
  bottom: -2px;
  height: 2px;
  left: 10%;
}

/* Divider between code blocks and tabs */
div[class^="container_"] div[class^="language"] > .rspress-code-title {
  border-top: 1px solid var(--rp-c-divider);
}

/* Code block actions */
svg[class^="icon-wrap_"] > path,
svg[class^="icon-wrapped_"] > path,
svg[class^="icon-copy_"] > path {
  fill: var(--rp-c-text-2);
}

/* Fixes positioning of ck name on 404 page */
div#root > section {
  min-height: 100vh;
}

/* Home page background grid only on top */
div#root > section > div.rp-relative::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -100;
  background-image: url("../assets/hero-bg-shape.svg"), var(--ck-bg-radial-1);
  background-repeat: no-repeat, no-repeat;
  background-size: contain, contain;
  mask-image: radial-gradient(
    ellipse calc(150vw) 150vh at 100% -5%,
    rgb(0, 0, 0) -5%,
    transparent 40%
  );
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
}

/* Home page top noise with opacity control */
div#root > section > div.rp-relative::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -100;
  background-image: url("../assets/noise.svg");
  background-repeat: repeat;
  background-size: cover;
  mask-image: radial-gradient(
    ellipse calc(150vw) 150vh at 100% -5%,
    rgb(0, 0, 0) -5%,
    transparent 40%
  );
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
}

.dark div#root > section > div.rp-relative::after {
  opacity: 0.1;
}

/* Home page bottom name + gradients */
div#root > section:not(:has(div[class^="docLayout_"])) {
  position: relative; /* Ensure the parent is positioned */
  background-image: url("../assets/callstack.svg"), var(--ck-bg-radial-2),
    var(--ck-bg-radial-3);
  background-repeat: no-repeat, repeat, no-repeat, no-repeat;
  background-size: min(90rem, 95%) auto, auto, contain, contain;
  background-position: center calc(100% + 12px), bottom, bottom, bottom;
}

/* Home page bottom noise */
div#root > section:not(:has(div[class^="docLayout_"]))::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: auto;
  height: 100%;
  z-index: -100;
  pointer-events: none;
  background-image: url("../assets/noise.svg");
  background-repeat: repeat;
  background-size: cover;
  mask-image: var(--ck-bg-radial-2), var(--ck-bg-radial-3);
}

.dark div#root > section:not(:has(div[class^="docLayout_"]))::before {
  opacity: 0.2 !important;
}

/* Home page footer */
footer {
  border: none !important;
}

/* container */
.rspress-directive {
  background: none !important;
  border: 1px dashed transparent !important;
  border-left: 2px solid !important;
  border-radius: 0px !important;
  padding: 8px 16px !important;
  margin: 1rem 0 !important;
  font-family: var(--rp-font-family) !important;
  display: flex !important;
  align-items: flex-start !important;
  flex-direction: column !important;
}

/* container title */
.rspress-directive-title {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  font-weight: 500 !important;
  margin-bottom: 0 !important;
  line-height: 1.5 !important;
  color: var(--rp-c-text-1) !important;
}

/* container icon */
.rspress-directive .rspress-directive-title::before {
  display: inline-block;
  width: 24px;
  height: 24px;
  margin-right: 16px;
}

/* container content */
.rspress-directive-content > * {
  font-size: 16px !important;
  margin-left: 40px !important;
}

/* container content links */
.rspress-directive .rspress-directive-content a {
  font-weight: 400 !important;
}

/* container custom border left colors */
.info {
  border-left-color: var(--rp-container-info-border) !important;
}
.tip {
  border-left-color: var(--rp-container-tip-border) !important;
}
.warning {
  border-left-color: var(--rp-container-warning-border) !important;
}
.danger {
  border-left-color: var(--rp-container-danger-border) !important;
}
.details {
  border-left-color: var(--rp-container-details-border) !important;
}
.note {
  border-left-color: var(--rp-container-note-border) !important;
}

/* container custom icon */
.rspress-directive.tip .rspress-directive-title::before {
  content: "";
  background: url("../assets/check-double.svg") no-repeat center center /
    contain;
}
.rspress-directive.info .rspress-directive-title::before {
  content: "";
  background: url("../assets/info-box.svg") no-repeat center center / contain;
}
.rspress-directive.warning .rspress-directive-title::before {
  content: "";
  background: url("../assets/warning-box.svg") no-repeat center center / contain;
}
.rspress-directive.danger .rspress-directive-title::before {
  content: "";
  background: url("../assets/alert.svg") no-repeat center center / contain;
}
.rspress-directive.details .rspress-directive-title::before {
  content: "";
  background: url("../assets/details.svg") no-repeat center center / contain;
}
.rspress-directive.note .rspress-directive-title::before {
  content: "";
  background: url("../assets/notes.svg") no-repeat center center / contain;
}

details.details {
  position: relative;
}

summary.rspress-directive-title {
  width: 100%;
}

details[open] > summary.rspress-directive-title::after {
  content: "";
  position: absolute;
  left: 95%;
  width: 24px;
  height: 24px;
  background: url("../assets/arrow-right.svg") no-repeat center center / contain;
}

details:not([open]) > summary.rspress-directive-title::after {
  content: "";
  position: absolute;
  left: 95%;
  width: 24px;
  height: 24px;
  background: url("../assets/arrow-down.svg") no-repeat center center / contain;
}

/* links */
[class*="link_"]:hover {
  color: var(--rp-c-brand) !important;
}

/* code links */
[class*="link_"]:hover > code {
  color: var(--rp-c-brand) !important;
}

/* remove arrow from links */
[class*="link_"]:after {
  content: none !important;
}

/* nav menu links */
.rspress-nav-menu > a > .rspress-nav-menu-item:hover {
  color: var(--rp-c-brand) !important;
}

/* nav menu active link */
.rspress-nav-menu-item[class*="activeItem_"] {
  color: var(--rp-c-brand) !important;
}

/* Edit page */
a[class^="editLink_"] {
  color: var(--rp-c-text-2);
  position: relative;
  padding-left: 32px;
}

a[class^="editLink_"]::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 24px;
  height: 24px;
  background: url("../assets/edit-box.svg") no-repeat center center / contain;
}

/* Social links icon */
div.rspress-nav-appearance > div,
div[class^="social-links-icon_"] > div {
  color: var(--rp-c-text-1) !important;
  background: linear-gradient(
      to right,
      var(--rp-c-brand) 50%,
      var(--rp-c-divider-light) 50%
    )
    right bottom / 200% 100% !important;
  transition: background-position 0.45s cubic-bezier(0.625, 0.05, 0, 1), color
    0.45s cubic-bezier(0.625, 0.05, 0, 1), transform 0.45s
    cubic-bezier(0.625, 0.05, 0, 1) !important;
}

@media (pointer: fine) {
  div.rspress-nav-appearance > div:hover,
  div[class^="social-links-icon_"] > div:hover {
    color: #ffffff !important;
    background-position: left bottom !important;
  }
}

h1.rspress-doc-title {
  margin-bottom: 1.5rem !important;
}

h2.rspress-doc-outline {
  margin-top: 2rem !important;
  margin-bottom: 0 !important;
  border: none !important;
}

/* inline code in headers */
h1 > code,
h2 > code,
h3 > code,
h4 > code,
h5 > code,
h6 > code {
  font-family: unset !important;
  background-color: unset !important;
  padding: unset !important;
}

/* inline code outside of headers */
.rspress-doc :not(:is(pre, h1, h2, h3, h4, h5, h6)) > code {
  font-size: 16px !important;
}

/* inline code outside of headers */
.rspress-doc :not(:is(pre, div)) > code {
  border-radius: var(--rp-radius) !important;
}

/* code block titles */
.rspress-code-title {
  font-family: var(--rp-font-family-mono) !important;
}

/* header anchors (appear on hover) */
.header-anchor {
  line-height: 1.2 !important;
  margin-left: -1em !important;
}

/* mobile search button */
div[class^="mobileNavSearchButton_"] > img {
  width: 24px;
  height: 24px;
}