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

@font-face {
  font-family: "Zodiak";
  src:
    url("/fonts/zodiak/Zodiak-Thin.woff2") format("woff2"),
    url("/fonts/zodiak/Zodiak-Thin.woff") format("woff"),
    url("/fonts/zodiak/Zodiak-Thin.ttf") format("truetype");
  font-weight: 100;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: "Zodiak-Italic";
  src:
    url("/fonts/zodiak/Zodiak-ThinItalic.woff2") format("woff2"),
    url("/fonts/zodiak/Zodiak-ThinItalic.woff") format("woff"),
    url("/fonts/zodiak/Zodiak-ThinItalic.ttf") format("truetype");
  font-weight: 100;
  font-display: swap;
  font-style: italic;
}
@font-face {
  font-family: "Zodiak";
  src:
    url("/fonts/zodiak/Zodiak-Light.woff2") format("woff2"),
    url("/fonts/zodiak/Zodiak-Light.woff") format("woff"),
    url("/fonts/zodiak/Zodiak-Light.ttf") format("truetype");
  font-weight: 300;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: "Zodiak-Italic";
  src:
    url("/fonts/zodiak/Zodiak-LightItalic.woff2") format("woff2"),
    url("/fonts/zodiak/Zodiak-LightItalic.woff") format("woff"),
    url("/fonts/zodiak/Zodiak-LightItalic.ttf") format("truetype");
  font-weight: 300;
  font-display: swap;
  font-style: italic;
}
@font-face {
  font-family: "Zodiak";
  src:
    url("/fonts/zodiak/Zodiak-Regular.woff2") format("woff2"),
    url("/fonts/zodiak/Zodiak-Regular.woff") format("woff"),
    url("/fonts/zodiak/Zodiak-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: "Zodiak-Italic";
  src:
    url("/fonts/zodiak/Zodiak-Italic.woff2") format("woff2"),
    url("/fonts/zodiak/Zodiak-Italic.woff") format("woff"),
    url("/fonts/zodiak/Zodiak-Italic.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
  font-style: italic;
}
@font-face {
  font-family: "Zodiak";
  src:
    url("/fonts/zodiak/Zodiak-Bold.woff2") format("woff2"),
    url("/fonts/zodiak/Zodiak-Bold.woff") format("woff"),
    url("/fonts/zodiak/Zodiak-Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: "Zodiak-Italic";
  src:
    url("/fonts/zodiak/Zodiak-BoldItalic.woff2") format("woff2"),
    url("/fonts/zodiak/Zodiak-BoldItalic.woff") format("woff"),
    url("/fonts/zodiak/Zodiak-BoldItalic.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
  font-style: italic;
}
@font-face {
  font-family: "Zodiak";
  src:
    url("/fonts/zodiak/Zodiak-Extrabold.woff2") format("woff2"),
    url("/fonts/zodiak/Zodiak-Extrabold.woff") format("woff"),
    url("/fonts/zodiak/Zodiak-Extrabold.ttf") format("truetype");
  font-weight: 800;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: "Zodiak-Italic";
  src:
    url("/fonts/zodiak/Zodiak-ExtraboldItalic.woff2") format("woff2"),
    url("/fonts/zodiak/Zodiak-ExtraboldItalic.woff") format("woff"),
    url("/fonts/zodiak/Zodiak-ExtraboldItalic.ttf") format("truetype");
  font-weight: 800;
  font-display: swap;
  font-style: italic;
}
@font-face {
  font-family: "Zodiak";
  src:
    url("/fonts/zodiak/Zodiak-Black.woff2") format("woff2"),
    url("/fonts/zodiak/Zodiak-Black.woff") format("woff"),
    url("/fonts/zodiak/Zodiak-Black.ttf") format("truetype");
  font-weight: 900;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: "Zodiak-Italic";
  src:
    url("/fonts/zodiak/Zodiak-BlackItalic.woff2") format("woff2"),
    url("/fonts/zodiak/Zodiak-BlackItalic.woff") format("woff"),
    url("/fonts/zodiak/Zodiak-BlackItalic.ttf") format("truetype");
  font-weight: 900;
  font-display: swap;
  font-style: italic;
}

:root {
  --background: #ffffff;
  --foreground: #171717;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #00050c;
    --foreground: #ededed;
  }
}

body {
  color: var(--foreground);
  background: #00050c;

  font-family: var(--font-ibm-plex-mono), monospace;
  line-height: 22px;
  font-size: 14px;
  margin: 0;
  padding: 0;
  letter-spacing: -0.38px;
  tab-size: 4;
  scrollbar-gutter: stable;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  max-width: 100dvw;
  overflow-x: hidden;
}

a:hover {
  text-decoration: underline;
}

h1 {
  font-size: 2rem;
  font-weight: bold;
}

h2 {
  font-size: 1.5rem;
  font-weight: bold;
}

h3 {
  font-size: 1.25rem;
  font-weight: bold;
}

p {
  margin-top: 0;
  margin-bottom: 1rem;
}

.marquee-container {
  overflow-x: hidden !important;
  display: flex !important;
  flex-direction: row !important;
  position: relative;
  width: 100%;
}

.marquee-container:hover div {
  animation-play-state: var(--pause-on-hover);
}
.marquee-container:active div {
  animation-play-state: var(--pause-on-click);
}

.marquee {
  flex: 0 0 auto;
  min-width: 100%;
  z-index: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  animation: scroll var(--duration) linear var(--delay) var(--iteration-count);
  animation-play-state: var(--play);
  animation-delay: var(--delay);
  animation-direction: var(--direction);
}
@keyframes scroll {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-100%);
  }
}

.stickers-coming {
  /* run the scaleIn anim */
  animation: scaleIn 2.5s ease-in-out;
  animation-fill-mode: forwards;
}

@keyframes scaleIn {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  50% {
    opacity: 0.95;
    transform: scale(5);
  }
  100% {
    transform: scale(0);
    opacity: 0;
  }
}

@keyframes new-spin {
  to {
    transform: rotate(360deg);
  }
}
.animate-new-spin {
  animation: new-spin 0.4s linear infinite;
}

@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.fadein {
  animation: fadein 0.15s ease-in-out;
}

@keyframes slideinfrombottom {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0%);
  }
}

.slideinfrombottom {
  animation: slideinfrombottom 0.12s ease-in-out;
}

.dategradientbg {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(244, 245, 246, 1) 20%,
    rgba(244, 245, 246, 1) 100%
  );
}

@media (prefers-color-scheme: dark) {
  .dategradientbg {
    background: linear-gradient(
      90deg,
      rgba(0, 0, 0, 0) 0%,
      rgba(10, 16, 24, 1) 20%,
      rgba(10, 16, 24, 1) 100%
    );
  }
}

.tiptap {
  min-height: 100dvh;
}

.ProseMirror {
  .is-empty::before {
    @apply text-neutral-500 dark:text-neutral-400;
  }

  & > *:first-child,
  [data-type="column"] > * {
    @apply first:mt-0 last:mb-0;
  }

  & > * + * {
    margin-top: 0.75em;
  }

  blockquote {
    @apply my-8 border-l-4 border-blue-400 pl-4 font-mono text-slate-700 dark:border-blue-600 dark:text-slate-200;
  }

  blockquote > p {
    @apply m-0 !tracking-tighter;
  }

  .node-imageUpload {
    @apply rounded border-2 border-dotted border-black border-opacity-10 p-2 dark:border-neutral-500;
    transition: border 160ms cubic-bezier(0.45, 0.05, 0.55, 0.95);

    &:hover {
      @apply border-opacity-30;
    }

    &:has(.is-active),
    &.has-focus {
      @apply border-opacity-40;
    }
  }

  [data-type="columns"] {
    &.has-focus [data-type="column"],
    &:hover [data-type="column"] {
      @apply border-neutral-300 dark:border-neutral-700;
    }

    [data-type="column"].has-focus {
      @apply border-neutral-400 dark:border-neutral-600;
    }
  }

  [data-type="column"] {
    @apply rounded border-2 border-dotted border-transparent p-1;
    transition: border 160ms cubic-bezier(0.45, 0.05, 0.55, 0.95);

    &:hover {
      @apply border-neutral-100 dark:border-neutral-900;
    }

    &:has(.is-active),
    &.has-focus {
      @apply border-neutral-100 dark:border-neutral-900;
    }
  }

  .node-imageBlock {
    & img {
      @apply overflow-hidden rounded-xl border-2 border-transparent;
    }

    &:hover img {
      @apply border-2 border-neutral-100 dark:border-neutral-900;
    }

    &:has(.is-active) img,
    &.has-focus img {
      @apply border-2 border-neutral-800 dark:border-neutral-200;
    }
  }

  .node-aiWriter,
  .node-aiImage,
  .node-tableOfContentsNode {
    &.has-focus [data-node-view-wrapper] > * {
      @apply rounded-lg shadow-[0_0_0_2px] shadow-black/30 transition-all dark:shadow-white/30;
    }
  }

  .ProseMirror-gapcursor + .node-imageBlock,
  .ProseMirror-gapcursor + .node-imageUpload,
  .ProseMirror-gapcursor + [data-type="blockquoteFigure"] {
    @apply outline-neutral-700 hover:outline-neutral-600 dark:outline-neutral-300 dark:hover:outline-neutral-400;
  }

  [data-type="blockquoteFigure"] > div {
    @apply rounded-lg rounded-bl-none rounded-tl-none border-l-4 border-l-neutral-700 bg-opacity-80 px-4 py-2;
    @apply dark:border-l-neutral-300;
  }

  [data-type="blockquoteFigure"] > blockquote {
    @apply text-lg text-black;
    @apply dark:text-white;
  }

  [data-type="blockquoteFigure"] figcaption {
    @apply mt-4 overflow-hidden text-sm text-neutral-500 transition-all;
    @apply dark:text-neutral-400;
  }
}
.spinner-animation {
  animation: spinner 1.6s linear infinite;
  animation-delay: -1.6s;
}

.spinner-animation-secondary {
  animation-delay: -1s;
}

@keyframes spinner {
  12.5% {
    x: 13px;
    y: 1px;
  }
  25% {
    x: 13px;
    y: 1px;
  }
  37.5% {
    x: 13px;
    y: 13px;
  }
  50% {
    x: 13px;
    y: 13px;
  }
  62.5% {
    x: 1px;
    y: 13px;
  }
  75% {
    x: 1px;
    y: 13px;
  }
  87.5% {
    x: 1px;
    y: 1px;
  }
}
.ProseMirror {
  /* Image Block */
  figure[data-type="imageBlock"] {
    @apply m-0;

    img {
      @apply block w-full rounded;
    }
  }

  /* Block Quote */
  figure[data-type="blockquoteFigure"] {
    @apply my-14 text-black dark:text-white;
  }

  & > blockquote,
  [data-type="blockquoteFigure"] {
    blockquote {
      @apply m-0;

      & > * {
        @apply first:mt-0 last:mb-0;
      }
    }
  }

  /* Columns */
  [data-type="columns"] {
    @apply mb-12 mt-14 grid gap-4;

    &.layout-sidebar-left {
      grid-template-columns: 40fr 60fr;
    }

    &.layout-sidebar-right {
      grid-template-columns: 60fr 40fr;
    }

    &.layout-two-column {
      grid-template-columns: 1fr 1fr;
    }
  }

  [data-type="column"] {
    @apply overflow-auto;
  }
}
.ProseMirror {
  code {
    @apply rounded-sm bg-neutral-200 px-1 font-mono text-black caret-black dark:bg-neutral-900 dark:text-white dark:caret-white;

    &::selection {
      @apply bg-white/30;
    }
  }

  pre {
    @apply my-2 rounded-lg border border-black bg-neutral-700 px-[12px] py-[8px] text-white caret-white dark:border-neutral-800 dark:bg-neutral-900;

    *::selection {
      @apply bg-white/20;
    }

    code {
      @apply bg-inherit p-0 font-mono text-inherit shadow-none;

      white-space: pre-wrap;
      word-break: break-all;
      word-wrap: break-word;
    }

    .hljs-comment,
    .hljs-quote {
      @apply text-neutral-400;
    }

    .hljs-variable,
    .hljs-template-variable,
    .hljs-attribute,
    .hljs-tag,
    .hljs-name,
    .hljs-regexp,
    .hljs-link,
    .hljs-name,
    .hljs-selector-id,
    .hljs-selector-class {
      @apply text-red-300;
    }

    .hljs-number,
    .hljs-meta,
    .hljs-built_in,
    .hljs-builtin-name,
    .hljs-literal,
    .hljs-type,
    .hljs-params {
      @apply text-orange-300;
    }

    .hljs-string,
    .hljs-symbol,
    .hljs-bullet {
      @apply text-lime-300;
    }

    .hljs-title,
    .hljs-section {
      @apply text-yellow-300;
    }

    .hljs-keyword,
    .hljs-selector-tag {
      @apply text-teal-300;
    }

    .hljs-emphasis {
      font-style: italic;
    }

    .hljs-strong {
      font-weight: 700;
    }
  }
}
.ProseMirror {
  .collaboration-cursor {
    &__caret {
      @apply pointer-events-none relative -ml-[1px] -mr-[1px] break-normal border-l border-r border-black;
    }

    &__label {
      @apply absolute -left-[1px] -top-[1.4em] select-none whitespace-nowrap rounded rounded-tl-none px-1.5 py-0.5 text-xs font-semibold leading-none text-black;
    }
  }
}
.ProseMirror {
  .collaboration-cursor {
    &__caret {
      @apply pointer-events-none relative -ml-[1px] -mr-[1px] break-normal border-l border-r border-black;
    }

    &__label {
      @apply absolute -left-[1px] -top-[1.4em] select-none whitespace-nowrap rounded rounded-tl-none px-1.5 py-0.5 text-xs font-semibold leading-none text-black;
    }
  }
}
.ProseMirror {
  /* Placeholder Styles */
  .is-empty::before {
    @apply pointer-events-none float-left h-0 w-full text-black/40 dark:text-white/40;
  }

  &.ProseMirror-focused {
    outline: none !important;

    /* Slashmenu Placeholder */
    > p.has-focus.is-empty::before {
      content: "Type  /  to browse options";
    }

    > [data-type="columns"]
      > [data-type="column"]
      > p.is-empty.has-focus::before {
      content: "Type  /  to browse options";
    }
  }

  /* Default Placeholder */
  & > .is-editor-empty:first-child:last-child::before {
    content: "Click here to start writing …";
  }

  /* Blockquote Placeholder */
  blockquote .is-empty:not(.is-editor-empty):first-child:last-child::before {
    content: "Enter a quote";
  }

  blockquote + figcaption.is-empty:not(.is-editor-empty)::before {
    content: "Author";
  }

  [data-placeholder][data-suggestion]::before,
  [data-placeholder][data-suggestion] *::before {
    content: none !important;
  }
}
.ProseMirror {
  .tableWrapper {
    @apply my-12;
  }

  table {
    @apply box-border w-full border-collapse rounded border-black/10;
    @apply dark:border-white/20;

    td,
    th {
      @apply relative min-w-[100px] border border-black/10 p-2 text-left align-top;
      @apply dark:border-white/20;

      &:first-of-type:not(a) {
        @apply mt-0;
      }

      p {
        @apply m-0;

        & + p {
          @apply mt-3;
        }
      }
    }

    th {
      @apply font-bold;
    }

    .column-resize-handle {
      @apply pointer-events-none absolute -bottom-[2px] -right-1 top-0 flex w-2;

      &::before {
        @apply ml-2 h-full w-[1px] bg-black/20;
        @apply dark:bg-white/20;
        content: "";
      }
    }

    .selectedCell {
      @apply border-double border-black/20 bg-black/5;
      @apply dark:border-white/20 dark:bg-white/10;
    }

    .grip-column,
    .grip-row {
      @apply absolute z-10 flex cursor-pointer items-center justify-center bg-black/5;
      @apply dark:bg-white/10;
    }

    .grip-column {
      @apply -top-3 left-0 -ml-[1px] h-3 w-[calc(100%+1px)] border-l border-black/20;
      @apply dark:border-white/20;

      &:hover,
      &.selected {
        &::before {
          content: "";
          @apply w-2.5;
        }
      }

      &:hover {
        @apply bg-black/10;
        @apply dark:bg-white/20;

        &::before {
          @apply border-b-2 border-dotted border-black/60;
          @apply dark:border-white/60;
        }
      }

      &.first {
        @apply rounded-tl-sm border-transparent;
      }

      &.last {
        @apply rounded-tr-sm;
      }

      &.selected {
        @apply border-black/30 bg-black/30 shadow-sm;
        @apply dark:border-white/30 dark:bg-white/30;

        &::before {
          @apply border-b-2 border-dotted;
        }
      }
    }

    .grip-row {
      @apply -left-3 top-0 -mt-[1px] h-[calc(100%+1px)] w-3 border-t border-black/20;
      @apply dark:border-white/20;

      &:hover,
      &.selected {
        &::before {
          @apply h-2.5;
          content: "";
        }
      }
      &:hover {
        @apply bg-black/10;
        @apply dark:bg-white/20;

        &::before {
          @apply border-l-2 border-dotted border-black/60;
          @apply dark:border-white/60;
        }
      }

      &.first {
        @apply rounded-tl-sm border-transparent;
      }

      &.last {
        @apply rounded-bl-sm;
      }

      &.selected {
        @apply border-black/30 bg-black/30 shadow-sm;
        @apply dark:border-white/30 dark:bg-white/30;

        &::before {
          @apply border-l-2 border-dotted;
        }
      }
    }
  }
}
.ProseMirror {
  p {
    @apply my-4 py-0 tracking-normal first:mt-0 last:mb-0;
  }

  & > p {
    @apply my-4 first:mt-0 last:mb-0;
  }

  h1 {
    @apply text-3xl;
  }

  h2 {
    @apply text-2xl;
  }

  h3 {
    @apply text-xl;
  }

  h4 {
    @apply text-lg;
  }

  h5 {
    @apply text-base;
  }

  h6 {
    @apply text-sm;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    @apply font-serif font-semibold tracking-wide first:mt-0 last:mb-0;
  }

  h1,
  h2,
  h3 {
    @apply mt-6;
  }

  h4,
  h5,
  h6 {
    @apply mt-4;
  }

  a.link {
    @apply font-extrabold text-blue-500 dark:text-blue-400;
  }

  mark {
    @apply rounded-sm bg-red-500 decoration-clone px-0 py-1 text-inherit dark:bg-red-400;
  }

  & img {
    @apply h-auto w-full max-w-full;
  }

  [data-type="horizontalRule"] {
    @apply my-8 cursor-pointer py-4 transition-all duration-100 ease-in-out;

    &.ProseMirror-selectednode {
      @apply bg-black/5 dark:bg-white/10;

      hr {
        @apply border-t-black/30 dark:border-t-white/30;
      }
    }

    &:hover:not(&.ProseMirror-selectednode) {
      @apply bg-black/5;
      @apply dark:bg-white/10;
    }

    hr {
      @apply border-0 border-t border-slate-300/20 bg-slate-300/80;
      @apply dark:border-slate-800/20 dark:bg-slate-800/80;
    }
  }
}

.ProseMirror {
  ol {
    @apply list-decimal;
  }

  ul {
    @apply list-disc;
  }

  ul,
  ol {
    @apply my-6 px-8 py-0 first:mt-0 last:mb-0;

    ul,
    ol,
    li {
      @apply my-1;
    }

    p {
      @apply mb-1 mt-0;
    }
  }

  & > ul,
  & > ol {
    @apply my-8 first:mt-0 last:mb-0;
  }

  ul[data-type="taskList"] {
    @apply list-none p-0;

    p {
      @apply m-0;
    }

    li {
      @apply flex;

      > label {
        @apply mr-2 mt-1 flex-auto shrink-0 grow-0 select-none;
      }

      > div {
        @apply flex-auto;
      }

      &[data-checked="true"] {
        @apply line-through;
      }
    }
  }

  input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    background-color: transparent;
    margin: 0;

    font: inherit;
    color: currentColor;
    width: 1.15em;
    height: 1.15em;
    border: 0.15em solid currentColor;
    border-radius: 0.15em;
    transform: translateY(-0.075em);

    display: grid;
    place-content: center;
  }

  input[type="checkbox"]::before {
    content: "";
    width: 0.65em;
    height: 0.65em;
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
    transform: scale(0);
    transform-origin: bottom left;
    transition: 120ms transform ease-in-out;
    box-shadow: inset 1em 1em var(--form-control-color);

    @apply dark:bg-black-200 bg-black;
  }

  input[type="checkbox"]:checked::before {
    transform: scale(1);
  }

  input[type="checkbox"]:focus {
    outline: max(2px, 0.15em) solid currentColor;
    outline-offset: max(2px, 0.15em);
  }

  input[type="checkbox"]:disabled {
    --form-control-color: var(--form-control-disabled);

    color: var(--form-control-disabled);
    cursor: default;
  }
}

.ProseMirror.compiled {
  div[data-type="column"] {
    @apply !border-0;
  }

  div[data-type="horizontalRule"] {
    @apply !cursor-default !bg-transparent;
  }
}

.bottom-mobile-nav {
  height: 63px;
  padding-bottom: 5px;
}

.mobile-nav-menu {
  height: calc(100dvh - 63px);
  bottom: 63px;
}

@media (display-mode: standalone) {
  .bottom-mobile-nav {
    height: 83px !important;
    padding-bottom: 28px !important;
  }

  .mobile-nav-menu {
    height: calc(100dvh - 83px);
    bottom: 83px;
  }
}

.hiddenscrollbar {
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;

  &::-webkit-scrollbar {
    display: none;
  }

  &::-webkit-scrollbar-track {
    background: transparent;
  }

  &::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 8px;
    border: 4px solid transparent;
    background-clip: content-box;
  }
}

.ghost {
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    @apply py-1;
  }

  ol {
    @apply list-decimal space-y-1 py-2 pl-6;
  }

  ul {
    @apply list-disc space-y-1 py-2 pl-6;
  }

  p {
    @apply my-4 min-h-2;
  }

  a {
    @apply font-bold hover:underline;
  }
}
