@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --foreground-rgb: 0, 0, 0;
  --background-start-rgb: 214, 219, 220;
  --background-end-rgb: 255, 255, 255;
}

@media (prefers-color-scheme: dark) {
  :root {
    --foreground-rgb: 255, 255, 255;
    --background-start-rgb: 0, 0, 0;
    --background-end-rgb: 0, 0, 0;
  }
}

.conf-hero {
  background: linear-gradient(
      360deg,
      #0e031c 10.63%,
      #0e031c 10.65%,
      rgba(14, 3, 28, 0) 166.98%
    ),
    url('/img/conf/graphql-conf-bg.png');
  @apply text-white max-md:text-base;
}

.with-arrow:after {
  @apply content-['_→'] font-sans text-xl;
  @apply transition-all duration-75 hover:ml-1;
}

footer {
  @apply !bg-transparent;
}

.nextra-logo {
  mask-image: linear-gradient(
    60deg,
    black 25%,
    rgba(0, 0, 0, 0.2) 50%,
    black 75%
  );
  mask-size: 400%;
  mask-position: 0;

  &:hover {
    mask-position: 100%;
    transition: mask-position 1s ease, -webkit-mask-position 1s ease;
  }
}

div[role='menu'][data-headlessui-state] {
  @apply left-0 right-auto;
}

div[id^='headlessui-menu-items'] {
  @apply rounded-none;

  > a {
    @apply py-3.5;
  }
}

/* should be fixed in Nextra 4 */
._max-w-\[90rem\] {
  @apply container;
}

.nextra-nav-container + ._max-w-\[90rem\] {
  @apply px-0;
}

.nextra-nav-container > nav {
  @apply gap-6;
}

/*
 * The API versions are real top-level route folders so Nextra can build their sidebars.
 * Hide the version folders from non-API sidebars; keep both visible inside either API
 * reference so users can switch versions even when a folder is collapsed.
 */
.site-route:not(.api-docs-route)
  .nextra-sidebar-container
  li:has(> button[data-href='/api-v16']),
.site-route:not(.api-docs-route)
  .nextra-sidebar-container
  li:has(> button[data-href='/api-v17']) {
  display: none;
}

.api-category-toc {
  margin: 1.25rem 0 2rem;
  font-size: 0.925rem;
  line-height: 1.8;
  hyphens: none;
  overflow-wrap: normal;
  text-align: center !important;
  word-break: normal;
}

.api-category-toc p {
  margin: 0.45rem 0;
  hyphens: none;
  overflow-wrap: normal;
  text-align: center !important;
  word-break: normal;
}

.api-category-toc a {
  display: inline-block;
  hyphens: none;
  overflow-wrap: normal;
  text-decoration: underline;
  text-underline-offset: 0.15em;
  word-break: keep-all;
}

.api-item-divider {
  margin: 2rem 0;
  border: 0;
  border-top: 1px solid rgb(156 163 175);
}

.api-subsection-divider {
  margin: 1rem 0 0.65rem;
  border: 0;
  border-top: 1px solid rgb(209 213 219);
}

.api-subsection-title {
  margin-bottom: 0.55rem;
  font-size: 0.8125rem;
  font-weight: 650;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: rgb(75 85 99);
}

.api-tag {
  align-items: center;
  background: #fffbeb;
  border: 1px solid #fbbf24;
  border-radius: 999px;
  color: #92400e;
  display: inline-flex;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.2;
  margin-left: 0.35rem;
  padding: 0.12rem 0.42rem;
  vertical-align: 0.08rem;
  white-space: nowrap;
}

.api-docs-route table {
  border-collapse: collapse;
  display: table;
  margin: 1rem 0;
  width: 100%;
}

.api-docs-route th,
.api-docs-route td {
  border: 1px solid rgb(209 213 219);
  padding: 0.55rem 0.75rem;
  text-align: left;
  vertical-align: middle;
}

.api-docs-route th {
  background: #f6f8fa;
  color: #24292e;
  font-weight: 650;
}

.api-docs-route table .api-type {
  padding: 0.55rem 0.75rem;
  width: 100%;
}

.api-docs-route .api-type::before,
.api-docs-route .api-type::after,
.api-docs-route .api-signature code::before,
.api-docs-route .api-signature code::after {
  content: none;
}

/* Move nav links to the left */
.nextra-nav-container nav {
  @apply justify-start;

  > a {
    @apply hover:!text-primary;
  }

  button[id^='headlessui-menu-button'] {
    @apply hover:text-primary;

    + div > a {
      @apply hover:text-primary;
    }
  }

  .nextra-search {
    @apply ml-auto;

    + * {
      @apply max-md:ml-auto;
    }
  }
}

/*._max-w-\[90rem\] {*/
/*  !* TODO: maybe add to nextra as option to configure width? *!*/
/*  @apply container;*/
/*}*/

.miniGraphiQL {
  @apply !shadow-none border-2 dark:border-neutral-900 dark:!bg-neutral-900/10 !rounded-md dark:brightness-200;
}

.result-window {
  @apply !shadow-none border-l-2 dark:border-neutral-900 !rounded-none;
}

.variable-editor {
  @apply before:!bg-transparent border-t-2 dark:border-neutral-900;
}

.CodeMirror-selected {
  @apply !bg-primary/50 dark:bg-primary/40;
}

.CodeMirror-cursor {
  @apply dark:border-white;
}

.CodeMirror {
  @apply p-2;
}

::selection {
  @apply bg-primary/50 dark:bg-primary;
}

.api-signature {
  background: #f6f8fa;
  border-radius: 0.375rem;
  color: #24292e;
  font-size: 0.875rem;
  line-height: 1.7;
  margin: 1rem 0;
  overflow-x: auto;
  overflow-wrap: normal;
  padding: 0.75rem 1rem;
  tab-size: 2;
  white-space: pre-wrap;
  word-break: normal;
}

pre.api-signature > code:not([class*='twoslash-']) {
  display: block !important;
  white-space: inherit;
}

pre.api-signature > code:not([class*='twoslash-']) > span,
pre.api-signature > code:not([class*='twoslash-']) a {
  display: inline !important;
  padding: 0 !important;
}

.api-signature :where(a:hover),
.api-type :where(a:hover) {
  text-decoration: underline;
}

.api-signature-name {
  color: #6f42c1;
}

.api-signature-keyword {
  color: #d73a49;
}

.api-signature-type {
  color: #005cc5;
  text-decoration: none;
}

.api-signature-parameter,
.api-signature-property {
  color: #e36209;
}

.api-signature-literal {
  color: #032f62;
}

.api-type {
  background: #f6f8fa;
  border-radius: 0.375rem;
  color: #24292e;
  display: block;
  font-size: 0.875em;
  line-height: 1.7;
  max-width: 100%;
  overflow-x: auto;
  padding: 0.15rem 0.35rem;
  white-space: pre-wrap;
}

html[class~='dark'] .api-signature {
  background: #111827;
  color: #e1e4e8;
}

html[class~='dark'] .api-type {
  background: #111827;
  color: #e1e4e8;
}

html[class~='dark'] .api-tag {
  background: #422006;
  border-color: #a16207;
  color: #fde68a;
}

html[class~='dark'] .api-docs-route th,
html[class~='dark'] .api-docs-route td {
  border-color: rgb(75 85 99);
}

html[class~='dark'] .api-docs-route th {
  background: #111827;
  color: #e1e4e8;
}

html[class~='dark'] .api-signature-type {
  color: #79b8ff;
}

html[class~='dark'] .api-signature-name {
  color: #b392f0;
}

html[class~='dark'] .api-signature-keyword {
  color: #f97583;
}

html[class~='dark'] .api-signature-parameter,
html[class~='dark'] .api-signature-property {
  color: #ffa657;
}

html[class~='dark'] .api-signature-literal {
  color: #a5d6ff;
}

@media (prefers-color-scheme: dark) {
  body {
    /*background: linear-gradient(*/
    /*    125deg,*/
    /*    rgba(234, 117, 195, 0.3) -10%,*/
    /*    rgba(234, 117, 195, 0) 8%*/
    /*  ),*/
    /*  linear-gradient(*/
    /*    -125deg,*/
    /*    rgba(234, 117, 195, 0.3) -10%,*/
    /*    rgba(234, 117, 195, 0) 8%*/
    /*  ),*/
    /*  linear-gradient(0deg, #05031c, #05031c);*/
    /*@apply bg-gradient-to-b from-primary/10 to-[#05031c]*/

    /*background:*/
    /*        !*linear-gradient(0deg, #05031c, #05031c),*!*/
    /*  linear-gradient(*/
    /*    125.93deg,*/
    /*    rgba(234, 117, 195, 0.7) -10.45%,*/
    /*    rgba(234, 117, 195, 0) 28.49%*/
    /*  ),*/
    /*  linear-gradient(*/
    /*    -125.93deg,*/
    /*    rgba(234, 117, 195, 0.7) -33.25%,*/
    /*    rgba(234, 117, 195, 0) 26.45%*/
    /*  );*/
  }
}

.donts-images ul {
  gap: 0 3em;
  @apply flex flex-wrap;

  li {
    @apply flex gap-3 grow md:basis-1/3;

    div {
      @apply grow;
    }

    img {
      @apply bg-gray-200 p-4 h-20;
    }
  }
}

.dos > ul:first-child li:before {
  background: url('/img/brand/do.svg');
}

.donts > ul:first-child li:before {
  background: url('/img/brand/dont.svg');
}

.dos,
.donts {
  @apply mt-6;

  > ul ul {
    @apply mt-0;

    li:before {
      @apply grayscale;
    }
  }

  & > ul:first-child li {
    @apply list-none relative;

    &:before {
      @apply size-4 absolute content-[''] top-1 -left-6;
    }
  }
}

.code-page {
  background: linear-gradient(
      303.75deg,
      rgba(124, 124, 124, 0.2) 0.8%,
      rgba(124, 124, 124, 0) 74.17%
    ),
    linear-gradient(0deg, #f8f8f8, #f8f8f8);
}

.dark .code-page {
  background: linear-gradient(
      303.75deg,
      rgba(124, 124, 124, 0.2) 0.8%,
      rgba(124, 124, 124, 0) 74.17%
    ),
    linear-gradient(0deg, #1b1b1b, #1b1b1b);
}

.dark .blog-page {
  background: linear-gradient(
      250.93deg,
      rgba(115, 119, 125, 0.1),
      rgba(115, 119, 125, 0)
    ),
    #18181b;
}

.blog-page {
  background: linear-gradient(
      231.79deg,
      rgba(225, 0, 152, 0.4) -23.67%,
      rgba(225, 0, 152, 0) 25.9%
    ),
    linear-gradient(
      113.65deg,
      rgba(229, 53, 171, 0.4) -49.55%,
      rgba(225, 0, 152, 0) 33.97%
    ),
    linear-gradient(180deg, #f3f4f6 0%, #fff 100%);
}

.conf-heading {
  @apply text-3xl lg:text-[50px]/[4rem] font-bold text-balance;
}

.conf-block {
  @apply py-14 lg:py-24;
}

.tag {
  @apply hover:text-white hover:border-transparent hover:bg-primary;
  @apply text-sm border border-current rounded px-2.5 py-1 font-bold transition-colors;
}

.index {
  p {
    @apply text-lg lg:text-xl/9 mb-5 max-w-2xl;
  }

  h2 {
    @apply text-3xl lg:text-5xl font-bold mb-10 text-balance;
  }

  pre {
    @apply bg-white;
  }
}

.add,
.remove {
  @apply shadow-[2px_0_currentColor_inset];
}

.add {
  @apply !bg-green-200 dark:!bg-green-200/50 text-green-300;

  &::before {
    @apply absolute start-1.5 content-['+'];
  }
}

.remove {
  @apply !bg-red-200 dark:!bg-red-200/50 text-red-300;

  &::before {
    @apply absolute start-1.5 content-['-'];
  }
}

.step0,
.step6 {
  .v2 {
    @apply opacity-0;
  }
}

.step1 .v2 code > span:nth-child(5) {
  @apply add;
}

.step2 .v3 code > span:nth-child(6) {
  @apply add;
}

.step3 .v4 code > {
  span:nth-child(7),
  span:nth-last-child(-n + 5) {
    @apply add;
  }
}

.step4 {
  .v4 code > span:nth-child(6) {
    @apply remove;
  }

  .v5 code > span:nth-child(6) {
    @apply add;
  }
}

.index-button {
  @apply border border-current rounded-md transition-colors py-2.5 px-6;

  &:hover,
  &:focus {
    @apply bg-primary border-transparent text-white;
  }
}

.nextra-codeblocks {
  div.nextra-code {
    pre {
      @apply h-full;
    }

    &:not(:first-child) {
      @apply mt-0;

      > div {
        @apply first:rounded-l-none;
      }

      pre {
        @apply rounded-l-none;
      }
    }

    &:not(:last-child) {
      > div {
        @apply first:rounded-r-none;
      }

      pre {
        @apply rounded-r-none;
      }
    }
  }
}

.index-bg {
  background: linear-gradient(
      303.75deg,
      rgba(124, 124, 124, 0.2) 0.8%,
      rgba(124, 124, 124, 0) 74.17%
    ),
    linear-gradient(0deg, #f8f8f8, #f8f8f8);

  .dark & {
    background: linear-gradient(0deg, #111, #111),
      linear-gradient(
        303.75deg,
        rgba(124, 124, 124, 0.2) 0.8%,
        rgba(124, 124, 124, 0) 74.17%
      );
  }
}

.index-gradient {
  @apply bg-gradient-to-b from-transparent to-primary/5 dark:to-primary/10;
}

.type-evolution {
  @apply w-full overflow-hidden;

  #typeEvolveView {
    @apply select-none h-full relative left-0 flex;

    .v1,
    .v2,
    .v3,
    .v4 {
      @apply border-r dark:border-neutral-800 w-1/2 shrink-0;
    }

    .v5 {
      @apply w-full shrink-0;
    }

    &.step1 {
      .v2 {
        opacity: 1;
        transition: opacity 0.5s ease-in-out;
      }
    }

    &.step2 {
      left: calc(-1 * 50%);
      transition: left 0.5s ease-in-out;
    }

    &.step3 {
      left: calc(-2 * 50%);
      transition: left 0.5s ease-in-out;
    }

    &.step4 {
      left: calc(-3 * 50%);
      transition: left 0.5s ease-in-out;
    }

    &.step5 {
      left: calc(-4 * 50%);
      transition: left 0.5s ease-in-out;
    }

    &.step6 {
      .v5 {
        left: calc(-4 * 50%);
        opacity: 0;
        transition: opacity 0.5s ease-in-out;
      }
    }
  }
}

.apiIndex {
  @apply mt-6;
}

.apiIndex li {
  margin: 0 0 5px 0;
}

.apiIndex li a {
  color: inherit;
  display: block;
  position: relative;
  text-decoration: none;
}

.apiIndex li a:hover::before {
  @apply text-primary;
  content: '#';
  font-size: 16px;
  left: -2em;
  line-height: 20px;
  position: absolute;
}

.apiIndex li {
  @apply bg-white dark:bg-black;
  @apply [box-shadow:inset_0_0_0_1px_#ddd,inset_4px_0_0_#ddd];
  @apply dark:[box-shadow:inset_0_0_0_1px_#444,inset_4px_0_0_#444];
  font-size: 13px;
  padding: 7px 14px;
}