@import 'https://esm.sh/shikiji-twoslash@0.9.9/style-rich.css';

.diff,
.highlighted {
  transition: background-color 0.5s;
  margin: 0 -24px;
  padding: 0 24px;
  width: calc(100% + 48px);
  display: inline-block;
  position: relative;
}

div[class*='language-'] code .diff.remove {
  background-color: rgba(244, 63, 94, 0.16);
}

.diff.add::before {
  content: '+';
  position: absolute;
  left: 10px;
  color: #3dd68c;
}

.diff.remove::after {
  content: '-';
  position: absolute;
  left: 10px;
  color: #cb7676;
}

div[class*='language-'] code .diff.add {
  background-color: rgba(16, 185, 129, 0.16);
}
div[class*='language-'] code .line.highlighted {
  background-color: rgba(101, 117, 133, 0.16);
}
div[class*='language-'] code .line.highlighted.error {
  background-color: rgba(244, 63, 94, 0.16);
}
div[class*='language-'] code .line.highlighted.warning {
  background-color: rgba(234, 179, 8, 0.16);
}
div[class*='language-'] .has-focused .line:not(.focused) {
  filter: blur(0.095rem);
  opacity: 0.4;
  transition: filter 0.35s, opacity 0.35s;
}

div[class*='language-'] .has-focused:hover .line:not(.focused) {
  filter: blur(0);
  opacity: 1;
}

.twoslash-popup-info {
  background-color: #18181b !important;
  filter: blur(0) !important;
}

.twoslash-completions-list {
  color: #80a665;
}
.twoslash .twoslash-completions-list ul {
  background-color: #18181b !important;
}

.skeleton {
  --skeleton: #404040a6;
    background-color: var(--skeleton) !important;
    background-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)) !important;
    background-size: 40px 100%;
    background-repeat: no-repeat;
    background-position: left -40px top 0;
    animation: shine 1.2s ease-in-out infinite;
 }
  @keyframes shine {
    to {
      background-position: right -40px top 0;
   }
 }

