@import "../../src/tokens/tokens--color";

article {
  /* overflow: hidden; */
}

.nk-logo__svg {
  /* width: 100px;
  height: 100px; */
}

.nk-doc-bg {
  background: var(--color--k-8);
}

.nk-theme--dark .nk-doc-bg {
  background: var(--color--k-2);
}

.nk-doc-border {
  border: 1px dashed var(--color--k-5);
  min-height: 1em;
}

.nk-bg--image {
  background-image: url(../assets/img/randomMatches_142.jpg);
  background-size: cover;
}

.nk-doc--gototop {
  position: sticky;
  top: 80px;
  z-index: 2;
}

.nk-doc--code {
  height: 0;
  transition: 0.2s;
  opacity: 0;
  transform: translateY(-200px);
}

.nk-doc--code.show {
  height: inherit;
  transform: translateY(0);
  opacity: 1;
}

.nk-doc--code-class {
  padding: var(--x-small) var(--small);
  background: var(--color--k-9);
}

.nk-doc--height {
  min-height: calc(var(--x-huge) * 2);
}

.nk-doc-container {
  position: relative;
}

.nk-doc-container::before {
  content: "";
  position: absolute;
  top: -1rem;
  left: var(--x-large);
  width: 1px;
  height: 120%;
  background: var(--color--m);
}

.nk-doc-container::after {
  content: "";
  position: absolute;
  top: -1rem;
  right: var(--x-large);
  width: 1px;
  height: 120%;
  background: var(--color--m);
}

.nk-doc-section {
  position: relative;
}

.nk-doc-section::before {
  content: "";
  position: absolute;
  top: var(--x-large);
  width: 100%;
  height: 1px;
  background: var(--color--m);
}

.nk-doc-section::after {
  content: "";
  position: absolute;
  bottom: var(--x-large);
  width: 100%;
  height: 1px;
  background: var(--color--m);
}