@tailwind base;

body {
  @apply bg-neutral-100 text-neutral-900 dark:bg-black dark:text-white;
}

#__next {
  @apply h-full;
}

@tailwind components;
@tailwind utilities;

@layer base {
  .old-input [type="text"]:not(#article-title),
  .old-input [type="email"],
  .old-input [type="url"],
  .old-input [type="password"],
  .old-input [type="number"],
  .old-input [type="date"],
  .old-input [type="datetime-local"],
  .old-input [type="month"],
  .old-input [type="tel"],
  .old-input [type="time"],
  .old-input [type="week"],
  .old-input [multiple],
  .old-input textarea:not(#article-content),
  .old-input select {
    @apply mt-1 block w-full border px-2 py-2 text-black shadow-sm ring-offset-1 focus:border-pink-500 focus:outline-none focus:ring-2 focus:ring-neutral-300 disabled:opacity-50 dark:border-white dark:bg-black dark:text-white sm:text-sm;
  }

  .old-input a {
    @apply focus-style;
  }

  .old-input label {
    @apply block text-sm font-medium text-neutral-900 dark:text-white;
  }
}

.nav-button {
  @apply focus-style rounded-md px-2 py-2 text-neutral-900 hover:bg-neutral-200 hover:text-black focus:text-neutral-900 dark:text-neutral-300 dark:hover:bg-neutral-900 dark:hover:text-white dark:focus:text-white;
}

.focus-style {
  @apply rounded-md focus:outline-none focus:ring-white focus-visible:ring-2 focus-visible:ring-pink-600 focus-visible:ring-offset-pink-600;
}

.primary-button {
  @apply inline-flex justify-center rounded-md bg-gradient-to-r from-orange-400 to-pink-600 px-4 py-2 font-medium text-white shadow-sm hover:from-orange-300 hover:to-pink-500 focus:outline-none focus:ring-2 focus:ring-pink-600 focus:ring-offset-2 focus-visible:ring-2 focus-visible:ring-pink-600 focus-visible:ring-offset-white disabled:border-neutral-300 disabled:from-neutral-500 disabled:to-neutral-700 disabled:text-neutral-300 disabled:hover:text-neutral-300;
}

.secondary-button {
  @apply inline-flex items-center justify-center rounded-md border border-neutral-300 bg-white bg-gradient-to-r px-4 py-2 font-medium text-neutral-800 shadow-sm hover:bg-neutral-200 focus:outline-none focus:ring-2 focus:ring-pink-600 focus:ring-offset-2 dark:border-neutral-600 dark:bg-neutral-900 dark:text-white dark:hover:bg-neutral-800;
}

.dropdown-button {
  @apply inline-flex items-center justify-center border border-neutral-300 bg-white bg-gradient-to-r px-4 py-2 font-medium text-neutral-800 shadow-sm hover:bg-neutral-200 focus:outline-none focus:ring-2 focus:ring-offset-2 dark:border-neutral-600 dark:bg-neutral-900 dark:text-white dark:hover:bg-neutral-800;
}

.dropdown-item {
  @apply rounded-none bg-white bg-gradient-to-r font-medium text-neutral-800 shadow-sm hover:bg-neutral-200 focus:outline-none focus:ring-2 focus:ring-offset-2 dark:border-neutral-600 dark:bg-neutral-900 dark:text-white dark:hover:bg-neutral-800;
}

.dropdown-bg {
  @apply bg-white bg-gradient-to-r text-neutral-800 dark:bg-neutral-900 dark:text-white;
}

.prose {
  @apply prose-neutral dark:prose-invert lg:prose-lg;

  margin-top: 1.5rem;
}

.prose .anchor {
  @apply invisible absolute no-underline;

  margin-left: -1em;
  padding-right: 0.5em;
  width: 80%;
  max-width: 700px;
  cursor: pointer;
}

.anchor:hover {
  @apply visible;
}

.prose a {
  @apply transition-all;
}
.prose blockquote p::before {
  content: none;
}

.prose .anchor:after {
  @apply text-neutral-300 dark:text-neutral-700;
  content: "#";
}

.prose *:hover > .anchor {
  @apply visible;
}

.prose pre {
  @apply border-2 border-neutral-200 bg-neutral-100 dark:border-neutral-700 dark:bg-black;
}

.prose code {
  @apply rounded-lg border border-neutral-100 bg-neutral-100 px-1 py-0.5 font-mono text-neutral-800 dark:border-neutral-800 dark:bg-black dark:text-neutral-200;
}

.prose code:after {
  content: none;
}

.prose code:before {
  content: none;
}

.prose pre code {
  @apply p-0 text-neutral-800 dark:text-neutral-200;
  border: initial;
}

.prose img {
  /* Don't apply styles to next/image */
  @apply m-0;
}

/* Placeholder (at the top) */
.tiptap .is-empty::before {
  content: attr(data-placeholder);
  float: left;
  color: #ced4da;
  pointer-events: none;
  height: 0;
}

.ProseMirror {
  min-height: 500px;
}

.ProseMirror iframe {
  margin-inline: auto;
}

/* Hide the default list markers */
.ProseMirror ul,
.ProseMirror ol {
  list-style-type: none;
}

/* Create custom markers using pseudo-elements */
.ProseMirror li p::before {
  content: "•"; /* You can use other characters or even images */
  margin-right: 10px;
}

/* For ordered lists */
.ProseMirror ol li p::before {
  counter-increment: my-awesome-counter;
  content: counter(my-awesome-counter) ".";
  margin-right: 10px;
}

/* Initialize the counter for ordered lists */
.ProseMirror ol {
  counter-reset: my-awesome-counter;
}

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
  @apply text-neutral-700 dark:text-neutral-300;
}

.token.punctuation {
  @apply text-neutral-700 dark:text-neutral-300;
}

.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol,
.token.deleted {
  @apply text-green-500;
}

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
  @apply text-purple-500;
}

.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
  @apply text-yellow-500;
}

.token.atrule,
.token.attr-value,
.token.keyword {
  @apply text-blue-500;
}

.token.function,
.token.class-name {
  @apply text-pink-500;
}

.token.regex,
.token.important,
.token.variable {
  @apply text-yellow-500;
}

code[class*="language-"],
pre[class*="language-"] {
  @apply text-neutral-800 dark:text-neutral-50;
}

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

pre {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}

/* Remove Safari input shadow on mobile */
input[type="text"],
input[type="email"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.metric-card > a {
  @apply no-underline;
}

.metric-card > p {
  @apply my-2;
}

.step > h3 {
  @apply my-0;
}

.prose .tweet a {
  text-decoration: inherit;
  font-weight: inherit;
}

.prose .callout > p {
  margin: 0 !important;
}

/* Fix custom table layout */

table div {
  display: flex;
  flex-direction: column;
  background: blue;
  width: 100%;
}

/* Loading animation */
.loader-dots div {
  animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
.loader-dots div:nth-child(1) {
  left: 8px;
  animation: loader-dots1 0.6s infinite;
}
.loader-dots div:nth-child(2) {
  left: 8px;
  animation: loader-dots2 0.6s infinite;
}
.loader-dots div:nth-child(3) {
  left: 32px;
  animation: loader-dots2 0.6s infinite;
}
.loader-dots div:nth-child(4) {
  left: 56px;
  animation: loader-dots3 0.6s infinite;
}

/* end of plate editor styles  */

@keyframes loader-dots1 {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes loader-dots3 {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}
@keyframes loader-dots2 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(24px, 0);
  }
}
