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

@layer base {
  /* Design System Theming */
  html {
    --color-default: 255 255 255;
    --color-neutral: 29 40 58;
    --color-primary: 112 64 255;
    --color-secondary: 58 191 248;
    --color-accent: 244 113 181;
    --color-warning: 244 193 82;
    --color-error: 251 111 132;
    --color-success: 43 212 189;
    --color-info: 12 166 233;
    --color-foreground: 15 23 42;
    --color-background: 236 228 236;

    @apply bg-default text-slate-900;
  }

  html.dark {
    --color-default: 0 0 0;
    --color-neutral: 29 40 58;
    --color-primary: 112 64 255;
    --color-secondary: 58 191 248;
    --color-accent: 244 113 181;
    --color-warning: 244 193 82;
    --color-error: 251 111 132;
    --color-success: 43 212 189;
    --color-info: 12 166 233;
    --color-foreground: 232 221 255;
    --color-background: 0 0 0;

    @apply bg-default text-slate-100;
  }

  /* Typewriter */
  .cursor::after {
    display: block;
    content: "";
    position: absolute;
    width: 4px;
    height: 100%;
    background-color: #fff;
    animation: cursor 0.6s linear infinite alternate;
    will-change: opacity;
  }

  @keyframes cursor {
    0%,
    40% {
      opacity: 1;
    }

    60%,
    100% {
      opacity: 0;
    }
  }

  /* Base stylings */
  *:focus:not(:focus-visible) {
    outline: none;
  }

  a:hover,
  a:focus {
    text-decoration: underline;
  }

  a:focus {
    outline: 2px solid currentColor;
    outline-offset: 0.25em;
  }

  button:focus {
    outline: 2px solid currentColor;
    outline-offset: 0.25em;
  }

  article > section :is(ul, ol) > * + * {
    margin-top: 0.75rem;
  }

  article > section li > :is(p, pre, blockquote):not(:first-child) {
    margin-top: 1rem;
  }

  article > section :is(ul, ol) {
    padding-inline-start: 1em;
  }

  article > section nav :is(ul, ol) {
    padding-inline-start: inherit;
  }

  td,
  th {
    padding: 6px;
    text-align: inline-start;
  }

  .line-clamp-1 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
  }

  h1[id],
  h2[id],
  h3[id],
  h4[id],
  h5[id],
  #content {
    @apply scroll-mt-36 lg:scroll-mt-24;
  }

  /* only at less than md */
  @media (max-width: 767.5px) {
    .mobile-sidebar-toggle {
      overflow: hidden;
      height: 100vh;
    }

    .mobile-sidebar-toggle #grid-left {
      z-index: 20;
      display: flex;
      width: 100vw;
      height: 100vh;
    }
  }

  /* Markdown Styling */
  .markdown {
    @apply flex w-full flex-col items-start justify-start px-4 leading-relaxed text-slate-900 selection:bg-slate-200 selection:text-slate-500 dark:text-slate-100 dark:selection:bg-slate-100 dark:selection:text-slate-900;
  }
  .markdown h1 {
    @apply mt-8 mb-4 text-3xl font-extrabold;
  }
  .markdown h2 {
    @apply mt-8 mb-4 text-2xl font-semibold;
  }
  .markdown h3 {
    @apply mt-4 mb-2 text-xl font-semibold;
  }
  .markdown h4 {
    @apply mt-2 mb-1 text-base font-medium;
  }
  .markdown li {
    @apply list-disc text-slate-900 dark:text-white;
  }
  .markdown ol > li {
    @apply mb-2 list-decimal;
  }
  .markdown p {
    @apply mb-4 dark:text-white;
  }
  .markdown a > p {
    @apply mb-0 text-sm;
  }
  .markdown a:not(.heading-link--hidden---effects) {
    @apply text-slate-500 underline decoration-slate-500 
          decoration-dotted underline-offset-2  
          hover:text-slate-700 dark:text-slate-200 
          dark:decoration-slate-200 dark:hover:text-slate-300;
  }

  :is([dir="rtl"]) .markdown a[rel~="noreferrer"] > span {
    @apply inline-flex -scale-x-100;
  }

  .markdown code {
    @apply break-words [direction:ltr] [unicode-bidi:embed] lg:break-normal;
  }

  .markdown .code-wrapper {
    @apply inline rounded border border-slate-200 bg-slate-200/40 px-0.5 py-[0.5px] dark:border-slate-400/30 dark:bg-slate-400/20;
  }

  .markdown .remark-code-title {
    @apply z-10 -mb-1 mt-3 w-full rounded-t-md border border-slate-300/80 bg-[#191724] px-2 py-1 font-mono text-slate-200;
  }

  .markdown pre {
    @apply mx-auto mb-3 rounded border border-slate-300/80 p-2 pl-3 font-mono shadow-xl sm:pt-2;
  }

  .markdown ol {
    @apply w-full;
  }

  .markdown details {
    @apply mt-2 w-full rounded-md border border-slate-300/80 bg-[#191724] px-3 transition-all duration-300 ease-in-out;
  }
  .markdown details[open] {
    @apply bg-slate-200/10;
  }
  .markdown details pre {
    @apply border-0 shadow-none;
  }
  .markdown details > summary {
    @apply cursor-pointer text-[#A6ACCD];
  }
  .markdown summary {
    @apply py-3;
  }

  .markdown p > img {
    @apply mt-8 text-sm;
  }
  .markdown table > tbody > tr > td > a {
    overflow-wrap: anywhere;
  }
  .markdown table {
    @apply max-w-full table-fixed;
  }
  .markdown table > tbody > tr > td {
    @apply align-top;
  }
  .markdown blockquote a {
    @apply text-slate-900 dark:text-slate-50;
  }
  .DocSearch-SearchBar {
    @apply my-3 rounded-md bg-purple-400 p-2 text-sm;
  }

  #DocSearch-SearchBar {
    @apply my-3 rounded-md bg-purple-400 p-2 text-sm;
  }

  .embed {
    @apply relative mb-2 h-0 w-full pb-[56.25%];
  }

  .embed iframe {
    @apply absolute top-0 left-0 h-full w-full;
  }
}