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

body.modal-open {
  overflow: hidden;
}

.wrapper {
  display: grid;
  grid-template-columns:
    1fr
    min(75ch, 100%)
    1fr;
}

.blog-container {
  width: min(65ch, 100%);
}

.wrapper > * {
  grid-column: 2;
}

::selection {
  background-color: #47a3f3;
  color: #fefefe;
}

/* styles.css */
:root {
  --sh-class: #0d9488;
  --sh-identifier: #2252d9;
  --sh-sign: #334155;
  --sh-property: #0d9488;
  --sh-entity: #0885c7;
  --sh-jsxliterals: #6266d1;
  --sh-string: #00a99a;
  --sh-keyword: #7e3ced;
  --sh-comment: #64758b;
}

html {
  min-width: 360px;
}

@keyframes marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

.animate-marquee {
  animation: marquee linear infinite;
  animation-play-state: paused;
}

/* This addresses the issue of the iframe being too close to the bottom of the article pages or other elements */
iframe {
  margin-bottom: 2rem;
}

.drama-shadow {
  @apply relative shadow-md ring-1 ring-indigo-500/15;
}

.drama-shadow::after {
  @apply pointer-events-none absolute inset-0 rounded-[inherit] shadow-[inset_0_0_2px_1px_#ffffff4d];
  content: "";
}

pre {
  @apply drama-shadow mb-12 rounded-xl;
}

.code-frame {
  @apply flex h-9 items-center justify-between overflow-scroll rounded-t-xl border-b border-[#E2E3E5] bg-white px-4;
}

.code-frame-content {
  @apply flex w-full items-center justify-start space-x-3;
}

.code-frame-filename {
  @apply max-w-[50%] truncate font-mono text-sm text-slate-400;
}

.code-container {
  @apply overflow-scroll rounded-b-xl bg-white p-6;
}

.frame-controls {
  @apply flex h-full items-center justify-start space-x-1.5;
}

.frame-control {
  @apply h-[10px] w-[10px] rounded-full bg-[#E2E3E5];
}

pre code {
  @apply py-0.5 leading-7;
  counter-reset: sh-line-number;
  letter-spacing: 0.1em;
  font-size: 15px;
}

code:not(pre code) {
  /* @apply bg-indigo-100 rounded-md px-1.5 py-0.5 whitespace-nowrap font-mono; */
  /* --sh-class: #4f46e5;
  --sh-identifier: #4f46e5;
  --sh-sign: #4f46e5;
  --sh-property: #4f46e5;
  --sh-entity: #4f46e5;
  --sh-jsxliterals: #4f46e5;
  --sh-string: #4f46e5;
  --sh-keyword: #4f46e5;
  --sh-comment: #4f46e5; */

  font-size: 15px;
  font-variant-ligatures: none;

  --sh-class: #0f172a;
  --sh-identifier: #0f172a;
  --sh-sign: #0f172a;
  --sh-property: #0f172a;
  --sh-entity: #0f172a;
  --sh-jsxliterals: #0f172a;
  --sh-string: #0f172a;
  --sh-keyword: #0f172a;
  --sh-comment: #0f172a;
}

code:not(pre code)::before,
code:not(pre code)::after {
  content: "`";
}

pre code .sh__line::before {
  counter-increment: sh-line-number 1;
  content: counter(sh-line-number);
  margin-right: 24px;
  text-align: right;
  color: #cccccc;
  font-size: 14px;
}

.prose code span {
  @apply font-medium;
}

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

.prose h2,
h3,
h4 {
  @apply font-medium tracking-tighter !important;
}

.prose strong {
  @apply font-medium;
}

.prose > :first-child {
  /* Override removing top margin, causing layout shift */
  margin-top: 1.25em !important;
  margin-bottom: 1.25em !important;
}

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;
}

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

table {
  display: block;
  max-width: fit-content;
  overflow-x: auto;
  white-space: nowrap;
}

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

.title {
  text-wrap: balance;
}

blockquote p {
  margin: 0 !important;
}
