@import 'prism.css';
@import 'nprogress.css';
@import 'ads.css';

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

html {
  font-size: 16px;
  padding: 0px !important;
  overflow-x: hidden;
  scroll-padding-top: 64px;
}

body {
  min-height: 100vh;
}
/* Experimental */
/* body::after { 
  background-image: radial-gradient(rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0) 40%),
  radial-gradient(rgb(255, 209, 82) 30%, rgb(226, 105, 150), rgba(226, 105, 150, 0.4) 41%, transparent 52%),
  radial-gradient(rgb(160, 51, 255) 37%, transparent 46%),
  linear-gradient(155deg, transparent 65%, rgb(37, 212, 102) 95%),
  linear-gradient(45deg, rgb(0, 101, 224), rgb(15, 139, 255));
background-position: left bottom, 109% 68%, 109% 68%, center center, center center;
background-repeat: no-repeat;
background-size: 200% 200%, 285% 500%, 285% 500%, cover, cover;
content: "";
display: block;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0.17;
position: fixed;
z-index: 0;
} */

/* 
@media screen and (max-width: 640px) {
  #app-container {
    height: 100vh;
    overflow-x: hidden;
  }
}
 */

@layer base {
  :root {
    /* code colors */
    --code-foreground: 244 244 244;
    /* landing code window colors */
    --code-syntax1: 97 175 239;
    --code-syntax2: 152 195 121;
    --code-syntax3: 198 120 221;
    --code-syntax4: 212 212 216;
    --code-syntax5: 229 192 123;
    --code-syntax6: 145 180 213;
    --code-removed: 248 113 160;
    --code-highlighted-word1-bg: 120 40 200;
    --code-highlighted-word1-bg-active: 96 32 160;
    --code-highlighted-word1-text: 48 16 80;
    --code-highlighted-word2-bg: 253 208 223;
    --code-highlighted-word2-bg-active: 243 18 96;
    --code-highlighted-word2-text: 250 160 191;
    --code-highlighted-word3-bg: 116 223 162;
    --code-highlighted-word3-bg-active: 116 223 162;
    --code-highlighted-word3-text: 209 244 224;
    /* sandpack + prism */
    --code-string: 83, 224, 192;
    --code-class: 145 180 213;
    --code-punctuation: 167 172 202;
    --code-number: 83, 224, 192;
    --code-added: 116 223 162;
    --code-line-number: 212 212 216;
    --code-faded-line: 113 113 122;
    --code-comment: 113 113 122;
    --code-keyword: 198 120 221;
    --code-function: 97 175 239;
    --code-tag: 83, 224, 192;
    --code-attr-name: 145 180 213;
    --code-language-javascript: 145 180 213;
  }
}


@layer utilities {
  .step {
    counter-increment: step;
  }

  .step:before {
    @apply absolute w-7 h-7 border-1 border-default-200 bg-default-100 rounded-full font-semibold text-center text-base inline-flex items-center justify-center -indent-px;
    @apply ml-[-41px];
    content: counter(step);
  }
}

pre details[open]>summary>span:first-child::before {
  transform: rotate(90deg);
}

pre details[open]>summary span.custom-folder {
  display: none;
}

pre details:not([open])>summary span.ellipsis-token::after {
  content: '...';
}

pre details:not([open])>summary span.copy-token {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

pre details[open]>summary span.copy-token {
  display: none;
}

pre details:not([open]) {
  display: inline;
}

pre details:not([open])>summary span.empty-token {
  display: none;
}

pre details:not([open])+div.token-line {
  display: none;
}

pre summary {
  display: inline;
  position: relative;
  list-style: none;
}

pre summary>span:first-child::before {
  position: absolute;
  display: inline-flex;
  align-items: center;
  height: 21px;
  margin-left: -16px;
  margin-top: 1px;
  content: "▶";
  font-size: 12px;
  font-style: normal;
  transition: transform 100ms;
  color: #999;
}