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

@font-face {
  font-family: 'Fira Code VF';
  src: url('./assets/FiraCode-VariableFont.ttf') format('truetype');
}

.highlight-range {
  @apply rounded-md px-1;
  background: rgba(125, 211, 252, 0.15);
}

.fancybox {
  position: absolute;
  inset: 0px;
  height: 100%;
  z-index: -2;
  border-radius: 6px;
  width: 100%;
  background-image: linear-gradient(
    130deg,
    rgb(255, 61, 116),
    rgb(249, 33, 149),
    rgb(227, 34, 188),
    rgb(181, 94, 230),
    rgb(118, 128, 252),
    rgb(0, 150, 255),
    rgb(0, 183, 255),
    rgb(0, 208, 242),
    rgb(0, 227, 184),
    rgb(70, 239, 111)
  );
  background-size: 150% 150%;
  animation: fancy 2s ease-out infinite;
}

.fancy-shadow {
  border: 1px solid #fff;
  box-shadow: 0 0 0 1px #32325d0d, 0 7px 14px #32325d05, 0 3px 6px #0000000d;
}

@keyframes fancy {
  0%,
  100% {
    background-position: 0% 50%;
    filter: blur(3px);
  }

  50% {
    background-position: 100% 50%;
    filter: blur(6px);
  }
}

.scrollbar::-webkit-scrollbar {
  width: 10px;
  height: 16px;
}

/* Track */
.scrollbar::-webkit-scrollbar-track {
  border-radius: 100vh;
  margin-top: 4px;
  margin-bottom: 4px;
  padding-right: 4px;
  @apply bg-slate-300/20;
}

/* Handle */
.scrollbar::-webkit-scrollbar-thumb {
  @apply bg-slate-300/20;
  border-radius: 100px;
  border: 2px solid rgb(237, 242, 247, 0.2);
}

/* Handle on hover */
.scrollbar::-webkit-scrollbar-thumb:hover {
  @apply bg-slate-300/30;
}

/**
 * Dracula Theme originally by Zeno Rocha [@zenorocha]
 * https://draculatheme.com/
 *
 * Ported for PrismJS by Albert Vallverdu [@byverdu]
 */
code[class*='language-'],
pre[class*='language-'] {
  font-size: 14px;
  color: #f8f8f2;
  background: none;
  text-shadow: 0 1px rgba(0, 0, 0, 0.3);
  font-family: Fira Code VF, ui-monospace, SFMono-Regular, Menlo, Monaco,
    Consolas, Liberation Mono, Courier New, monospace;
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  word-wrap: normal;
  line-height: 1.5;
  -moz-tab-size: 4;
  -o-tab-size: 4;
  tab-size: 4;
  -webkit-hyphens: none;
  -moz-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
}

/* Code blocks */
pre[class*='language-'] {
  padding: 1em;
  overflow: auto;
}

:not(pre) > code[class*='language-'],
pre[class*='language-'] {
  background: #1b1e24;
}

/* Inline code */
:not(pre) > code[class*='language-'] {
  padding: 0.1em;
  border-radius: 0.3em;
  white-space: normal;
}

.token.tag,
.token.class-name,
.token.selector,
.token.selector .class,
.token.selector.class,
.token.function {
  @apply text-pink-400;
}

.token.attr-name,
.token.keyword,
.token.rule,
.token.pseudo-class,
.token.important {
  @apply text-slate-300;
}

.token.attr-value,
.token.class,
.token.string {
  @apply text-sky-300;
}

.token.punctuation,
.token.attr-equals {
  @apply text-slate-500;
}

.token.attr-value * {
  @apply text-sky-300;
}

.token.attr-value .attr-equals,
.token.attr-value .attr-equals + .punctuation,
.token.attr-value > .punctuation:last-child {
  @apply text-slate-500;
}

.token.property {
  @apply text-sky-300;
}

.token.unit {
  @apply text-teal-200;
}

.language-shell .token:not(.comment),
.token.atapply .token:not(.rule):not(.important):not(.punctuation) {
  color: inherit;
}

.language-css .token.function {
  @apply text-teal-200;
}

.token.comment,
.token.module,
.token.operator,
.token.combinator {
  @apply text-slate-400;
}

.token.unchanged {
  @apply block;
}

.token.deleted,
.token.inserted {
  @apply relative -mx-9 block border-l-4 pl-8 pr-5 before:absolute before:top-0 before:left-4;
}

.token.inserted {
  @apply border-teal-400 bg-teal-400/[0.15] before:text-teal-400 before:content-['+'];
}

.token.deleted {
  @apply border-rose-400 bg-rose-500/[0.15] before:text-rose-400 before:content-['-'];
}

pre[class^='language-diff-'] {
  @apply flex px-9;
}

pre[class^='language-diff-'] > code {
  @apply min-w-full flex-none;
}
