@kubex/zinc 0.0.2 → 1.0.0

package/docs/assets/styles/docs.css

@@ -0,0 +1,1168 @@
+:root {
+  --docs-background-color: rgb(var(--zn-body));
+  --docs-sidebar-color: rgb(var(--zn-panel));
+  --docs-border-color: rgb(var(--zn-border-color));
+  --docs-border-width: 1px;
+  --docs-border-radius: 10px;
+  --docs-content-max-width: 840px;
+  --docs-sidebar-width: 320px;
+  --docs-sidebar-transition-speed: 250ms;
+  --docs-content-toc-max-width: 260px;
+  --docs-content-padding: 2rem;
+  --docs-content-vertical-spacing: 2rem;
+  --docs-search-overlay-background: rgb(0 0 0 / 0.2);
+  --docs-skip-to-main-width: 200px;
+}
+
+/* Light theme */
+:root {
+  color-scheme: normal;
+
+  --docs-overlay-color: hsl(240 3.8% 46.1% / 33%);
+  --docs-shadow-x-small: 0 1px 2px hsl(240 3.8% 46.1% / 12%);
+  --docs-shadow-small: 0 1px 2px hsl(240 3.8% 46.1% / 24%);
+  --docs-shadow-medium: 0 2px 4px hsl(240 3.8% 46.1% / 24%);
+  --docs-shadow-large: 0 2px 8px hsl(240 3.8% 46.1% / 24%);
+  --docs-shadow-x-large: 0 4px 16px hsl(240 3.8% 46.1% / 24%);
+}
+
+/* Dark theme */
+.zn-theme-dark {
+  color-scheme: dark;
+
+  --docs-overlay-color: hsl(0 0% 0% / 66%);
+  --docs-shadow-x-small: 0 1px 2px rgb(0 0 0 / 36%);
+  --docs-shadow-small: 0 1px 2px rgb(0 0 0 / 48%);
+  --docs-shadow-medium: 0 2px 4px rgb(0 0 0 / 48%);
+  --docs-shadow-large: 0 2px 8px rgb(0 0 0 / 48%);
+  --docs-shadow-x-large: 0 4px 16px rgb(0 0 0 / 48%);
+}
+
+
+/* Reset Margins on Typography */
+
+h1, h2, h3, h4, h5, h6, p {
+  margin: 1rem 0 !important;
+}
+
+/* Utils */
+html[t=dark] .only-light,
+html:not([t=dark]) .only-dark {
+  display: none !important;
+}
+
+.visually-hidden:not(:focus-within) {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  clip: rect(0 0 0 0) !important;
+  clip-path: inset(50%) !important;
+  border: none !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+}
+
+.nowrap {
+  white-space: nowrap;
+}
+
+@media screen and (max-width: 900px) {
+  :root {
+    --docs-content-padding: 1rem;
+  }
+}
+
+/* Bare styles */
+*,
+*:before,
+*:after {
+  box-sizing: inherit;
+}
+
+a:focus,
+button:focus {
+  outline: none;
+}
+
+a:focus-visible,
+button:focus-visible {
+  outline: var(--zn-focus-ring);
+  outline-offset: var(--zn-focus-ring-offset);
+}
+
+::selection {
+  background-color: var(--zn-color-primary-200);
+  color: var(--zn-color-neutral-900);
+}
+
+
+html {
+  height: 100%;
+  box-sizing: border-box;
+  line-height: var(--zn-line-height-normal);
+  padding: 0;
+  margin: 0;
+}
+
+body {
+  height: 100%;
+  font: 16px var(--zn-font-family-sans);
+  font-weight: 400;
+  background-color: rgb(var(--docs-background-color));
+  line-height: var(--zn-line-height-normal);
+  color: rgb(var(--zn-text));
+  padding: 0;
+  margin: 0;
+  overflow-x: hidden;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+}
+
+/* Common elements */
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: var(--zn-font-family-sans);
+  font-weight: 400;
+  margin: 3rem 0 1.5rem 0;
+}
+
+h1:first-of-type {
+  margin-top: 1rem;
+}
+
+h1 {
+  font-size: 2.5rem;
+}
+
+h2 {
+  font-size: 1.875rem;
+  border-bottom: solid var(--docs-border-width) var(--docs-border-color);
+}
+
+h3 {
+  font-size: 1.625rem;
+}
+
+h4 {
+  font-size: 1.375rem;
+}
+
+h5 {
+  font-size: 1.125rem;
+}
+
+h6 {
+  font-size: 0.875rem;
+}
+
+p {
+  margin-block-end: 1.5em;
+}
+
+img {
+  max-width: 100%;
+}
+
+.badges img {
+  border-radius: var(--zn-border-radius-medium);
+}
+
+.callout img,
+details img {
+  width: 100%;
+  margin-left: 0;
+  margin-right: 0;
+}
+
+details pre {
+  border: solid var(--docs-border-width) var(--docs-border-color);
+}
+
+a {
+  color: var(--zn-primary);
+}
+
+
+abbr[title] {
+  text-decoration: none;
+  border-bottom: dashed 1px var(--zn-primary);
+  cursor: help;
+}
+
+em {
+  font-style: italic;
+}
+
+strong {
+  font-weight: var(--zn-font-weight-bold);
+}
+
+code {
+  font-family: var(--zn-font-family-mono);
+  font-size: 0.9125em;
+  background-color: rgba(0 0 0 / 0.025);
+  background-blend-mode: darken;
+  border-radius: var(--docs-border-radius);
+  padding: 0.125em 0.25em;
+}
+
+
+kbd {
+  background: var(--zn-color-neutral-100);
+  border: solid 1px var(--zn-color-neutral-200);
+  box-shadow: inset 0 1px 0 0 var(--zn-color-neutral-0),
+  inset 0 -1px 0 0 var(--zn-color-neutral-200);
+  font-family: var(--zn-font-mono);
+  font-size: 0.9125em;
+  border-radius: var(--docs-border-radius);
+  color: var(--zn-color-neutral-800);
+  padding: 0.125em 0.4em;
+}
+
+ins {
+  background-color: var(--zn-color-green-200);
+  color: var(--zn-color-green-900);
+  border-radius: var(--docs-border-radius);
+  text-decoration: none;
+  padding: 0.125em 0.25em;
+}
+
+s {
+  background-color: var(--zn-color-red-200);
+  color: var(--zn-color-red-900);
+  border-radius: var(--docs-border-radius);
+  text-decoration: none;
+  padding: 0.125em 0.25em;
+}
+
+mark {
+  background-color: var(--zn-color-yellow-200);
+  border-radius: var(--docs-border-radius);
+  padding: 0.125em 0.25em;
+}
+
+hr {
+  border: none;
+  border-bottom: solid var(--docs-border-width) var(--docs-border-color);
+  margin: calc(var(--docs-content-vertical-spacing) * 2) 0;
+}
+
+/* Block quotes */
+blockquote {
+  position: relative;
+  font-family: var(--zn-font-serif);
+  font-size: 1.33rem;
+  font-style: italic;
+  color: var(--zn-color-neutral-700);
+  background-color: var(--zn-color-neutral-100);
+  border-radius: var(--docs-border-radius);
+  border-left: solid 6px var(--zn-color-neutral-300);
+  padding: 1.5rem;
+  margin: 0 0 1.5rem 0;
+}
+
+blockquote > :first-child {
+  margin-top: 0;
+}
+
+blockquote > :last-child {
+  margin-bottom: 0;
+}
+
+/* Lists */
+ul,
+ol {
+  padding: 0;
+  margin: 0 0 var(--docs-content-vertical-spacing) 2rem;
+}
+
+ul {
+  list-style: disc;
+}
+
+li {
+  padding: 0;
+  margin: 0 0 0.25rem 0;
+}
+
+li ul,
+li ol {
+  margin-top: 0.25rem;
+}
+
+ul ul:last-child,
+ul ol:last-child,
+ol ul:last-child,
+ol ol:last-child {
+  margin-bottom: 0;
+}
+
+/* Anchor headings */
+.anchor-heading {
+  position: relative;
+  color: inherit;
+  text-decoration: none;
+}
+
+.anchor-heading a {
+  text-decoration: none;
+  color: inherit;
+}
+
+.anchor-heading a::after {
+  content: '#';
+  color: var(--zn-color-primary-700);
+  margin-inline: 0.5rem;
+  opacity: 0;
+  transition: 100ms opacity;
+}
+
+.anchor-heading:hover a::after,
+.anchor-heading:focus-within a::after {
+  opacity: 1;
+}
+
+/* External links */
+.external-link__icon {
+  width: 0.75em;
+  height: 0.75em;
+  vertical-align: 0;
+  margin-left: 0.25em;
+  margin-right: 0.125em;
+}
+
+/* Tables */
+table {
+  max-width: 100%;
+  border: none;
+  border-collapse: collapse;
+  color: inherit;
+  margin-bottom: var(--docs-content-vertical-spacing);
+}
+
+table tr {
+  border-bottom: solid var(--docs-border-width) var(--docs-border-color);
+}
+
+table th {
+  font-weight: var(--zn-font-weight-semibold);
+  text-align: left;
+}
+
+table td,
+table th {
+  line-height: var(--zn-line-height-normal);
+  padding: 1rem 1rem;
+}
+
+table th p:first-child,
+table td p:first-child {
+  margin-top: 0;
+}
+
+table th p:last-child,
+table td p:last-child {
+  margin-bottom: 0;
+}
+
+.table-scroll {
+  max-width: 100%;
+  overflow-x: auto;
+}
+
+.table-scroll code {
+  white-space: nowrap;
+}
+
+th.table-name,
+th.table-event-detail {
+  min-width: 15ch;
+}
+
+th.table-description {
+  min-width: 50ch !important;
+  max-width: 70ch;
+}
+
+/* Code blocks */
+pre {
+  position: relative;
+  background-color: rgb(var(--zn-body));
+  font-family: var(--zn-font-family-mono);
+  color: var(--zn-color-neutral-900);
+  border-radius: var(--docs-border-radius);
+  padding: 1rem;
+  white-space: pre;
+}
+
+pre:not(:last-child) {
+  margin-bottom: 1.5rem;
+}
+
+pre > code {
+  display: block;
+  background: none !important;
+  border-radius: 0;
+  hyphens: none;
+  tab-size: 2;
+  white-space: pre;
+  padding: 1rem;
+  margin: -1rem;
+  overflow: auto;
+}
+
+pre .token.comment {
+  color: var(--zn-color-neutral-600);
+}
+
+pre .token.prolog,
+pre .token.doctype,
+pre .token.cdata,
+pre .token.operator,
+pre .token.punctuation {
+  color: var(--zn-color-neutral-700);
+}
+
+.namespace {
+  opacity: 0.7;
+}
+
+pre .token.property,
+pre .token.keyword,
+pre .token.tag,
+pre .token.url {
+  color: var(--zn-color-blue-700);
+}
+
+pre .token.symbol,
+pre .token.deleted {
+  color: var(--zn-color-red-700);
+}
+
+pre .token.boolean,
+pre .token.constant,
+pre .token.selector,
+pre .token.attr-name,
+pre .token.string,
+pre .token.char,
+pre .token.builtin,
+pre .token.inserted {
+  color: var(--zn-color-emerald-700);
+}
+
+pre .token.atrule,
+pre .token.attr-value,
+pre .token.number,
+pre .token.variable {
+  color: var(--zn-color-violet-700);
+}
+
+pre .token.function,
+pre .token.class-name,
+pre .token.regex {
+  color: var(--zn-color-orange-700);
+}
+
+pre .token.important {
+  color: var(--zn-color-red-700);
+}
+
+pre .token.important,
+pre .token.bold {
+  font-weight: bold;
+}
+
+pre .token.italic {
+  font-style: italic;
+}
+
+/* Copy code button */
+.copy-code-button {
+  position: absolute;
+  top: 0;
+  right: 0;
+  white-space: normal;
+  color: var(--zn-color-neutral-800);
+  transition: 150ms opacity,
+  150ms scale;
+}
+
+.copy-code-button::part(button) {
+  background-color: var(--zn-color-neutral-50);
+  border-radius: 0 var(--docs-border-radius) 0 var(--docs-border-radius);
+  padding: 0.75rem;
+}
+
+.copy-code-button::part(button):hover {
+  background-color: color-mix(in oklch, var(--zn-color-neutral-50), var(--zn-color-neutral-1000) 3%);
+}
+
+.copy-code-button::part(button):active {
+  background-color: color-mix(in oklch, var(--zn-color-neutral-50), var(--zn-color-neutral-1000) 6%);
+}
+
+pre .copy-code-button {
+  opacity: 0;
+  scale: 0.75;
+}
+
+pre:hover .copy-code-button,
+.copy-code-button:focus-within {
+  opacity: 1;
+  scale: 1;
+}
+
+/* Callouts */
+.callout {
+  position: relative;
+  background-color: var(--zn-color-neutral-100);
+  border-left: solid 4px var(--zn-color-neutral-500);
+  border-radius: var(--docs-border-radius);
+  color: var(--zn-color-neutral-800);
+  padding: 1.5rem 1.5rem 1.5rem 2rem;
+  margin-bottom: var(--docs-content-vertical-spacing);
+}
+
+.callout > :first-child {
+  margin-top: 0;
+}
+
+.callout > :last-child {
+  margin-bottom: 0;
+}
+
+.callout--tip {
+  background-color: var(--zn-color-primary-100);
+  border-left-color: var(--zn-color-primary-600);
+  color: var(--zn-color-primary-800);
+}
+
+.callout::before {
+  content: '';
+  position: absolute;
+  top: calc(50% - 0.8rem);
+  left: calc(-0.8rem - 2px);
+  width: 1.6rem;
+  height: 1.6rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: var(--zn-font-serif);
+  font-weight: var(--zn-font-weight-bold);
+  color: var(--zn-color-neutral-0);
+  clip-path: circle(50% at 50% 50%);
+}
+
+.callout--tip::before {
+  content: 'i';
+  font-style: italic;
+  background-color: var(--zn-color-primary-600);
+}
+
+.callout--warning {
+  background-color: rgba(var(--zn-color-warning), .2);
+  border-left-color: rgb(var(--zn-color-warning));
+  color: rgb(var(--zn-color-warning));
+}
+
+.callout--warning::before {
+  content: '!';
+  background-color: rgb(var(--zn-color-warning));
+}
+
+.callout--danger {
+  background-color: var(--zn-color-danger-100);
+  border-left-color: var(--zn-color-danger-600);
+  color: var(--zn-color-danger-800);
+}
+
+.callout--danger::before {
+  content: '‼';
+  background-color: var(--zn-color-danger-600);
+}
+
+.callout + .callout {
+  margin-top: calc(-0.5 * var(--docs-content-vertical-spacing));
+}
+
+.callout a {
+  color: inherit;
+}
+
+/* Aside */
+.content aside {
+  float: right;
+  min-width: 300px;
+  max-width: 50%;
+  background: var(--zn-color-neutral-100);
+  border-radius: var(--docs-border-radius);
+  padding: 1rem;
+  margin-left: 1rem;
+}
+
+.content aside > :first-child {
+  margin-top: 0;
+}
+
+.content aside > :last-child {
+  margin-bottom: 0;
+}
+
+@media screen and (max-width: 600px) {
+  .content aside {
+    float: none;
+    width: calc(100% + (var(--docs-content-padding) * 2));
+    max-width: none;
+    margin: var(--docs-content-vertical-spacing) calc(-1 * var(--docs-content-padding));
+  }
+}
+
+/* Details */
+.content details {
+  background-color: var(--zn-color-neutral-100);
+  border-radius: var(--docs-border-radius);
+  padding: 1rem;
+  margin: 0 0 var(--docs-content-vertical-spacing) 0;
+}
+
+.content details summary {
+  font-weight: var(--zn-font-weight-semibold);
+  border-radius: var(--docs-border-radius);
+  padding: 1rem;
+  margin: -1rem;
+  cursor: pointer;
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+.content details summary span {
+  padding-left: 0.5rem;
+}
+
+.content details[open] summary {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  margin-bottom: 1rem;
+}
+
+.content details[open] summary:focus-visible {
+  border-radius: var(--docs-border-radius);
+}
+
+.content details > :last-child {
+  margin-bottom: 0;
+}
+
+.content details > :nth-child(2) {
+  margin-top: 0;
+}
+
+.content details + details {
+  margin-top: calc(-1 * var(--docs-content-vertical-spacing) + (2 * var(--docs-border-width)));
+}
+
+/* Sidebar */
+#sidebar {
+  position: fixed;
+  flex: 0;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  z-index: 20;
+  width: var(--docs-sidebar-width);
+  background-color: var(--docs-sidebar-color);
+  border-right: solid var(--docs-border-width) var(--docs-border-color);
+  border-radius: 0;
+  padding: 2rem;
+  margin: 0;
+  overflow: auto;
+  scrollbar-width: thin;
+  transition: var(--docs-sidebar-transition-speed) translate ease-in-out;
+}
+
+#sidebar::-webkit-scrollbar {
+  width: 4px;
+}
+
+#sidebar::-webkit-scrollbar-thumb {
+  background: transparent;
+  border-radius: 9999px;
+}
+
+#sidebar:hover::-webkit-scrollbar-thumb {
+  background: var(--zn-color-neutral-400);
+}
+
+#sidebar:hover::-webkit-scrollbar-track {
+  background: var(--zn-color-neutral-100);
+}
+
+#sidebar > header {
+  margin-bottom: 1.5rem;
+}
+
+#sidebar > header h1 {
+  margin: 0;
+}
+
+#sidebar > header a {
+  display: block;
+}
+
+#sidebar nav a {
+  text-decoration: none;
+}
+
+#sidebar nav h2 {
+  font-size: var(--zn-font-size-medium);
+  font-weight: var(--zn-font-weight-semibold);
+  border-bottom: solid var(--docs-border-width) var(--docs-border-color);
+  margin: 1.5rem 0 0.5rem 0 !important;
+}
+
+#sidebar nav h3 {
+  font-size: var(--zn-font-size-medium);
+  font-weight: var(--zn-font-weight-semibold);
+  border-bottom: solid var(--docs-border-width) var(--docs-border-color);
+}
+
+#sidebar ul {
+  padding: 0;
+  margin: 1rem 0;
+}
+
+#sidebar ul ul {
+  margin-left: 1rem;
+}
+
+#sidebar ul li {
+  list-style: none;
+  padding: 0;
+  margin: .5rem 0;
+}
+
+#sidebar ul ul ul {
+  margin-left: 1.25rem;
+}
+
+#sidebar ul li a {
+  line-height: 1.33;
+  color: inherit;
+  display: inline-block;
+  padding: 0;
+}
+
+#sidebar ul li a:not(.active-link):hover {
+  color: var(--zn-color-primary-700);
+}
+
+#sidebar nav .active-link {
+  color: var(--zn-color-primary-700);
+  border-bottom: dashed 1px var(--zn-color-primary-700);
+}
+
+#sidebar > header img {
+  display: block;
+  width: 100%;
+  height: auto;
+  margin: 0 auto;
+}
+
+@media screen and (max-width: 900px) {
+  #sidebar {
+    translate: -100%;
+  }
+
+  .sidebar-open #sidebar {
+    translate: 0;
+  }
+}
+
+.sidebar-version {
+  font-size: var(--zn-font-size-x-small);
+  color: var(--zn-color-neutral-500);
+  text-align: right;
+  margin-top: -0.5rem;
+  margin-right: 1rem;
+  margin-bottom: -0.5rem;
+}
+
+.sidebar-buttons {
+  display: flex;
+  justify-content: space-between;
+}
+
+/* Main content */
+main {
+  position: relative;
+  padding: var(--docs-content-vertical-spacing) var(--docs-content-padding) calc(var(--docs-content-vertical-spacing) * 2) var(--docs-content-padding);
+  margin-left: var(--docs-sidebar-width);
+}
+
+.sidebar-open .content {
+  margin-left: 0;
+}
+
+.content__body > :last-child {
+  margin-bottom: 0;
+}
+
+.content__body > pre {
+  background-color: rgb(var(--zn-panel));
+}
+
+@media screen and (max-width: 900px) {
+  main {
+    margin-left: 0;
+  }
+}
+
+/* Component layouts */
+.content {
+  display: grid;
+  grid-template-columns: 100%;
+  gap: 2rem;
+  position: relative;
+  max-width: var(--docs-content-max-width);
+  margin: 0 auto;
+}
+
+.content--with-toc {
+  /* There's a 2rem gap, so we need to remove it from the column */
+  grid-template-columns: calc(75% - 2rem) min(25%, var(--docs-content-toc-max-width));
+  max-width: calc(var(--docs-content-max-width) + var(--docs-content-toc-max-width));
+}
+
+.content--full-width {
+  --docs-content-max-width: min(100%, var(--zn-container-3k));
+}
+
+.content__body {
+  order: 1;
+  width: 100%;
+}
+
+.content:not(.content--with-toc) .content__toc {
+  display: none;
+}
+
+.content__toc {
+  order: 2;
+  display: flex;
+  flex-direction: column;
+  margin-top: 0;
+}
+
+.content__toc ul {
+  position: sticky;
+  top: 5rem;
+  max-height: calc(100vh - 6rem);
+  font-size: var(--zn-font-size-small);
+  line-height: 1.33;
+  border-left: solid 1px var(--zn-color-neutral-200);
+  list-style: none;
+  padding: 1rem 0;
+  margin: 0;
+  padding-left: 1rem;
+  overflow-y: auto;
+}
+
+.content__toc li {
+  padding: 0 0 0 0.5rem;
+  margin: 0;
+}
+
+.content__toc li[data-level='3'] {
+  margin-left: 1rem;
+}
+
+/* We don't use them, but just in case */
+.content__toc li[data-level='4'],
+.content__toc li[data-level='5'],
+.content__toc li[data-level='6'] {
+  margin-left: 2rem;
+}
+
+.content__toc li:not(:last-of-type) {
+  margin-bottom: 0.6rem;
+}
+
+.content__toc a {
+  color: var(--zn-color-neutral-700);
+  text-decoration: none;
+}
+
+.content__toc a:hover {
+  color: var(--zn-color-primary-700);
+}
+
+.content__toc a.active {
+  color: var(--zn-color-primary-700);
+  border-bottom: dashed 1px var(--zn-color-primary-700);
+}
+
+.content__toc .top a {
+  font-weight: var(--zn-font-weight-semibold);
+  color: var(--zn-color-neutral-500);
+}
+
+@media screen and (max-width: 1024px) {
+  .content {
+    grid-template-columns: 100%;
+    gap: 0;
+  }
+
+  .content__toc {
+    position: relative;
+    order: 1;
+  }
+
+  .content__toc ul {
+    display: flex;
+    justify-content: start;
+    gap: 1rem 1.5rem;
+    position: static;
+    border: none;
+    border-bottom: solid 1px var(--zn-color-neutral-200);
+    border-radius: 0;
+    padding: 1rem 1.5rem 1rem 0.5rem; /* extra right padding to hide the fade effect */
+    margin-top: 1rem;
+    overflow-x: auto;
+  }
+
+  .content__toc ul::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    bottom: 1rem; /* don't cover the scrollbar */
+    right: 0;
+    width: 2rem;
+    background: linear-gradient(90deg, rgba(0 0 0 / 0) 0%, var(--zn-color-neutral-0) 100%);
+  }
+
+  .content__toc li {
+    white-space: nowrap;
+  }
+
+  .content__toc li:not(:last-of-type) {
+    margin-bottom: 0;
+  }
+
+  .content__toc [data-level]:not([data-level='2']) {
+    display: none;
+  }
+
+  .content__body {
+    order: 2;
+  }
+}
+
+/* Menu toggle */
+#menu-toggle {
+  display: none;
+  position: fixed;
+  z-index: 30;
+  top: 0.25rem;
+  left: 0.25rem;
+  height: auto;
+  width: auto;
+  color: black;
+  border: none;
+  border-radius: 50%;
+  background: var(--zn-color-neutral-0);
+  padding: 0.5rem;
+  margin: 0;
+  cursor: pointer;
+  transition: 250ms scale ease,
+  250ms rotate ease;
+}
+
+@media screen and (max-width: 900px) {
+  #menu-toggle {
+    display: flex;
+  }
+}
+
+#menu-toggle:hover {
+  scale: 1.1;
+}
+
+#menu-toggle svg {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
+html.sidebar-open #menu-toggle {
+  rotate: 180deg;
+}
+
+/* Skip to main content */
+#skip-to-main {
+  position: fixed;
+  top: 0.25rem;
+  left: calc(50% - var(--docs-skip-to-main-width) / 2);
+  z-index: 100;
+  width: var(--docs-skip-to-main-width);
+  text-align: center;
+  text-decoration: none;
+  border-radius: 9999px;
+  background: var(--zn-color-neutral-0);
+  color: var(--zn-color-neutral-1000);
+  padding: 0.5rem;
+}
+
+/* Icon toolbar */
+#icon-toolbar {
+  display: flex;
+  position: fixed;
+  top: 0;
+  right: 1rem;
+  z-index: 10;
+  background: var(--zn-color-neutral-800);
+  border-bottom-left-radius: var(--docs-border-radius);
+  border-bottom-right-radius: var(--docs-border-radius);
+  padding: 0.125rem 0.25rem;
+}
+
+#icon-toolbar button,
+#icon-toolbar a {
+  flex: 0 0 auto;
+  display: inline-flex;
+  align-items: center;
+  width: auto;
+  height: auto;
+  background: transparent;
+  border: none;
+  border-radius: var(--docs-border-radius);
+  font-size: 1.25rem;
+  color: var(--zn-color-neutral-0);
+  text-decoration: none;
+  padding: 0.5rem;
+  margin: 0;
+  cursor: pointer;
+}
+
+#theme-selector zn-menu {
+  /* Set an initial size to prevent width being too small when first opening on small screen width */
+  width: 140px;
+}
+
+#theme-selector zn-button {
+  transition: 250ms scale ease;
+}
+
+#theme-selector zn-button::part(base) {
+  color: var(--zn-color-neutral-0);
+}
+
+#theme-selector zn-button::part(label) {
+  display: flex;
+  padding: 0.5rem;
+}
+
+#theme-selector zn-icon {
+  font-size: 1.25rem;
+}
+
+#icon-toolbar a:not(:last-child),
+#icon-toolbar button:not(:last-child) {
+  margin-right: 0.25rem;
+}
+
+@media screen and (max-width: 900px) {
+  #icon-toolbar {
+    right: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  #icon-toolbar button,
+  #icon-toolbar a {
+    font-size: 1rem;
+    padding: 0.5rem;
+  }
+
+  #theme-selector zn-icon {
+    font-size: 1rem;
+  }
+}
+
+/* Sidebar addons */
+
+#sidebar-addons:not(:empty) {
+  margin-bottom: var(--docs-content-vertical-spacing);
+}
+
+/* Component headers */
+
+.component-header h1 {
+  margin-bottom: 0;
+}
+
+.component-header__tag {
+  margin-top: -0.5rem;
+  margin-bottom: 0.5rem;
+}
+
+.component-header__tag code {
+  background: none;
+  color: var(--zn-color-neutral-600);
+  font-size: var(--zn-font-size-large);
+  padding: 0;
+  margin: 0;
+}
+
+.component-header__info {
+  margin-bottom: var(--zn-spacing-x-large);
+}
+
+.component-summary {
+  font-size: var(--zn-font-size-large);
+  line-height: 1.6;
+  margin: 2rem 0;
+}
+
+/* Repo buttons */
+
+.sidebar-buttons {
+  display: flex;
+  gap: 0.125rem;
+  justify-content: space-between;
+}
+
+.sidebar-buttons .repo-button {
+  flex: 1 1 auto;
+}
+
+.repo-button--github zn-icon {
+  color: var(--zn-color-neutral-700);
+}
+
+.repo-button--star zn-icon {
+  color: var(--zn-color-yellow-500);
+}
+
+.repo-button--twitter zn-icon {
+  color: var(--zn-color-sky-500);
+}
+
+@media screen and (max-width: 400px) {
+  :not(.sidebar-buttons) > .repo-button {
+    width: 100%;
+    margin-bottom: 1rem;
+  }
+}
+
+body[data-page^='/tokens/'] .table-wrapper td:first-child,
+body[data-page^='/tokens/'] .table-wrapper td:first-child code {
+  white-space: nowrap;
+}
+
+/** Container Demo */
+zn-container::part(base) {
+  background-color: var(--zn-color-primary-50);
+}