.backtrace {
  border-top: 1px solid light-dark(var(--color-gray-200), var(--color-zinc-600));
}

.backtrace-divider > :not(:last-child) {
  border-bottom: 1px solid
    light-dark(var(--color-gray-200), var(--color-zinc-800));
}

.backtrace-frame {
  cursor: pointer;
  background-color: light-dark(var(--color-slate-100), var(--color-zinc-900));

  &:hover {
    background-color: light-dark(var(--color-gray-100), var(--color-zinc-800));
  }

  &:active {
    background-color: light-dark(var(--color-slate-100), var(--color-zinc-600));
  }
}

.backtrace-frame__marker {
  font-size: var(--text-xs);

  &::before {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 6px solid currentColor;
    transition: transform 0.2s ease;
  }
}

.backtrace-frame__function {
  font-size: var(--text-sm);
  color: light-dark(var(--color-blue-900), var(--color-blue-300));
  font-weight: 500;
}

.backtrace-frame__filename {
  font-size: var(--text-xs);
  color: light-dark(var(--color-gray-800), var(--color-zinc-300));
}

.backtrace-frame__timestamp {
  font-size: var(--text-xs);
  font-weight: 500;
  font-style: italic;
  color: light-dark(var(--color-blue-900), var(--color-blue-200));
}

.code-snippet {
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  border-top: 1px solid light-dark(var(--color-gray-200), var(--color-zinc-700));
  background-color: light-dark(var(--color-white), var(--color-black));
}

.code-snippet__lineno-col {
  color: light-dark(var(--color-gray-500), var(--color-zinc-600));
  background-color: light-dark(var(--color-gray-100), var(--color-zinc-800));
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  overflow-x: auto;
  min-width: 50px;
  white-space: nowrap;
  line-height: 1.25rem;
}

.code-snippet__lineno {
  background-color: light-dark(var(--color-gray-100), var(--color-zinc-800));
  text-align: right;
  font-size: var(--text-sm);
}

.code-snippet__lineno--current {
  background-color: light-dark(
    var(--color-orange-100),
    var(--color-orange-950)
  );
  color: light-dark(var(--color-orange-950), var(--color-orange-300));
}

.code-snippet__line-col {
  line-height: 1.25rem;
}

.code-snippet__line {
  font-size: var(--text-sm);
}

.code-snippet__line--current {
  background-color: light-dark(
    var(--color-orange-100),
    var(--color-orange-950)
  );
  color: light-dark(var(--color-orange-950), var(--color-orange-300));
}

.code-snippet__line,
.code-snippet__line--current {
  min-height: 1.25rem;
  display: flex;
  align-items: center;
}

.code-snippet__footer {
  padding: 0.5rem 1.5rem;
  border-radius: 0.25rem;
  font-size: var(--text-sm);
  color: light-dark(var(--color-gray-500), var(--color-zinc-400));
}

.cause {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;

  padding-inline: 0.5rem;
  padding-block: 0.25rem;

  font-size: var(--text-sm);
  font-weight: 500;
  color: light-dark(var(--color-blue-600), var(--color-blue-400));

  border-radius: 0.5rem;

  cursor: pointer;
  user-select: none;

  &:hover,
  &:active {
    background-color: light-dark(var(--color-gray-100), var(--color-blue-950));
  }
}